ASP.NET Web Sayfaları (Razor) Sitelerinde HTML Formlarıyla Çalışma

  • Makale

yazan: Tom FitzMacken

Bu makalede, ASP.NET Web Sayfaları (Razor) web sitesinde çalışırken HTML formunun (metin kutuları ve düğmelerle) nasıl işlendiği açıklanır.

Öğrenecekleriniz:

  • HTML formu oluşturma.
  • Formdan kullanıcı girişini okuma.
  • Kullanıcı girişini doğrulama.
  • Sayfa gönderildikten sonra form değerlerini geri yükleme.

Makalede açıklanan ASP.NET programlama kavramları şunlardır:

  • Request nesnesi.
  • Giriş doğrulama.
  • HTML kodlama.

Öğreticide kullanılan yazılım sürümleri

  • ASP.NET Web Sayfaları (Razor) 3

Bu öğretici ASP.NET Web Sayfaları 2 ile de çalışır.

Basit HTML Formu Oluşturma

  1. Yeni bir web sitesi oluşturun.

  2. Kök klasörde Form.cshtml adlı bir web sayfası oluşturun ve aşağıdaki işaretlemeyi girin:

    <!DOCTYPE html>
<html>
    <head>
        <title>Customer Form</title>
    </head>
    <body>
      <form method="post" >
        <fieldset>
          <legend>Add Customer</legend>
          <div>
            <label for="CompanyName">Company Name:</label>
            <input type="text" name="CompanyName" value="" />
          </div>
          <div>
            <label for="ContactName">Contact Name:</label>
            <input type="text" name="ContactName" value="" />
          </div>
          <div>
            <label for="Employees">Employee Count:</label>
            <input type="text" name="Employees" value="" />
          </div>
          <div>
            <label>&nbsp;</label>
            <input type="submit" value="Submit" class="submit" />
          </div>
        </fieldset>
      </form>
    </body>
</html>

  3. Sayfayı tarayıcınızda başlatın. (WebMatrix'te , Dosyalar çalışma alanında dosyaya sağ tıklayın ve ardından Tarayıcıda başlat'ı seçin.) Üç giriş alanı ve Gönder düğmesi içeren basit bir form görüntülenir.

    Üç metin kutusu içeren formun ekran görüntüsü.

    Bu noktada Gönder düğmesine tıklarsanız hiçbir şey olmaz. Formu kullanışlı hale getirmek için sunucuda çalışacak bazı kodlar eklemeniz gerekir.

Formdan Kullanıcı Girişini Okuma

Formu işlemek için, gönderilen alan değerlerini okuyan ve bunlarla bir şey yapmak için kod eklersiniz. Bu yordam, alanları nasıl okuyabileceğinizi ve sayfada kullanıcı girişinin nasıl görüntüleneceğini gösterir. (Bir üretim uygulamasında genellikle kullanıcı girişiyle daha ilginç şeyler yaparsınız. Bunu veritabanlarıyla çalışma makalesinde yapacaksınız.)

  1. Form.cshtml dosyasının en üstüne aşağıdaki kodu girin:

    @{
    if (IsPost) {
        string companyname = Request.Form["companyname"];
        string contactname = Request.Form["contactname"];
        int employeecount = Request.Form["employees"].AsInt();

        <text>
          You entered: <br />
          Company Name: @companyname <br />
          Contact Name: @contactname <br />
          Employee Count: @employeecount <br />
        </text>
    }
}

    Kullanıcı sayfayı ilk kez istediğinde yalnızca boş form görüntülenir. Kullanıcı (siz olacaksınız) formu doldurur ve gönder'e tıklar. Bu, kullanıcı girişini sunucuya gönderir (gönderir). Varsayılan olarak, istek aynı sayfaya ( form.cshtml) gider.

    Sayfayı bu kez gönderdiğinizde, girdiğiniz değerler formun hemen üstünde görüntülenir:

    Girdiğiniz değerlerin sayfada görüntülendiğini gösteren ekran görüntüsü.

    Sayfanın koduna bakın. İlk olarak, sayfanın gönderilip gönderilmediğini, yani bir kullanıcının Gönder düğmesine tıklayıp tıklamadığını belirlemek için yöntemini kullanırsınızIsPost. Bu bir gönderiyse true IsPost değerini döndürür. İlk istek (GET isteği) veya geri gönderme (POST isteği) ile çalışıp çalışmadığınızı saptamak için Web Sayfalarını ASP.NET standart yöntem budur. (GET ve POST hakkında daha fazla bilgi için Razor Söz Dizimini Kullanarak ASP.NET Web Sayfaları Programlamaya Giriş bölümündeki "HTTP GET ve POST ve IsPost Özelliği" kenar çubuğuna bakın.)

    Ardından, kullanıcının nesneden Request.Form doldurduğu değerleri alır ve bunları daha sonra için değişkenlere yerleştirirsiniz. Request.Form nesnesi, her biri bir anahtar tarafından tanımlanan sayfayla gönderilen tüm değerleri içerir. Anahtar, okumak istediğiniz form alanının özniteliğine eşdeğerdir name . Örneğin, alanını (metin kutusu) okumak companyname için kullanırsınız Request.Form["companyname"].

    Form değerleri nesnede Request.Form dize olarak depolanır. Bu nedenle, bir değerle sayı, tarih veya başka bir tür olarak çalışmanız gerektiğinde, bir dizeden bu türe dönüştürmeniz gerekir. Örnekte, AsIntRequest.Form yöntemi çalışanlar alanının değerini (çalışan sayısını içeren) tamsayıya dönüştürmek için kullanılır.

  2. Sayfayı tarayıcınızda başlatın, form alanlarını doldurun ve Gönder'e tıklayın. Sayfada girdiğiniz değerler görüntülenir.

