ASP.NET Web Sayfalarına Giriş - Formları Kullanarak Veritabanı Verilerini Girme

Makale
07/13/2023

Bu öğreticide, bir giriş formu oluşturma ve ASP.NET Web Sayfaları (Razor) kullanırken formdan alınan verileri veritabanı tablosuna girme gösterilmektedir. Seriyi ASP.NET Web Sayfalarında HTML Formlarının Temelleri aracılığıyla tamamladığınız varsayılır.

Öğrenecekleriniz:

Giriş formlarını işleme hakkında daha fazla bilgi.

Veritabanına veri ekleme (ekleme).

Kullanıcıların forma gerekli bir değer girmelerini sağlama (kullanıcı girişini doğrulama).

Doğrulama hatalarını görüntüleme.

Geçerli sayfadan başka bir sayfaya atlama.

Ele alınan özellikler/teknolojiler:

Database.Execute yöntemi.

SQL Insert Into deyimi

Yardımcı Validation .

Response.Redirect yöntemi.

Oluşturacakların

Daha önce veritabanı oluşturmayı gösteren öğreticide veritabanı verilerini doğrudan WebMatrix'te düzenleyerek ve Veritabanı çalışma alanında çalışarak girmişsinizdir. Çoğu uygulamada bu, verileri veritabanına yerleştirmenin pratik bir yolu değildir. Bu nedenle bu öğreticide, sizin veya herkesin verileri girip veritabanına kaydetmesini sağlayan web tabanlı bir arabirim oluşturacaksınız.

Yeni film girebileceğiniz bir sayfa oluşturacaksınız. Sayfada, film başlığı, tarz ve yıl girebileceğiniz alanlar (metin kutuları) içeren bir giriş formu bulunur. Sayfa şu sayfaya benzer:

Tarayıcıda 'Film Ekle' sayfası

Metin kutuları şu işaretleme gibi görünecek HTML <input> öğeleri olacaktır:

<input type="text" name="genre" value="" />

Temel Giriş Formu Oluşturma

AddMovie.cshtml adlı bir sayfa oluşturun.

Dosyadakileri aşağıdaki işaretlemeyle değiştirin. Her şeyin üzerine yaz; kısa süre içinde en üste bir kod bloğu ekleyeceksiniz.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
</head>
<body>
  <h1>Add a Movie</h1>
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

Bu örnekte form oluşturmaya yönelik tipik HTML gösterilmektedir. Metin kutuları ve gönder düğmesi için öğeleri kullanır <input> . Metin kutularının açıklamalı alt yazıları standart <label> öğeler kullanılarak oluşturulur. <fieldset> ve <legend> öğeleri formun çevresine güzel bir kutu koyar.

Bu sayfada öğesinin <form> özniteliğinin değeri olarak kullandığına postmethod dikkat edin. Önceki öğreticide yöntemini kullanan get bir form oluşturdunuz. Bu doğruydu, çünkü form sunucuya değer gönderse de istek herhangi bir değişiklik yapmadı. Tek yaptığı verileri farklı şekillerde getirmekti. Ancak, bu sayfada değişiklikler yapacaksınız ; yeni veritabanı kayıtları ekleyeceksiniz. Bu nedenle, bu form yöntemini kullanmalıdır post . (ve işlemleri arasındaki GET fark hakkında daha fazla bilgi için önceki öğreticidekiGET, POST ve HTTP Fiil Güvenliği kenar çubuğuna bakın.)POST

Her metin kutusunun bir name öğesi (title, genre, year) olduğunu unutmayın. Önceki öğreticide gördüğünüz gibi bu adlar önemlidir çünkü daha sonra kullanıcının girişini alabilmeniz için bu adlara sahip olmanız gerekir. Herhangi bir adı kullanabilirsiniz. Hangi verilerle çalıştığınızı hatırlamanıza yardımcı olacak anlamlı adlar kullanmak yararlı olur.

value Her <input> öğenin özniteliği bir bit Razor kodu içerir (örneğin, Request.Form["title"]). Form gönderildikten sonra metin kutusuna girilen değeri (varsa) korumak için önceki öğreticide bu numaranın bir sürümünü öğrendiniz.

Form Değerlerini Alma

Ardından formu işleyen kod ekleyebilirsiniz. Ana hat olarak aşağıdakileri yapacaksınız:

Sayfanın gönderilip gönderilmediğini (gönderilip gönderilmediğini) denetleyin. Kodunuzun yalnızca kullanıcılar düğmeye tıkladığında çalıştırılmasını istiyorsunuz, sayfa ilk kez çalıştırıldığında çalışmıyor.
Kullanıcının metin kutularına girdiği değerleri alın. Bu durumda, form fiilini kullandığından POST , koleksiyondan Request.Form form değerlerini alırsınız.
Filmler veritabanı tablosuna değerleri yeni bir kayıt olarak ekleyin.

Dosyanın en üstüne aşağıdaki kodu ekleyin:

@{
    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];
    }
}

İlk birkaç satır, metin kutularındaki değerleri tutmak için değişkenler (title, genreve year) oluşturur. Çizgi if(IsPost) , değişkenlerin yalnızca kullanıcılar Film Ekle düğmesine tıkladığında , yani form deftere nakledildiğinde ayarlanmasını sağlar.

Önceki bir öğreticide gördüğünüz gibi, gibi Request.Form["name"]bir ifade kullanarak bir metin kutusunun değerini alırsınız; burada ad öğenin adıdır <input> .

Değişkenlerin (title, genreve year) adları rastgeledir. Öğelere atadığınız adlar <input> gibi, istediğiniz her şeyi çağırabilirsiniz. (Değişkenlerin adlarının formdaki öğelerin ad öznitelikleriyle eşleşmesi <input> gerekmez.) Ancak öğelerde <input> olduğu gibi, içerdikleri verileri yansıtan değişken adları kullanmak iyi bir fikirdir. Kod yazarken, tutarlı adlar hangi verilerle çalıştığınızı hatırlamanızı kolaylaştırır.

Veritabanına Veri Ekleme

Yeni eklediğiniz kod bloğunda, bloğun kapanış ayracı ( ) if içine ( } yalnızca kod bloğunun içine değil) aşağıdaki kodu ekleyin:

var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) VALUES(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);

Bu örnek, önceki öğreticide verileri getirmek ve görüntülemek için kullandığınız koda benzer. ile db = başlayan satır, daha önce olduğu gibi veritabanını açar ve sonraki satır daha önce gördüğünüz gibi bir SQL deyimi tanımlar. Ancak bu kez bir SQL Insert Into deyimi tanımlar. Aşağıdaki örnekte deyiminin genel söz dizimi gösterilmektedir Insert Into :

INSERT INTO table (column1, column2, column3, ...) VALUES (value1, value2, value3, ...)

Başka bir deyişle, eklenecek tabloyu belirtir, sonra eklenecek sütunları listeler ve sonra eklenecek değerleri listelersiniz. (Daha önce belirtildiği gibi, SQL büyük/küçük harfe duyarlı değildir, ancak bazı kişiler komutu okumayı kolaylaştırmak için anahtar sözcükleri büyük harfle kullanır.)

Içine eklediğiniz sütunlar komutunda zaten listelenmiştir— (Title, Genre, Year). İlginç olan, metin kutularından komutun parçasına VALUES değerleri nasıl alabileceğinizdir. Gerçek değerler yerine, yer tutucular olan , @1ve @2değerlerini görürsünüz@0. Komutu çalıştırdığınızda (satırda db.Execute ), metin kutularından elde ettiğiniz değerleri geçirirsiniz.

Önemli! Sql deyimine bir kullanıcı tarafından çevrimiçi olarak girilen verileri eklemenin tek yolunun, burada gördüğünüz gibi yer tutucuları kullanmak olduğunu unutmayın (VALUES(@0, @1, @2)). Kullanıcı girişini bir SQL deyimiyle birleştirirseniz, ASP.NET Web Sayfaları'ndaki Form Temelleri (önceki öğretici) bölümünde açıklandığı gibi kendinizi bir SQL ekleme saldırısına açarsınız.

