01.04.03. Razor Pages: Create

Bir kayıt ekleme sayfası deyince aklımıza text’leri oluşturma, bir form üzerinden gönderme ve sunucu tarafında işleme aklımıza gelir. Hatta sunucu tarafında bir veritabanındaki tabloya veri yaratmak için hemen INSERT ifadesini düşünebiliriz. Şimdi bir Razor kodu ve EF Core ile bu işlemin nasıl yapılacağına bir bakalım. Öncelikle Create.cshtml.cs dosyasına bir bakalım.

Create.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using RazorPagesMovie.Models;

namespace RazorPagesMovie.Pages.Movies
{
    public class CreateModel : PageModel
    {
        private readonly RazorPagesMovie.Models.RazorPagesMovieContext _context;

        public CreateModel(RazorPagesMovie.Models.RazorPagesMovieContext context)
        {
            _context = context;
        }

        public IActionResult OnGet()
        {
            Movie = new Movie
            {
                Title = "The Good, the bad, and the ugly",
                Genre = "Western",
                Price = 1.19M,
                ReleaseDate = DateTime.Now
             //   ,                Rating = "NA"
            };
            return Page();
        }

        [BindProperty]
        public Movie Movie { get; set; }

        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            _context.Movie.Add(Movie);
            await _context.SaveChangesAsync();

            return RedirectToPage("./Index");
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

using Microsoft.AspNetCore.Mvc.Rendering;

using RazorPagesMovie.Models;

namespace RazorPagesMovie.Pages.Movies

{

public class CreateModel : PageModel

{

private readonly RazorPagesMovie.Models.RazorPagesMovieContext _context;

public CreateModel(RazorPagesMovie.Models.RazorPagesMovieContext context)

{

_context = context;

}

public IActionResult OnGet()

{

Movie = new Movie

{

Title = "The Good, the bad, and the ugly",

Genre = "Western",

Price = 1.19M,

ReleaseDate = DateTime.Now

// , Rating = "NA"

};

return Page();

}

[BindProperty]

public Movie Movie { get; set; }

public async Task<IActionResult> OnPostAsync()

{

if (!ModelState.IsValid)

{

return Page();

}

_context.Movie.Add(Movie);

await _context.SaveChangesAsync();

return RedirectToPage("./Index");

}

Klasik context işlemini yapıp Veritabanı ile bağlantıyı kurduk. OnGet sayfa oluşurken bir Movie nesnesi oluşturuyor. IActionResult türünden Create.cshtml dosyasını döndürüyor. Bu işlemin amacı sayfa ilk yüklenirken örnek bir değer seti oluşturmak, bu değeri değiştirebilirsiniz.

Burada tek Movie değişkeni vardır. Bu değişkenin üzerindeki [BindProperty]

Bu bölümde önemli olan fonksiyon OnPostAsync metodudur. Bu metod sayfada bir POST işlemi olduğunda devreye girer. Model bölümüne uygun bir yapılmaysa sayfa aynen döndürülür. Eğer Model bölümüne uygun bir giriş ise Movie.Add komutu ile bir Movie nesnesi eklenir ve SaveChangesAsync() kaydetme işlemi çağrılır. Burada sistem otomatik olarak bir Insert işlemini devreye alır ve kaydetme işleminden sonra Index sayfasına yönlendirme yapılır. Şimdi bu koda bağlı .cshtml dosyasına bakalım.

Create.cshtml

@page
@model RazorPagesMovie.Pages.Movies.CreateModel

@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>Movie</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Movie.Title" class="control-label"></label>
                <input asp-for="Movie.Title" class="form-control" />
                <span asp-validation-for="Movie.Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.ReleaseDate" class="control-label"></label>
                <input asp-for="Movie.ReleaseDate" class="form-control" />
                <span asp-validation-for="Movie.ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.Genre" class="control-label"></label>
                <input asp-for="Movie.Genre" class="form-control" />
                <span asp-validation-for="Movie.Genre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.Price" class="control-label"></label>
                <input asp-for="Movie.Price" class="form-control" />
                <span asp-validation-for="Movie.Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

@page

@model RazorPagesMovie.Pages.Movies.CreateModel

ViewData["Title"] = "Create";

}

<h1>Create</h1>

<h4>Movie</h4>

<hr />

</div>

</div>

</div>

</div>

</div>

</form>

</div>

<div>

</div>

@section Scripts {

@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

class=”text-danger” validation işleminden dönen sonuçları yazdırmak için kullanılır. Burada @section Scripts bölümüne eklenen kod validation işleminin gerçekleşmesini sağlar. Bu istemci tarafında bir kontroldür, ancak aynı kontrol sunucu tarafında da yapılır. Tek kod yazarak hem istemci hem de sunucu tarafında kontrole destek verir. Bu konuyu ayrıca anlatacağız.

<form method=”post”> metodu submit işlemindeki gönderim türünü belirler. Submit işlemi yapıldığında eğer tüm değerler validation’dan geçerse sunucudaki aynı sayfaya POST edilir. Bundan sonraki işlemleri OnPostAsync() metodu yapar.

Burada bir input etiketinin nasıl çevrime uğradığına da bakalım. Razor tarafında:

<input asp-for="Movie.Title" class="form-control" />

1	<input asp-for="Movie.Title" class="form-control" />

İstemci tarafında, tarayıcı da:

<input name="Movie.Title" class="form-control" id="Movie_Title" type="text" value="">

1	<input name="Movie.Title" class="form-control" id="Movie_Title" type="text" value="">

name ve id özellikleri asp-for’dan gelir. type ve value özellikleri ise otomatik olarak yazılır.