İpucu

Görünüm ve Güvenlik için HTML Kodlaması

HTML, , >ve &gibi <karakterler için özel kullanımlara sahiptir. Bu özel karakterler beklenmediği bir yerde görünürse, web sayfanızın görünümünü ve işlevselliğini bozabilir. Örneğin, tarayıcı karakteri (boşluk izlemediği sürece) veya <input ...>gibi bir HTML öğesinin başlangıcı olarak <b> yorumlar<. Tarayıcı öğeyi tanımıyorsa, yeniden tanıdığı bir şeye ulaşana kadar ile < başlayan dizeyi atar. Açıkçası, bu sayfada garip bir işlemeye neden olabilir.

HTML kodlaması, bu ayrılmış karakterleri tarayıcıların doğru simge olarak yorumlayan bir kodla değiştirir. Örneğin, < karakteri ile &lt; değiştirilir ve > karakteri ile &gt;değiştirilir. Tarayıcı, bu değiştirme dizelerini görmek istediğiniz karakterler olarak işler.

Bir kullanıcıdan edindiğiniz dizeleri (giriş) her görüntülüyorsanız HTML kodlamasını kullanmak iyi bir fikirdir. Bunu yapmazsanız, bir kullanıcı web sayfanızı kötü amaçlı bir betik çalıştırmaya veya site güvenliğinizi tehlikeye atacak başka bir şey yapmaya çalışabilir veya amaçladığınız şey bu değildir. (Bu özellikle kullanıcı girişi alıp bir yerde depolarsanız ve daha sonra görüntülerseniz (örneğin, blog yorumu, kullanıcı incelemesi veya bunun gibi) önemlidir.)

Bu sorunları önlemeye yardımcı olmak için web sayfalarını ASP.NET, kodunuzdan çıkardığınız metin içeriğini otomatik olarak HTML ile kodlar. Örneğin, gibi @MyVarbir kod kullanarak bir değişkenin veya ifadenin içeriğini görüntülendiğinde ASP.NET Web Sayfaları çıkışı otomatik olarak kodlar.

Kullanıcı Girişini Doğrulama

Kullanıcılar hata yapar. Bir alanı doldurmalarını istiyorsunuz, onlar da bunu unutuyorlar veya çalışan sayısını girmelerini ve bunun yerine bir ad yazmalarını istiyorsunuz. Bir formu işlemeden önce doğru doldurulduğundan emin olmak için kullanıcının girişini doğrularsınız.

Bu yordam, kullanıcının bunları boş bırakmadığından emin olmak için üç form alanının da nasıl doğrulandığını gösterir. Ayrıca, çalışan sayısı değerinin bir sayı olup olmadığını da denetlersiniz. Hatalar varsa, kullanıcıya hangi değerlerin doğrulamayı geçmediğini bildiren bir hata iletisi görüntülersiniz.

  1. Form.cshtml dosyasında ilk kod bloğunu aşağıdaki kodla değiştirin:

    @{
    Validation.RequireField("companyname", "Company name is required.");
    Validation.RequireField("contactname", "Contact name is required.");
    Validation.RequireField("employees", "Employee count is required.");
    Validation.Add("employees", Validator.Integer());

    if (IsPost)  {
        var companyname = Request.Form["companyname"];
        var contactname = Request.Form["contactname"];
        var employeecount = Request.Form["employees"];
        if(Validation.IsValid()){
            <text>
              You entered: <br />
              Company Name: @companyname <br />
              Contact Name: @contactname <br />
              Employee Count: @employeecount <br />
            </text>
        }
    }
}

    Kullanıcı girişini doğrulamak için yardımcıyı Validation kullanırsınız. Çağrısı Validation.RequireFieldyaparak gerekli alanları kaydedersiniz. Doğrulanması gereken alanı ve gerçekleştirilecek doğrulama türünü çağırarak Validation.Add ve belirterek diğer doğrulama türlerini kaydedersiniz.

    Sayfa çalıştığında, tüm doğrulamayı sizin için ASP.NET yapar. Sonuçları, her şey geçirildiyse true, herhangi bir alan doğrulanamadıysa false değerini döndüren öğesini çağırarak Validation.IsValidde kontrol edebilirsiniz. Genellikle, kullanıcı girişi üzerinde herhangi bir işlem yapmadan önce çağrısı Validation.IsValid yaparsınız.

  2. yöntemine <body> aşağıdaki gibi üç çağrı Html.ValidationMessage ekleyerek öğesini güncelleştirin:

    <body>
  <form method="post">
    <fieldset>
      <legend>Add Customer</legend>
      <div>
         <label for="CompanyName">Company Name:</label>
         <input type="text" name="CompanyName" value="" />
         @Html.ValidationMessage("companyname")
      </div>
      <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName" value="" />
         @Html.ValidationMessage("contactname")
      </div>
      <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees" value="" />
         @Html.ValidationMessage("employees")
      </div>
      <div>
         <label>&nbsp;</label>
         <input type="submit" value="Submit" class="submit" />
      </div>
    </fieldset>
  </form>