Yine de bloğun if içinde, satırın arkasına db.Execute aşağıdaki satırı ekleyin:

Response.Redirect("~/Movies");

Yeni film veritabanına eklendikten sonra, yeni girdiğiniz filmi görebilmeniz için bu satır sizi Filmler sayfasına atlar (yeniden yönlendirir). işleci ~ "web sitesinin kökü" anlamına gelir. (İşleç ~ genellikle HTML'de değil, yalnızca ASP.NET sayfalarda çalışır.)

Kod bloğunun tamamı şu örneğe benzer:

@{
    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];

        var db = Database.Open("WebPagesMovies");
        var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
        db.Execute(insertCommand, title, genre, year);
        Response.Redirect("~/Movies");
    }
}

Insert Komutunu Test Etme (Şimdiye kadar)

Henüz işiniz bitmedi, ancak şimdi test etmek için iyi bir zaman.

WebMatrix'teki dosyaların ağaç görünümünde AddMovie.cshtml sayfasına sağ tıklayın ve ardından Tarayıcıda başlat'a tıklayın.

Tarayıcıdaki 'Film Ekle' sayfasını gösteren ekran görüntüsü.

(Tarayıcıda farklı bir sayfayla karşınıza çıkarsa URL'nin http://localhost:nnnnn/AddMovieolduğundan emin olun; burada nnnnn kullanmakta olduğunuz bağlantı noktası numarasıdır.)

Hata sayfası mı aldınız? Öyleyse, dikkatle okuyun ve kodun daha önce tam olarak listelenen gibi göründüğünden emin olun.

Forma bir film girin; örneğin, "Citizen Kane", "Drama" ve "1941" kullanın. (Veya her neyse.) Ardından Film Ekle'ye tıklayın.

Her şey yolunda giderse Filmler sayfasına yönlendirilirsiniz. Yeni filminizin listelendiğinden emin olun.

Yeni eklenen filmi gösteren filmler sayfası

Kullanıcı Girişini Doğrulama

AddMovie sayfasına Geri dön veya yeniden çalıştırın. Başka bir film girin, ancak bu kez yalnızca başlığı girin; örneğin, "Yağmurda Şarkı Söyleme" yazın. Ardından Film Ekle'ye tıklayın.

Filmler sayfasına yeniden yönlendirilirsiniz. Yeni filmi bulabilirsiniz, ancak tamamlanmamıştır.

Bazı değerleri eksik olan yeni filmi gösteren filmler sayfası

Filmler tablosunu oluşturduğunuzda, alanların hiçbirinin null olmadığını açıkça belirttiniz. Burada yeni filmler için bir giriş formunuz var ve alanları boş bırakıyorsunuz. Bu bir hatadır.

Bu durumda veritabanı aslında bir hata oluşturmadı (veya oluşturmadı). Bir tür veya yıl sağlamadınız, bu nedenle AddMovie sayfasındaki kod bu değerleri boş dizeler olarak adlandırdı. SQL Insert Into komutu çalıştırıldığında, tür ve yıl alanlarının içinde yararlı veriler yoktu, ancak null değildiler.

Açıkçası, kullanıcıların veritabanına yarı boş film bilgileri girmesine izin vermek istemezsiniz. Çözüm, kullanıcının girişini doğrulamaktır. Başlangıçta doğrulama, kullanıcının tüm alanlar için bir değer girdiğinden (yani, hiçbirinin boş dize içermediğinden) emin olur.

İpucu

Null ve Boş Dizeler

Programlamada farklı "değer yok" farklı ifadeleri arasında ayrım vardır. Genel olarak, hiçbir şekilde ayarlanmamış veya başlatılmamışsa değer null olur. Buna karşılık, karakter verilerini (dizeler) bekleyen bir değişken boş bir dizeye ayarlanabilir. Bu durumda değer null değildir; yalnızca uzunluğu sıfır olan bir karakter dizesine açıkça ayarlanmıştır. Bu iki deyim farkı gösterir:

var firstName;       // Not set, so its value is null
var firstName = "";  // Explicitly set to an empty string -- not null

Bundan biraz daha karmaşıktır, ancak önemli olan bir tür belirsiz durumu temsil ediyor null olmasıdır.

Şimdi ve sonra bir değerin tam olarak ne zaman null olduğunu ve yalnızca boş bir dize olduğunu anlamak önemlidir. AddMovie sayfasının kodunda, vb. kullanarak Request.Form["title"] metin kutularının değerlerini alırsınız. Sayfa ilk kez çalıştırıldığında (düğmeye tıklamadan önce), değeri Request.Form["title"] null değeridir. Ancak formu gönderdiğinizde metin Request.Form["title"] kutusunun değerini title alır. Açık değildir, ancak boş metin kutusu null değildir; yalnızca içinde boş bir dize vardır. Bu nedenle, düğme tıklamasına yanıt olarak kod çalıştırıldığında içinde Request.Form["title"] boş bir dize vardır.

Bu ayrım neden önemlidir? Filmler tablosunu oluşturduğunuzda, alanların hiçbirinin null olmadığını açıkça belirttiniz. Ancak burada yeni filmler için bir giriş formunuz var ve alanları boş bırakıyorsunuz. Tür veya yıl değerleri olmayan yeni filmleri kaydetmeye çalıştığınızda veritabanının şikayet etmesini beklersiniz. Ancak asıl nokta bu; bu metin kutularını boş bıraksanız bile değerler null değildir; boş dizelerdir. Sonuç olarak, bu sütunlar boşken veritabanına yeni filmler kaydedebilirsiniz, ancak null değil! — değerler. Bu nedenle, kullanıcıların boş bir dize göndermediğinden emin olmanız gerekir; bunu kullanıcının girişini doğrulayarak yapabilirsiniz.

Doğrulama Yardımcısı

ASP.NET Web Sayfaları, Validation kullanıcıların gereksinimlerinizi karşılayan verileri girmelerini sağlamak için kullanabileceğiniz bir yardımcı (yardımcı) içerir. Yardımcı Validation , ASP.NET Web Sayfaları'nda yerleşik olarak bulunan yardımcılardan biridir, bu nedenle önceki bir öğreticide Gravatar yardımcısını yüklediğiniz gibi NuGet'i kullanarak bunu bir paket olarak yüklemeniz gerekmez.

Kullanıcının girişini doğrulamak için aşağıdakileri yapacaksınız:

Sayfadaki metin kutularına değer eklemek istediğinizi belirtmek için kodu kullanın.
Yalnızca her şey doğrulandığında film bilgilerinin veritabanına eklenmesi için koda bir test yerleştirin.
Hata iletilerini görüntülemek için işaretlemeye kod ekleyin.

AddMovie sayfasındaki kod bloğunda, değişken bildirimlerinden hemen önce en üstte aşağıdaki kodu ekleyin:

Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");

Girdi gerektirmek istediğiniz her alan (<input>öğe) için bir kez çağırırsınızValidation.RequireField. Burada gördüğünüz gibi her çağrı için özel bir hata iletisi de ekleyebilirsiniz. (İletileri, istediğiniz her şeyi koyabileceğinizi göstermek için çeşitledik.)

Bir sorun varsa, yeni film bilgilerinin veritabanına eklenmesini engellemek istiyorsunuz. bloğundaif(IsPost), test eden Validation.IsValid()başka bir koşul eklemek için (mantıksal VE) kullanın && . İşiniz bittiğinde bloğun tamamı if(IsPost) şu koda benzer:

if(IsPost && Validation.IsValid()){
    title = Request.Form["title"];
    genre = Request.Form["genre"];
    year = Request.Form["year"];

    var db = Database.Open("WebPagesMovies");
    var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
    db.Execute(insertCommand, title, genre, year);
    Response.Redirect("~/Movies");
}

Yardımcıyı kullanarak Validation kaydettiğiniz alanlardan herhangi birinde doğrulama hatası varsa, Validation.IsValid yöntem false döndürür. Bu durumda, söz konusu bloktaki kodun hiçbiri çalışmaz, bu nedenle veritabanına geçersiz film girdileri eklenmez. Ve elbette Filmler sayfasına yönlendirilmediniz.

Doğrulama kodu da dahil olmak üzere tam kod bloğu şimdi şu örneğe benzer:

@{
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

Doğrulama Hatalarını Görüntüleme

Son adım, hata iletilerini görüntülemektir. Her doğrulama hatası için ayrı ayrı iletiler görüntüleyebilir veya bir özet ya da her ikisini de görüntüleyebilirsiniz. Bu öğreticide, nasıl çalıştığını görebilmek için ikisini de yapacaksınız.

Doğruladığınız her <input> öğenin yanında yöntemini çağırın Html.ValidationMessage ve doğruladığınız öğenin adını <input> geçirin. Yöntemini hata iletisinin görünmesini istediğiniz yere yerleştirirsiniz Html.ValidationMessage . Sayfa çalıştırıldığında yöntemi doğrulama Html.ValidationMessage hatasının gideceği bir <span> öğeyi işler. (Hata yoksa öğe <span> işlenir, ancak içinde metin yoktur.)

Sayfadaki işaretlemeyi, sayfadaki üç <input> öğeden her biri için bir Html.ValidationMessage yöntem içermesi için değiştirin, örneğin:

<p><label for="title">Title:</label>
     <input type="text" name="title" value="@Request.Form["title"]" />
      @Html.ValidationMessage("title")
  </p>

  <p><label for="genre">Genre:</label>
     <input type="text" name="genre" value="@Request.Form["genre"]" />
      @Html.ValidationMessage("genre")
  </p>

  <p><label for="year">Year:</label>
     <input type="text" name="year" value="@Request.Form["year"]" />
      @Html.ValidationMessage("year")
  </p>

Özetin nasıl çalıştığını görmek için, sayfadaki öğesinin hemen arkasına aşağıdaki işaretlemeyi <h1>Add a Movie</h1> ve kodu da ekleyin:

@Html.ValidationSummary()

Varsayılan olarak, Html.ValidationSummary yöntemi tüm doğrulama iletilerini bir listedeki (öğenin içindeki bir <ul><div> öğe) görüntüler. yönteminde Html.ValidationMessage olduğu gibi, doğrulama özeti için işaretleme her zaman işlenir; hata yoksa, hiçbir liste öğesi işlenmez.

Özet, alana özgü her hatayı görüntülemek için yöntemini kullanmak yerine doğrulama iletilerini görüntülemenin Html.ValidationMessage alternatif bir yolu olabilir. Ya da hem özet hem de ayrıntıları kullanabilirsiniz. Ya da yöntemini kullanarak Html.ValidationSummary genel bir hata görüntüleyebilir ve ardından ayrıntıları görüntülemek için tek tek Html.ValidationMessage çağrıları kullanabilirsiniz.

Sayfanın tamamı artık şu örneğe benzer:

@{
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
</head>
<body>
  <h1>Add a Movie</h1>
  @Html.ValidationSummary()
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
          @Html.ValidationMessage("title")
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
          @Html.ValidationMessage("genre")
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
          @Html.ValidationMessage("year")
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

İşte bu kadar. Artık bir film ekleyerek ancak alanlardan birini veya daha fazlasını bırakarak sayfayı test edebilirsiniz. Bunu yaptığınızda aşağıdaki hatanın görüntülendiğini görürsünüz:

Doğrulama hata iletilerini gösteren Film Ekle sayfası

Doğrulama Hata İletilerini Şekillendirme

Hata iletileri olduğunu görebilirsiniz, ancak bunlar gerçekten çok iyi göze çarpmaz. Ancak hata iletilerine stil eklemenin kolay bir yolu vardır.

tarafından Html.ValidationMessagegörüntülenen tek tek hata iletilerine stil vermek için adlı field-validation-errorbir CSS stil sınıfı oluşturun. Doğrulama özetinin görünümünü tanımlamak için adlı validation-summary-errorsbir CSS stil sınıfı oluşturun.

Bu tekniğin nasıl çalıştığını görmek için sayfanın bölümüne bir <style> öğe <head> ekleyin. Ardından, aşağıdaki kuralları içeren ve validation-summary-errors adlı field-validation-error stil sınıflarını tanımlayın:

<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
  <style type="text/css">
    .field-validation-error {
      font-weight:bold;
      color:red;
      background-color:yellow;
     }
    .validation-summary-errors{
      border:2px dashed red;
      color:red;
      background-color:yellow;
      font-weight:bold;
      margin:12px;
    }
  </style>
</head>

Normalde stil bilgilerini muhtemelen ayrı bir .css dosyasına koyarsınız, ancak kolaylık olması için şimdilik bunları sayfaya koyabilirsiniz. (Bu öğretici kümesinin ilerleyen bölümlerinde CSS kurallarını ayrı bir .css dosyasına taşıyacaksınız.)

Doğrulama hatası varsa yöntemi içeren Html.ValidationMessageclass="field-validation-error"bir <span> öğeyi işler. Bu sınıf için stil tanımı ekleyerek iletinin nasıl görüneceğini yapılandırabilirsiniz. Hatalar varsa yöntemi ValidationSummary de benzer şekilde özniteliğini class="validation-summary-errors"dinamik olarak işler.

Sayfayı yeniden çalıştırın ve birkaç alanı bilerek dışarıda bırakın. Hatalar artık daha belirgindir. (Aslında, bunlar aşırı dozdan ibarettir, ancak bu yalnızca neler yapabileceğinizi göstermek içindir.)

Stil eklenmiş doğrulama hatalarını gösteren Film Ekle sayfası

Filmler Sayfasına Bağlantı Ekleme

Son adımlardan biri, orijinal film listesinden AddMovie sayfasına ulaşmak için kolaylık sağlamaktır.

Filmler sayfasını yeniden açın. Yardımcıyı izleyen kapanış </div> etiketinden WebGrid sonra aşağıdaki işaretlemeyi ekleyin:

<p>
  <a href="~/AddMovie">Add a movie</a>
</p>

Daha önce gördüğünüz gibi, ASP.NET işleci web sitesinin kökü olarak yorumlar ~ . işlecini ~ kullanmanız gerekmez; işaretlemeyi veya HTML'nin <a href="./AddMovie">Add a movie</a> anladığı yolu tanımlamak için başka bir yol kullanabilirsiniz. ~ Ancak razor sayfaları için bağlantılar oluşturduğunuzda işleç iyi bir genel yaklaşımdır çünkü siteyi daha esnek hale getirir; geçerli sayfayı bir alt klasöre taşırsanız, bağlantı Yine de AddMovie sayfasına gider. (İşlecin ~ yalnızca .cshtml sayfalarında çalıştığını unutmayın. ASP.NET bunu anlar, ancak standart HTML değildir.)

İşiniz bittiğinde Filmler sayfasını çalıştırın. Şu sayfaya benzer:

'Film Ekle' sayfasına bağlantı içeren Filmler sayfası

AddMovie sayfasına gittiğinden emin olmak için Film ekle bağlantısına tıklayın.

Sonraki Geliyor

Sonraki öğreticide, kullanıcıların zaten veritabanında bulunan verileri düzenlemesine nasıl izin vereceğinizi öğreneceksiniz.

AddMovie Sayfası için Tam Listeleme

@{

    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
      <style type="text/css">
    .field-validation-error {
      font-weight:bold;
      color:red;
      background-color:yellow;
     }
    .validation-summary-errors{
      border:2px dashed red;
      color:red;
      background-color:yellow;
      font-weight:bold;
      margin:12px;
    }
  </style>
</head>
<body>
  <h1>Add a Movie</h1>
  @Html.ValidationSummary()
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
          @Html.ValidationMessage("title")
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
         @Html.ValidationMessage("genre")
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
          @Html.ValidationMessage("year")
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

Ek Kaynaklar

Razor Söz Dizimini Kullanarak ASP.NET Web Programlamaya Giriş
W3Schools sitesinde SQL INSERT INTO Deyimi
ASP.NET Web Sayfaları Sitelerinde Kullanıcı Girişini Doğrulama. Yardımcıyla Validation çalışma hakkında daha fazla bilgi.

Önceki Sonraki