ASP.NET Web Sayfaları (Razor) Sitelerinde HTML Formlarıyla Çalışma
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
Yeni bir web sitesi oluşturun.
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> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body> </html>
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.
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.)
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:
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ız
IsPost
. Bu bir gönderiyse trueIsPost
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ğerdirname
. Örneğin, alanını (metin kutusu) okumakcompanyname
için kullanırsınızRequest.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,AsInt
Request.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.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 <
değiştirilir ve >
karakteri ile >
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 @MyVar
bir 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.
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.RequireField
yaparak gerekli alanları kaydedersiniz. Doğrulanması gereken alanı ve gerçekleştirilecek doğrulama türünü çağırarakValidation.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.IsValid
de kontrol edebilirsiniz. Genellikle, kullanıcı girişi üzerinde herhangi bir işlem yapmadan önce çağrısıValidation.IsValid
yaparsınız.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> </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.Sayfayı çalıştırın. Alanları boş bırakın ve Gönder'e tıklayın. Hata iletileri görürsünüz.
Ç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.
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.
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> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body>
value
Öğelerin özniteliği<input>
, alan değerini nesneninRequest.Form
dışına dinamik olarak okuyacak şekilde ayarlanmıştır. Sayfa ilk kez istenildiğinde nesnedeki değerlerinRequest.Form
tümü boş olur. Form boş olduğundan bu sorun olmaz.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.
Ek Kaynaklar
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin