ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 15 – HTML Form İçerisindeki Öğelere Erişim, FormCollection, HTML.BeginForm


asp-net-MVC3

Merhaba MVC Severler,

Önceki yazımda Razor’un kullanımı ile ilgili Implict, Explicit Code Expression ve Web Forms ile Razor arasındaki kullanım farklılıkları hakkında bahsettim. Bu yazımda bir HTML Form’u içerisindeki kontrollerden -TextBox, ComboBox, DropDownList gibi- değerleri nasıl alınır. FormColletion sınıfı nedir? Hangi amaçla kullanılmaktadır? Bu konular hakkında örnekler yapacağız.

Hazırlık

Uygulamamızı Visual Studio 2010 Ultimate sürümünde ASP.NET MVC 3 Empty Template üzerinde yapacağız.

Giriş

HTML.Helper’larının kullanımını bu yazımda detaylı olarak anlattım. Bildiğimiz üzere, ASP.NET MVC içerisinde herhangi bir server/asp.net kontrolü bulunmamaktadır. Event bulunmadığı için klasik ASP.NET’te olduğu gibi Button’un Click Event’i, DropDownList’in SelectedIndexChange gibi Event’ler yoktur. Bizim kullanabildiğimiz tüm kontroller HTML kontrolleridir -istisna dışında. Peki o zaman biz txtIsim.Text diyerek bir TextBox’ın text değerini okuyamayacağız, bunun yerine hangi yolla kullanıcıdan aldığımız bilgilere erişebileceğiz? Bir TextBox’ın Text’ini, DropDownList’ın SelectedIndex’ini, CheckBox’ın Checked olma durumunu nasıl alacağız? O zaman hadi bu sorulara cevap bulalım…

Not: Her yazımda olduğu gibi MVC diye belirttiğim yerlerde ASP.NET MVC 3’tür.

Uygulama

Formların submit olma durumunda işlem yapmaları içinASP.NET’te sayfaları, ASP.NET MVC’de metotları çağırırız. ASP.NET’ içerisinde runat=”server” attribute’une sahip normal şartlarda bir adet form bulunabilirken, ASP.NET MVC içerisinde birden fazla form bulunabilir çünkü tüm form’lar HTML formudur.

MVC içerisinde form oluştururken using ifadesi ile birlikte Html.BeginForm diye belirtiyoruz.

        @using (Html.BeginForm())
        {
            @* Burada html kontrolleriniz ve diğer elementler *@
        }

Form içerisine bir adet TextBox, Password, RadioButton, DropDownList ve CheckBox ekliyoruz.

HTML Girdi:

@{
    Layout = null;

}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <style type="text/css">
        .lbl
        {
            text-align: right;
        }
    </style>
</head>
<body>
    <div>
        @{
            string[] sehirler = new string[] { "Ankara", "İstanbul", "İzmir" };
            ViewBag.ddlSehirler = new SelectList(sehirler);
        }
        @using (Html.BeginForm())
        {
            <table>
                <tr>
                    <td class="lbl">
                        İsim Soyisim:
                    </td>
                    <td>
                        @Html.TextBox("txtIsim")
                    </td>
                </tr>
                <tr>
                    <td class="lbl">
                        Şifre:
                    </td>
                    <td>
                        @Html.Password("txtSifre")
                    </td>
                </tr>
                <tr>
                    <td class="lbl">
                        Cinsiyet:
                    </td>
                    <td>
                        @Html.RadioButton("radioButtonCinsiyet", "Erkek") Erkek | @Html.RadioButton("radioButtonCinsiyet", "Kadın")
                        Kadın
                    </td>
                </tr>
                <tr>
                    <td class="lbl">
                        Şehir:
                    </td>
                    <td>
                        @Html.DropDownList("ddlSehirler")
                    </td>
                </tr>
                <tr>
                    <td class="lbl">
                        Email Almak İstiyor Musunuz?
                    </td>
                    <td>
                        @Html.CheckBox("cboxEmail", true)
                    </td>
                </tr>
            </table>
        }
    </div>
</body>
</html>

HTML Çıktısı:

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <style type="text/css">
        .lbl
        {
            text-align: right;
        }
    </style>
</head>
<body>
    <div>
<form action="/" method="post">            <table>
                <tr>
                    <td>
                        İsim Soyisim:
                    </td>
                    <td>
                        <input id="txtIsim" name="txtIsim" type="text" value="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Şifre:
                    </td>
                    <td>
                        <input id="txtSifre" name="txtSifre" type="password" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Cinsiyet:
                    </td>
                    <td>
                        <input id="radioButtonCinsiyet" name="radioButtonCinsiyet" type="radio" value="Erkek" /> Erkek | <input id="radioButtonCinsiyet" name="radioButtonCinsiyet" type="radio" value="Kadın" />
                        Kadın
                    </td>
                </tr>
                <tr>
                    <td>
                        Şehir:
                    </td>
                    <td>
                        <select id="ddlSehirler" name="ddlSehirler"><option>Ankara</option>
<option>İstanbul</option>
<option>İzmir</option>
</select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Email Almak İstiyor Musunuz?
                    </td>
                    <td>
                        <input checked="checked" id="cboxEmail" name="cboxEmail" type="checkbox" value="true" /><input name="cboxEmail" type="hidden" value="false" />
                    </td>
                </tr>
            </table>
</form>    </div>
</body>
</html>

Ekran Çıktısı:

Öncelikli olarak burada olanları bir inceleyim. Bizim tüm kontrollerimiz input oldular ve sadece type’ları değişiklik gösterdi. Fakat dikkatinizi çektiğine eminim, checkbox için iki adet oluşturuldu. Bunun nedeni,  tarayıcının checkbox’ın sadece selected olma durumunda değeri submit etmesini sağlamak için iki input element render eder. Ayrıca bu checkbox’ın birisi selected true iken diğeri selected false’dur.

HomeController içerisindeki yapıyı inceleyecek olursak:

HttpGet: Sayfayı çağırdığınız anda tetiklenmesini sağlayan attribute’tür.

HttpPost: Sayfayı post ettiğimizde tetiklenmesini sağlayan attribute’tür.

Fakat dikkat etmemiz gereken çok önemli bir nokta var. HttpPost ve HttpGet özellikleri Run-Time’da etkisi göstermektedir. Bu yüzden Index() diye belirttiğinizde attribute’leri farklı olsada sonuçta metot oldukları için parametreleri farklı olmalıdır. Yani overload olabilmelidir.

HttpPost attribute’üne sahip olan Index metotunu aşağıdaki gibi değiştirelim:

        [HttpPost]
        public ActionResult Index(string txtIsim, string txtSifre)
        {
            return View();
        }

Yukarıdaki parametrelere baktığımızda formun içerisinde kullandığımız TextBox’lara verdiğimiz ID’ler olduğunu göreceğiz.

Form içerisine aşağıdaki gibi bilgileri giriyoruz:

Controller içerisindeki Index metotuna bakıyoruz:

Break Point koyup Watch penceresinden parametrelerin değerlerine baktığımız zaman, MVC tarafından verdiğimiz değişken isimlerine karşılık , form içerisinde ID’ye sahip TextBox’ların değerleri geldi. Ek olarak herhangi bir şey yapmadık. Peki ya DropDownList, CheckBox, RadioButton’un değerlerini nasıl alabiliriz?

Form içerisine aşağıdaki gibi bilgileri giriyoruz:

Controller içerisindeki Index metotuna bakıyoruz:

Gördüğümüz gibi, TextBox’ların Text özelliklerini, CheckBox’ın Selected özelliğini, DropDownList’in SelectedValue özelliğini, RadioButton’un Value özelliğini kendimiz alabiliyoruz. Peki sayfamızda 10 adet kontrol olsa hepsi için mi bu şekilde yapacağız?

Bunun için FormColletion sınıfını kullacağız. HomeController içerisindeki aşağıdaki gibi değiştirelim:

        [HttpPost]
        public ActionResult Index(FormCollection fc)
        {
            return View();
        }

Form içerisine aşağıdaki gibi bilgileri giriyoruz:

Controller içerisindeki Index metotuna bakıyoruz:

FormCollection içerisinde int olarak değer vererek ya da string olarak kontrollerin ID’lerini vererekde ulaşabiliriz.

CheckBox kontrolünden değeri almaya çalıştığımız zaman, true ve false döndüğünü görüyoruz. Burada iki adet CheckBox’ın olduğunu hatırlayalım. Burada biz değeri okumak için string metotlarından birisi olan Split’i kullandık ve 0.indexteki değerini okuduk. Bu değer zaten bizim istediğimiz değerdir.

Yollanan değerleri almanın bir yolu daha vardır fakat bu kullanımı Model Binding anlatırken göstereceğim.

İndirme

Uygulamayı bu linkten indirebilirsiniz.

Umarım faydalı bir yazı olmuştur.

İyi çalışmalar

MVC ile kalın.

, , , , , ,

  1. #1 by Gk on November 20, 2013 - 5:11 pm

    Çok çok yararlı bir yazı olmuş, teşekkürler…

  2. #3 by muhammedid on October 27, 2014 - 3:17 pm

    tüm makaleler için teşekkürler🙂

  3. #5 by MVCaylak on December 2, 2014 - 8:59 am

    BeginForm – Controller ilişkisini çok güzel anlatmışsınız. Çok yardımcı oldu. Teşekkürler.

  4. #7 by emrullah on February 2, 2015 - 10:46 am

    teşekkürler🙂

  5. #8 by Orhan on July 30, 2015 - 11:04 am

    Teşekkürler.O kadar forum gezdim aradığım asıl anlatım bu işte.

    • #9 by Mahmut Can Sozeri on July 30, 2015 - 11:08 am

      Faydalı olmasına sevindim teşekkür ediyorum. İyi çalışmalar.

  6. #10 by hazel on August 11, 2015 - 5:13 pm

    Peki bu noktada controller da aldığımız view değerlerini başka bir değişkene aktarıp , üzerinde işlem yapıp view e gönderebilir miyiz…(eğer yapabiliyorsak küçük bir örnek verirseniz çok sevinirim) Bir nokta daha var siz girilen değerleri watch da gösteriyorsunuz ve bu “yolla” butonunu tıkladıktan sonra mı oluyor. O detay yüzünden mi bilmiyorum ama ben aynısını uyguluyorum ama bu şekilde göremiyorum.

  7. #12 by İlhan Sağlık on May 9, 2016 - 9:54 am

    Hocam yazınız çok güzel emeğinize sağlık fakat bir sorum olacak biz bu beginform dan iki tane kullanabilirmiyiz
    benim UrunDetay sayfamda sepete ekle bölümüm var ve ilk beginform um o action an nesne içeriklerini gönderiyor birde yorum eklemek istiyorum diğer beginform u da o amaçla kullnabilirmiyim

  1. ASP.NET MVC Archived Buzz, Page 1
  2. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) « Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s