ASP.NET Web Pages (Razor) sitelerinde HTML formlarıyla çalışmaWorking with HTML Forms in ASP.NET Web Pages (Razor) Sites

Tom FitzMacken tarafındanby Tom FitzMacken

Bu makalede bir ASP.NET Web Pages (Razor) Web sitesinde çalışırken bir HTML formunun (metin kutuları ve düğmeler ile) nasıl işlenmesi açıklanmaktadır.This article describes how to process an HTML form (with text boxes and buttons) when you are working in an ASP.NET Web Pages (Razor) website.

Şunları öğreneceksiniz:What you'll learn:

  • HTML formu oluşturma.How to create an HTML form.
  • Formdan Kullanıcı girişini okuma.How to read user input from the form.
  • Kullanıcı girişini doğrulama.How to validate user input.
  • Sayfa gönderildikten sonra form değerlerini geri yükleme.How to restore form values after the page is submitted.

Makalesinde sunulan ASP.NET programlama kavramları şunlardır:These are the ASP.NET programming concepts introduced in the article:

  • Request nesnesi.The Request object.
  • Giriş doğrulaması.Input validation.
  • HTML kodlaması.HTML encoding.

Öğreticide kullanılan yazılım sürümleriSoftware versions used in the tutorial

  • ASP.NET Web sayfaları (Razor) 3ASP.NET Web Pages (Razor) 3

Bu öğretici, ASP.NET Web Pages 2 ile de kullanılabilir.This tutorial also works with ASP.NET Web Pages 2.

