ASPNET MVC DropDownList Doldurma Yöntemleri

Sıklıkla bana sorulan sorulardan anladığım kadarıyla ASPNET MVC de DropDownList doldurma ile ilgili çok fazla problem yaşanıyor. Aslında problem yaşanacak bir durum ortada bulunmuyor. Sadece biraz pratik eksikliği ve bilgi eksikliği buna sebep oluyor diyebiliriz. Bu yazı da bu yaşanan problemleri gidermeye çalışıyor olacağım.

DropDownList’i 3 yöntemle doldurma ve kullanmayı örnekliyor olacağım. Peki bunlar nedir?

  • ViewBag ile DropDownList doldurma ve verileri alma
  • Model ile DropDownList doldurma ve verileri alma
  • Model ve JQuery ile Bağlantılı DropDownList doldurma ve verileri alma

Genel olarak örnek proje hakkında kısa bilgi vermek istiyorum.

Amacımız

Amacımız Ülkeleri(Country) ve şehirleri(City) ayrı DropDownList’lerde göstermek. Bunun için Country ve City isimli iki sınıf oluşturdum. Bu sınıflar içinde static birer metot tanımladım. Bu metot da örnek City ve Country listesi oluşturuyorum. Böylece denemelerimiz de kullanacağımız veriyi bizim için oluşturacaktır.

DBContext isimli bir class ekledim. Bu class sanki bizim veritabanı nesnemiz gibi davranacak ve içerisinde bulunan iki değişkene örnek verileri Country ve City class’larındaki metotları(yukarıda bahsettiğim) kullanarak bize istediğimiz de veriyi sunacaktır. Bu property’ler CitiesTable ve CountryTable dır.

Sayfamız da iki adet DropDownList olacak ve bunları sayfanın GET action’ında yukarıda bahsettiğim yöntemlerle dolduruyor olacağız. POST action’ında ise seçilen değerleri alıyor ve tekrar aynı sayfanın altında bulunan bir boostrap alert kutusunda gösteriyor olacağız. Index sayfamızın model’i IndexViewModel isimli bir class’dır. Bu class ‘da sayfanın GET action’ında seçili değerlerin gelmesi veya sayfanın POSt işleminde seçilen değerleri alabilmemiz için iki property bulunmaktadır. Seçili Country yi almak için SelectedCountryId ve seçili City yi almak için SelectedCityId property leri bulunmaktadır. Tabi seçilen city ve country verisinin Id değerini alıyor olacağız.

ViewBag ile DropDownList Doldurma ve Verileri Alma

drop-down-list-viewbag-sample

Aşağıdaki kodlarda gerekli açıklamaları yazdım. Kısaca Index ‘in GET action ‘ında ViewBag’lere gerekli SelectList’leri ekliyoruz. Index sayfasında ise DropDownListFor ile sayfanın model’ine DropDownListFor kullanarak DropDownList’leri bağlıyor ve ViewBag’den verilerini yüklüyoruz. Düğmeye basıp POST işleminde değerleri alarak yine aynı sayfayı yüklüyor ve seçili değeleri alert kutusunda gösteriyoruz.

kmb-udemy-reklam

“ASPNET MVC DropDownList Doldurma Yöntemleri” yazısını okumaya devam et

Reklamlar

ASPNET MVC Projeleriniz için Material Checkbox

Projelerimiz de her ne kadar Bootstrap kullanıyor ve kendimi tatmin edecek seviye de hoş tasarımlar yaparak istediğim görsellere ulaşsam da checkbox’ların çok sıradan bir görsellikte olması gözüme bir düzensizlik olduğunu hissettiriyor ve bununla ilgili başka yazılarımda da, farklı çözümler sunmaya çalıştım.

Projelerinizde daha şık material tasarımlı checkbox kullanmak isterseniz aşağıdaki kodlardan faydalanabilirsiniz. Aşağıdaki görselde göreceğiniz şekilde bir görsellik oluşacaktır. Ayrıca biraz daha kod yazarak, klavye desteği ve farklı kontrol’e bağımlı kılarak diğer kontrolün aktifleştirilmesi/pasifleştirilmesi(disabled) sağlanabiliyor.

material-checkbox-in-mvc

kmb-udemy-reklam

“ASPNET MVC Projeleriniz için Material Checkbox” yazısını okumaya devam et

RadioButtonList Sample With JQuery

HTML, Javascript Code
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <meta charset="utf-8" />
    <title>Radio List Sample</title>
    <style>
        #frame-list
        {
            padding: 5px;
        }
        .frame
        {
            border: 1px solid silver;
            padding: 8px;
            margin-bottom: 3px;
        }
        .inner-frame
        {
            border: 1px solid lightgray;
            padding: 8px;
        }
        .result
        {
            width: 100%;
            height: 25px;
            text-align: right;
        }
        #result
        {
            width: 250px;
            margin-right: 10px;
        }
    </style>
    <script>
        $(document).ready(
  function () {

      var radio_inputs = $(".inner-frame input:radio");
      var result = $("#result");

      $(".inner-frame input").click(function () {
          result.text($(radio_inputs).index($(this)) + 1);
      });

      $(".inner-frame").each(function () {
          var radio = $(this).find("input:radio");

          $(this).click(function () {
              radio.attr("checked", "checked");
              result.text($(radio_inputs).index(radio) + 1);
          });
      });

      $(".inner-frame").hover(
      function () {

          $(this).css({
              "background-color": "silver",
              "border-color": "gray"
          });

          var sp = $(this).find("span");

          sp.animate({
              "margin-left": "20px"
          }, 300,
          function () {
              sp.css("color", "white");
          });

      },
      function () {

          $(this).css({
              "border-color": "silver"
          });

          var sp = $(this).find("span");

          sp.animate({
              "margin-left": "0px"
          }, 300,
          function () {
              sp.css("color", "black");
              sp.parent().css("background-color", "white");
          });

      }
    );

  });
</script>
</head>
<body>
    <div class="result">
        <span id="result">Kay?t bulunamad?.</span>
    </div>
    <div id="frame-list">
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 1</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 2</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 3</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 4</span>
            </div>
        </div>
    </div>
</body>
</html>