</body>

    Doğrulama hata iletilerini görüntülemek için Html çağırabilirsiniz.ValidationMessage ve iletinin olmasını istediğiniz alanın adını iletin.

  3. Sayfayı çalıştırın. Alanları boş bırakın ve Gönder'e tıklayın. Hata iletileri görürsünüz.

    Kullanıcı girişi doğrulamayı geçmezse görüntülenen hata iletilerini gösteren ekran görüntüsü.

  4. Çalışan Sayısı alanına bir dize (örneğin, "ABC") ekleyin ve yeniden Gönder'e tıklayın. Bu kez dizenin doğru biçimde (tamsayı) olmadığını belirten bir hata görürsünüz.

    Kullanıcılar Çalışanlar alanına bir dize girerse görüntülenen hata iletilerini gösteren ekran görüntüsü.

ASP.NET Web Sayfaları, kullanıcıların tarayıcıda anında geri bildirim alması için istemci betiğini kullanarak doğrulamayı otomatik olarak gerçekleştirme özelliği de dahil olmak üzere kullanıcı girişini doğrulamaya yönelik daha fazla seçenek sağlar. Daha fazla bilgi için daha sonra Ek Kaynaklar bölümüne bakın.

Geri Gönderme sonrasında Form Değerlerini Geri Yükleme

Önceki bölümdeki sayfayı test ettiğinizde, doğrulama hatasıyla karşılaşırsanız girdiğiniz her şeyin (yalnızca geçersiz veriler değil) gittiğini ve tüm alanlar için değerleri yeniden girmeniz gerektiğini fark etmiş olabilirsiniz. Bu, önemli bir noktayı gösterir: Bir sayfa gönderdiğinizde, işlediğiniz ve sayfayı yeniden işlediğiniz zaman, sayfa sıfırdan yeniden oluşturulur. Gördüğünüz gibi, bu, sayfa gönderildiğinde sayfada bulunan tüm değerlerin kaybolduğu anlamına gelir.

Ancak bunu kolayca düzeltebilirsiniz. Gönderilen değerlere erişiminiz vardır (nesnesinde Request.Form , böylece sayfa işlendiğinde bu değerleri form alanlarına geri doldurabilirsiniz.

  1. Form.cshtml dosyasında, özniteliğini kullanarak value öğelerin özniteliklerini <input> değiştirinvalue.:

    <!DOCTYPE html>
<html>
  <head>
    <title>Customer Form</title>
  </head>
  <body>
    <form method="post">
      <fieldset>
        <legend>Add Customer</legend>
        <div>
          <label for="CompanyName">Company Name:</label>
          <input type="text" name="CompanyName"
                 value="@Request.Form["companyname"]"  />
          @Html.ValidationMessage("companyname")
        </div>
        <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName"
                value="@Request.Form["contactname"]" />
         @Html.ValidationMessage("contactname")
        </div>
        <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees"
                value="@Request.Form["employees"]" />
         @Html.ValidationMessage("employees")
        </div>
        <div>
          <label>&nbsp;</label>
          <input type="submit" value="Submit" class="submit" />
        </div>
    </fieldset>
  </form>
</body>

    value Öğelerin özniteliği<input>, alan değerini nesnenin Request.Form dışına dinamik olarak okuyacak şekilde ayarlanmıştır. Sayfa ilk kez istenildiğinde nesnedeki değerlerin Request.Form tümü boş olur. Form boş olduğundan bu sorun olmaz.

  2. Sayfayı tarayıcınızda başlatın, form alanlarını doldurun veya boş bırakın ve Gönder'e tıklayın. Gönderilen değerleri gösteren bir sayfa görüntülenir.

    formlar-5

Ek Kaynaklar