ASP.NET MVC 3 Razor İpucu 1 – DropDownList’ten Selected Change Anında Action Çağırma


asp-net-MVC3 Merhaba MVC Severler, “ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizi”sine devam ediyorum. Aynı zamanda aklıma geldikçe ipuçları paylaşacağım sizlerle. Biliyorsunuz MVC’de Server kontrolleri yok dolayısıyla post back mekanizması da yok. Bu yüzden DropDownList kullanacağımız zaman DropDownList’ten seçili olan öğeyi değiştirdiğinizde arkada çalışacak herhangi bir event bulunmamaktadır.

Senaryo

DropDownList’e (Select List) şehirlerimi ekledim ve şehir seçimi değiştiği anda Home Controller içerisindeki City Action’ına parametre olarak şehir id’sini yollasın. Çözüm

Yöntem 1: İmdatımıza javascript kodları eventleri yetişiyor. Burada “ddlSehirleri” bir form içerisinde alıyoruz ve change anında içerisinde olduğu formu tetikletmek: HomeController.cs

        public ActionResult City(string ddlSehirler)
        {
            List<Sehir> sehirler = new List<Sehir>();

            sehirler.Add(new Sehir() { sehirID = 1, sehirAdi = "Adana" });
            sehirler.Add(new Sehir() { sehirID = 6, sehirAdi = "Ankara" });
            sehirler.Add(new Sehir() { sehirID = 34, sehirAdi = "İstanbul" });
            sehirler.Add(new Sehir() { sehirID = 35, sehirAdi = "İzmir" });
            int sehirID = int.Parse(ddlSehirler);
            ViewBag.Sehir = sehirler.Where(x=>x.sehirID==sehirID).FirstOrDefault().sehirAdi;
            return View();
        }

Sonuç: Yöntem2:

    <script type="text/javascript">

        $(document).ready(function () {

            $("#ddlSehirler").change(function () {
                var donen = $("#ddlSehirler").val();

                window.location.href = "/City/"+ donen;

            });

        });

    </script>
global.asax'ta yeni Route tanımlama:

            routes.MapRoute(
    "cityRoute",
    "city/{id}",
    new { controller = "Home", action = "City", id = 0 }
    );

Burada dikkat etmemiz gereken, eğer onchange anında yazarsak, controller içerisine parametre olarak göndermemiz için actionresult içerisinde de dropdownlist’in adında bir parametre almalıdır. Eğer jQuery ile yaparsak route tanımlayıp istediğimiz parametre yollayabiliriz.

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

Sonraki yazılarımda görüşmek üzere, MVC ile kalın.

, , ,

  1. #1 by Ali on February 22, 2012 - 5:44 pm

    MVC 3 le ilgili bir sorum olacak; forumlarda da oldukca yaygın bir problem olmasına rağmen hiçbir çözüm işe yaramadı. DropdownlistFor yada Dropdownlist elementini selectlist üzerinden populate ederken selectedvalue hiçbir şekilde set edilmiyor.

    //Model class
    [Display(Name = “Ülke”)]
    public string SelectedCountryId { get; set; }
    public Dictionary Countries
    {
    get
    {
    Dictionary clist = new Dictionary();
    clist.Add(“33”, “Fransa”);
    clist.Add(“90”, “Türkiye”);

    return clist;
    //return Parameters.Current.Countries;
    }
    }

    //View

    @Html.LabelFor(model => model.SelectedCountryId)

    @Html.DropDownListFor(model=>model.SelectedCountryId,
    new SelectList(Model.Countries, “Key”, “Value”, Model.SelectedCountryId),
    “seçiniz”)

    @Html.ValidationMessageFor(m => m.SelectedCountryId, “*”)

    • #2 by Mahmut Can Sözeri on February 23, 2012 - 12:26 am

      Merhaba,

      Key ve Value verdiğiniz yerlere bu değerlere karşılık gelecek öğeleri yazmalısınız. Örnek kullanım:

      Controller İçerisi:
      var kategoriler = db.Categories.OrderBy(x => x.name).AsEnumerable().Select(x => new SelectListItem
      {
      Text = x.name,
      Value = x.ID.ToString(),

      });
      ViewBag.Deneme = kategoriler;

      cshtml İçeriği:
      @Html.DropDownList("deneme")

      Bu kod işinizi görecektir.

      İyi günler

      • #3 by Ali on February 23, 2012 - 2:51 am

        Göndermiş olduğunuz kod dropdownlist’in populate edilmesini sağlıyor. Problem, dropdownlist populate olduktan sonra modeldeki property’nin selected value olarak set edilmesinde.

        //Controller
        var clist = db.Parameters
        .Where(p => p.type == “CNTRY”)
        .OrderBy(x => x.ptext)
        .AsEnumerable()
        .Select(x => new SelectListItem
        {
        Value = x.pvalue,
        Text = x.ptext
        });
        ViewBag.CountryId = clist;
        //cshtml
        @Html.DropDownList(“CountryId”,”please select..”)

        //oluşan html
        please select..
        Fransa
        Türkiye

      • #4 by Mahmut Can Sözeri on February 24, 2012 - 9:53 pm

        Biraz daha ayrıntı verir misiniz? Ayrıca kullandığınız senaryoyu ve tam olarak ne yapmak istediğini söylerseniz daha iyi yardımcı olabileceğim.

  2. #5 by ali on February 27, 2012 - 12:35 am

    Merhaba, oncelikle caba gosterdiginiz icin tesekkur ederim. Yapmak istedigi sey klasik bir
    uye kayit ekrani. Account modeli uzerinde register ve edit olmak uzere 2
    adet view var. Register adiminda hesaba ait adres bilgilerini kayitliyorum, edit
    view da ise bu adres bilgilerinin ekrana secili gelmesini saglamak istiyorum. Sehir ve ulke bilgilerini dropdownliste aldigimda kullanicinin daha once secmis oldugu degerler selected olarak gelmiyor listeye. Ulke ve sehir bilgilerini parametre tablosunda tutuyorum, controller action methodunda selectlist olarak bind edip view’e gonderiyorum. her durumda
    benim atamis oldugum selected value yerine listedeki ilk deger
    secili geliyor dropdownliste. extension method yada farkli naming kullanmak bir cozum
    saglamadi. mvc 4 de bu problem giderilmis olabilir die onu da denedim AMA
    sonuc degismedi.

  3. #6 by powered on July 4, 2013 - 7:45 am

    Selam,
    peki bunu Current Uri değişimi olmadan yapabilir miyiz? Yani tek sayfa içerisinde? Şehir seçilicek sonra ilçe . ilçe seçildikten sonra ilçe hakkında 2 tane bilgi yazdırılıcak? Bu konudaki yardımlarınız için minnettar olurum. Teşekkürler.

  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