Basit HTML formu oluşturmaCreating a Simple HTML Form

  1. Yeni bir Web sitesi oluşturun.Create a new website.

  2. Kök klasörde, form. cshtml adlı bir Web sayfası oluşturun ve aşağıdaki biçimlendirmeyi girin:In the root folder, create a web page named Form.cshtml and enter the following markup:

    <!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.Launch the page in your browser. (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.(In WebMatrix, in the Files workspace, right-click the file and then select Launch in browser.) A simple form with three input fields and a Submit button is displayed.

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

    Bu noktada Gönder düğmesine tıklarsanız hiçbir şey olmaz.At this point, if you click the Submit button, nothing happens. Formu faydalı hale getirmek için sunucuda çalışacak bir kod eklemeniz gerekir.To make the form useful, you have to add some code that will run on the server.

Formdan Kullanıcı girişi okunuyorReading User Input from the Form

Formu işlemek için, gönderilen alan değerlerini okuyan ve bunlarla bir şey yapan kodu eklersiniz.To process the form, you add code that reads the submitted field values and does something with them. Bu yordam, alanların nasıl okunacağını ve Kullanıcı girişinin sayfada nasıl görüntüleneceğini gösterir.This procedure shows you how to read the fields and display the user input on the page. (Bir üretim uygulamasında genellikle Kullanıcı girişiyle ilgili daha ilgi çekici şeyler olursunuz.(In a production application, you generally do more interesting things with user input. Bu, veritabanlarıyla çalışma hakkında makalesinde yapılır.)You'll do that in the article about working with databases.)

  1. Form. cshtml dosyasının en üstünde aşağıdaki kodu girin:At the top of the Form.cshtml file, enter the following code:

    @{
        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.When the user first requests the page, only the empty form is displayed. Kullanıcı (sizin olur) formu doldurur ve ardından Gönder' i tıklamalıdır.The user (which will be you) fills in the form and then clicks Submit. Bu, Kullanıcı girişini sunucuya gönderir (gönderir).This submits (posts) the user input to the server. Varsayılan olarak, istek aynı sayfaya (yani, form. cshtml) gider.By default, the request goes to the same page (namely, Form.cshtml).

    Sayfayı bu kez gönderdiğinizde, girdiğiniz değerler formun hemen üzerinde görüntülenir:When you submit the page this time, the values you entered are displayed just above the form:

    Sayfada girdiğiniz değerleri gösteren ekran görüntüsü.

    Sayfanın koduna bakın.Look at the code for the page. İlk olarak, bir kullanıcının Gönder düğmesine tıklamadığı bir, sayfanın mi nakledildiğini — öğrenmek için IsPost yöntemini kullanırsınız.You first use the IsPost method to determine whether the page is being posted — that is, whether a user clicked the Submit button. Bu bir gönderise, IsPost true döndürür.If this is a post, IsPost returns true. Bu, ASP.NET Web sayfalarında bir ilk istek (bir GET isteği) veya geri gönderme (POST isteği) ile çalışıp çalışmadığını belirlemede standart bir yoldur.This is the standard way in ASP.NET Web Pages to determine whether you're working with an initial request (a GET request) or a postback (a POST request). (GET ve POST hakkında daha fazla bilgi için, Razor söz dizimini kullanarak ASP.NET Web sayfaları programlamasına girişbölümünde "http get ve post ve ıspost özelliği" başlıklı kenar çubuğuna bakın.)(For more information about GET and POST, see the sidebar "HTTP GET and POST and the IsPost Property" in Introduction to ASP.NET Web Pages Programming Using the Razor Syntax.)

    Ardından, kullanıcının Request.Form nesnesinden doldurduğu değerleri alır ve bunları daha sonra değişkenlere yerleştirebilirsiniz.Next, you get the values that the user filled in from the Request.Form object, and you put them in variables for later. Request.Form nesnesi, her biri bir anahtarla tanımlanan sayfayla gönderilen tüm değerleri içerir.The Request.Form object contains all the values that were submitted with the page, each identified by a key. Anahtar, okumak istediğiniz form alanının name özniteliğine eşdeğerdir.The key is the equivalent to the name attribute of the form field that you want to read. Örneğin, companyname alanını (metin kutusu) okumak için Request.Form["companyname"]kullanırsınız.For example, to read the companyname field (text box), you use Request.Form["companyname"].

    Form değerleri, Request.Form nesnesinde dizeler olarak depolanır.Form values are stored in the Request.Form object as strings. Bu nedenle, bir sayı veya tarih ya da başka bir tür olarak bir değerle çalışmanız gerektiğinde, bir dizeden bu türe dönüştürmeniz gerekir.Therefore, when you have to work with a value as a number or a date or some other type, you have to convert it from a string to that type. Örnekte, Request.Form AsInt yöntemi, çalışanlar alanının (bir çalışan sayısı içeren) değerini bir tamsayıya dönüştürmek için kullanılır.In the example, the AsInt method of the Request.Form is used to convert the value of the employees field (which contains an employee count) to an integer.

  2. Sayfayı tarayıcınızda başlatın, form alanlarını doldurup Gönder' e tıklayın.Launch the page in your browser, fill in the form fields, and click Submit. Sayfada girdiğiniz değerler görüntülenir.The page displays the values you entered.

Tip

Görünüm ve güvenlik için HTML kodlamasıHTML Encoding for Appearance and Security

HTML 'de <, >ve &gibi karakterlerin özel kullanımları vardır.HTML has special uses for characters like <, >, and &. Bu özel karakterler beklenmediği yerlerde görünürse, Web sayfanızın görünümü ve işlevselliği için bir görünüm verebilir.If these special characters appear where they're not expected, they can ruin the appearance and functionality of your web page. Örneğin, tarayıcı, <b> veya <input ...>gibi bir HTML öğesinin başlangıcına kadar < karakterini (bir boşluk değilse) yorumlar.For example, the browser interprets the < character (unless it's followed by a space) as the beginning of an HTML element, like <b> or <input ...>. Tarayıcı öğeyi tanımıyorsa, tekrar tanıdığı bir şeye ulaşana kadar < ile başlayan dizeyi atar.If the browser doesn't recognize the element, it simply discards the string that begins with < until it reaches something that it again recognizes. Kuşkusuz, bu, sayfada bazı tuhaf işlemeye neden olabilir.Obviously, this can result in some weird rendering in the page.

HTML kodlaması, bu ayrılmış karakterlerin, tarayıcıların doğru sembol olarak yorumlayacağı bir kodla yerini alır.HTML encoding replaces these reserved characters with a code that browsers interpret as the correct symbol. Örneğin, < karakteri &lt; ile, > karakteri ise &gt;ile değiştirilmiştir.For example, the < character is replaced with &lt; and the > character is replaced with &gt;. Tarayıcı, bu değiştirme dizelerini görmek istediğiniz karakterler olarak işler.The browser renders these replacement strings as the characters that you want to see.

Bir kullanıcıdan aldığınız dizeleri (giriş) görüntülediğinizde HTML kodlaması kullanmak iyi bir fikirdir.It's a good idea to use HTML encoding any time you display strings (input) that you got from a user. Bunu yapmazsanız, bir Kullanıcı, Web sayfanızı kötü amaçlı bir betik çalıştırmak veya site güvenliğini karşılayan başka bir şey yapmak ya da yalnızca sizin tasarladığınız şeyi yapmak için deneyebilir.If you don't, a user can try to get your web page to run a malicious script or do something else that compromises your site security or that's just not what you intend. (Kullanıcı girişi gerçekleştirmezseniz, bunu bir yerde depolarsanız ve daha — sonra Örneğin, bir blog yorumu, Kullanıcı incelemesi veya bunun gibi bir şey gibi), bu özellikle önemlidir.(This is particularly important if you take user input, store it someplace, and then display it later — for example, as a blog comment, user review, or something like that.)

Bu sorunları önlemeye yardımcı olmak için, ASP.NET Web sayfaları otomatik olarak HTML-kodlarınızdan çıktı aldığınız tüm metin içeriğini kodlar.To help prevent these problems, ASP.NET Web Pages automatically HTML-encodes any text content that you output from your code. Örneğin, @MyVargibi kodu kullanarak bir değişkenin veya ifadenin içeriğini görüntülediğinizde, ASP.NET Web sayfaları çıktıyı otomatik olarak kodlar.For example, when you display the content of a variable or an expression using code such as @MyVar, ASP.NET Web Pages automatically encodes the output.

Kullanıcı girişini doğrulamaValidating User Input

Kullanıcılar hata yapar.Users make mistakes. Bu kullanıcılardan bir alanı doldurmasını ve bunları unutmasını veya çalışanların sayısını girmesini istediğinizi ve bunun yerine bir ad yazmalarını isteyebilirsiniz.You ask them to fill in a field, and they forget to, or you ask them to enter the number of employees and they type a name instead. Bir formun işlem yapılmadan önce doğru şekilde doldurulduğundan emin olmak için, kullanıcının girişini doğrularsınız.To make sure that a form has been filled in correctly before you process it, you validate the user's input.

Bu yordamda, kullanıcının onları boş bırakmaması için üç form alanının tümünün nasıl doğrulanacağı gösterilmektedir.This procedure shows how to validate all three form fields to make sure the user didn't leave them blank. Ayrıca, çalışan sayısı değerinin bir sayı olup olmadığını kontrol edersiniz.You also check that the employee count value is a number. Hatalar varsa, kullanıcıya hangi değerlerin doğrulamadan geçemeyeceğini belirten bir hata iletisi görüntülenir.If there are errors, you'll display an error message that tells the user what values didn't pass validation.

  1. Form. cshtml dosyasında, ilk kod bloğunu aşağıdaki kodla değiştirin:In the Form.cshtml file, replace the first block of code with the following code:

    @{
        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 Validation Yardımcısı ' nı kullanırsınız.To validate user input, you use the Validation helper. Gerekli alanları Validation.RequireFieldçağırarak kaydedersiniz.You register required fields by calling Validation.RequireField. Validation.Add çağırarak ve doğrulanacak alanı ve gerçekleştirilecek doğrulama türünü girerek diğer doğrulama türlerini kaydedersiniz.You register other types of validation by calling Validation.Add and specifying the field to validate and the type of validation to perform.

    Sayfa çalıştırıldığında, ASP.NET tüm doğrulama yapar.When the page runs, ASP.NET does all the validation for you. Validation.IsValidçağırarak sonuçları kontrol edebilirsiniz, her şey başarılı olursa true, herhangi bir alan doğrulamada başarısız olursa false döndürür.You can check the results by calling Validation.IsValid, which returns true if everything passed and false if any field failed validation. Genellikle, Kullanıcı girişinde herhangi bir işlem gerçekleştirmeden önce Validation.IsValid çağırın.Typically, you call Validation.IsValid before you perform any processing on the user input.

  2. Aşağıdaki gibi Html.ValidationMessage yöntemine üç çağrı ekleyerek <body> öğesini güncelleştirin:Update the <body> element by adding three calls to the Html.ValidationMessage method, like this:

    <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östermek için HTML 'yi çağırabilirsiniz.ValidationMessageTo display validation error messages, you can call Html.ValidationMessage ve iletiyi istediğiniz alanın adı olarak geçirin.and pass it the name of the field that you want the message for.

  3. Sayfayı çalıştırın.Run the page. Alanları boş bırakın ve Gönder' e tıklayın.Leave the fields blank and click Submit. Hata iletilerini görürsünüz.You see error messages.

    Kullanıcı girişi doğrulamayı geçemediğinde 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.Add a string (for example, "ABC") to the Employee Count field and click Submit again. Bu kez, dizenin doğru biçimde olmadığını belirten bir hata görürsünüz, yani bir tamsayı.This time you see an error that indicates that the string isn't in the right format, namely, an integer.

    Kullanıcılar çalışanlar alanı için bir dize girirse 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ği kullanılarak otomatik olarak doğrulama gerçekleştirme özelliği de dahil olmak üzere Kullanıcı girişini doğrulamak için daha fazla seçenek sunar.ASP.NET Web Pages provides more options for validating user input, including the ability to automatically perform validation using client script, so that users get immediate feedback in the browser. Daha fazla bilgi için daha sonra ek kaynaklar bölümüne bakın.See the Additional Resources section later for more information.

Geri göndermeler sonrasında form değerlerini geri yüklemeRestoring Form Values After Postbacks

Önceki bölümde yer alan sayfayı sınadıktan sonra, girdiğiniz her şey (yalnızca geçersiz veriler değil) geçmiş olduğunu fark etmiş olabilirsiniz ve tüm alanlar için değerleri yeniden girmeniz gerekiyordu.When you tested the page in the previous section, you might have noticed that if you had a validation error, everything you entered (not just the invalid data) was gone, and you had to re-enter values for all the fields. Bu önemli bir noktayı gösterir: bir sayfa gönderdiğinizde, işlem tamamlandıktan sonra sayfayı yeniden oluşturduktan sonra sayfa sıfırdan yeniden oluşturulur.This illustrates an important point: when you submit a page, process it, and then render the page again, the page is re-created from scratch. Gördüğünüz gibi, bu, gönderildiği sırada sayfadaki tüm değerlerin kaybedildiği anlamına gelir.As you saw, this means that any values that were in the page when it was submitted are lost.

Ancak bunu kolayca çözebilirsiniz.You can fix this easily, however. Gönderilen değerlere erişiminiz vardır (Request.Form nesnesinde, sayfa işlendiğinde bu değerleri form alanlarına geri doldurabilirsiniz.You have access to the values that were submitted (in the Request.Form object, so you can fill those values back into the form fields when the page is rendered.

  1. Form. cshtml dosyasında, value özniteliğini kullanarak <input> öğelerinin value özniteliklerini değiştirin.:In the Form.cshtml file, replace the value attributes of the <input> elements using the value attribute.:

    <!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>
    

    <input> öğelerinin value özniteliği Request.Form nesnesinden alan değerini dinamik olarak okumak üzere ayarlanmıştır.The value attribute of the <input> elements has been set to dynamically read the field value out of the Request.Form object. Sayfa istendiğinde ilk kez Request.Form nesnesindeki değerler boştur.The first time that the page is requested, the values in the Request.Form object are all empty. Bu, formun boş olduğu şekilde bu şekilde iyidir.This is fine, because that way the form is blank.

  2. Sayfayı tarayıcınızda başlatın, form alanlarını doldurup boş bırakın ve Gönder' e tıklayın.Launch the page in your browser, fill in the form fields or leave them blank, and click Submit. Gönderilen değerleri gösteren bir sayfa görüntülenir.A page that shows the submitted values is displayed.

    Formlar-5

Ek KaynaklarAdditional Resources