Date Image Saturday, April 3, 2010 | Kategoriler | Asp.Net, MVC, Tümü

MVC 2 Projelerinde Kullanıcının Seçimlerine Göre Data Getirmek(Dropdown List Filtreleme)

   Asp.Net Mvc projeleri geliştirenler genel olarak asp.net kontrollerini kullanmamaktadırlar. Ben de mvc ile asp.net kontrollerinin kullanılmaması gerektiğini savunanlardanım (sürüye uymak da denebilir :P). Asp.net web application projelerinde beni rahatsız eden şeylerden bir tanesi olan sayfaların çıktısında viewstate’in varlığıdır. Bazı durumlarda gerçekten çok işe yarayan bu nesneyi fazlasıyla kullanmaktayım ancak mvc ile bunun ortadan kaldırılabilmesi beni gerçekten çok mutlu ediyor. Konu fazla dağılmadan asıl işleme dönmek istiyorum. Mvc projesinde, kullanıcının seçimlerine göre data getirmek nasıl oluyor ona bakalım.
   Bu noktada kontrol kullanmayacağımız için, bunu sağlayacak bir araca ihtiyacımız var. Bunun için ben her zaman olduğu gibi JQuery’i seçiyorum. Yapmamız gerekenlere bakacak olursak:
Öncelikle bir View oluşturalım. Ben burada Home altındaki Index view ini kullanacağım.

<script type="text/javascript">

        $(document).ready(function () {

            $("#Categories").change(function () {

                $.post("/Home/GetArticles/", { CategoryID: $(this).val() }, function (data) {

                    populateDropdown($("#Articles"), data);

                });

            });

            $("#Articles").change(function () {

                $.post("/Home/GetArticle/", { ArticleID: $(this).val(), CategoryID: $("#Categories").val() }, function (data) {

                    $("#SelectedArticleContainer").html("<b>Seçilen Makale :</b> " + data);

                });

            });

        });

 

        function populateDropdown(select, data) {

            if (data.length > 0) {

                select.html('');

                $.each(data, function (id, option) {

                    select.append($('<option></option>').val(option.value).html(option.name));

                });

                $("#ArticleContainer").css("display", "inline");

                $("#ErrorContainer").css("display", "none");

 

            }

            else {

                $("#ErrorContainer").html("Lütfen <b>Kategori</b> Seçiniz!");

                $("#ErrorContainer").css("display", "inline");

                $("#ArticleContainer").css("display", "none");

                $("#SelectedArticleContainer").html("");

            }

        }

</script>

   HomeController'a ulaşıp dataları almamızı ve göstermemizi sağlayacak olan javascript blogumuzu yazdık.

 

<p id="ErrorContainer" style="display: none; color: Red; padding: 10px; border: solid 1px #fefefe;">

    </p>

    <p>

        <b style="width: 100px;">Kategori:</b><select id="Categories">

            <option value="-1">Kategori Seçiniz..</option>

            <option value="1">Asp.Net</option>

            <option value="2">Entity Framework</option>

            <option value="3">C#</option>

            <option value="4">Mvc</option>

            <option value="5">Silverlight</option>

        </select>

    </p>

    <p style="display: none;" id="ArticleContainer">

        <b style="width: 100px;">Makale:</b><select id="Articles"></select>

    </p>

    <p id="SelectedArticleContainer">

    </p>

   Böylece View'imiz hazır durumda. Şimdi de Controller'ımızı yazalım.

 

#region Results

 

        #region JsonResults

 

        public JsonResult GetArticles(int CategoryID)

        {

            var articles = new object[] { };

 

            if (CategoryID == 1)

            {

                articles = new object[] {

                                        new { value = 1, name = "Birinci Asp.Net Makalesi" },

                                        new { value = 2, name = "İkinci Asp.Net Makalesi" },

                                        new { value = 3, name = "Üçüncü Asp.Net Makalesi" },

                        new { value = 4, name = "Dördüncü Asp.Net Makalesi" },

                        new { value = 5, name = "Beşinci Asp.Net Makalesi" }

                                  };

            }

            else if (CategoryID == 2)

            {

                articles = new object[] {

                                        new { value = 1, name = "Birinci Entity Framework Makalesi" },

                                        new { value = 2, name = "İkinci Entity Framework Makalesi" },

                                        new { value = 3, name = "Üçüncü Entity Framework Makalesi" },

                        new { value = 4, name = "Dördüncü Entity Framework Makalesi" },

                        new { value = 5, name = "Beşinci Entity Framework Makalesi" }

                                  };

            }

            else if (CategoryID == 3)

            {

                articles = new object[] {

                                        new { value = 1, name = "Birinci C# Makalesi" },

                                        new { value = 2, name = "İkinci C# Makalesi" },

                                        new { value = 3, name = "Üçüncü C# Makalesi" },

                        new { value = 4, name = "Dördüncü C# Makalesi" },

                        new { value = 5, name = "Beşinci C# Makalesi" }

                                  };

            }

            else if (CategoryID == 4)

            {

                articles = new object[] {

                                        new { value = 1, name = "Birinci Mvc Makalesi" },

                                        new { value = 2, name = "İkinci Mvc Makalesi" },

                                        new { value = 3, name = "Üçüncü Mvc Makalesi" },

                        new { value = 4, name = "Dördüncü Mvc Makalesi" },

                        new { value = 5, name = "Beşinci Mvc Makalesi" }

                                  };

            }

            else if (CategoryID == 4)

            {

                articles = new object[] {

                                        new { value = 1, name = "Birinci Silverlight Makalesi" },

                                        new { value = 2, name = "İkinci Silverlight Makalesi" },

                                        new { value = 3, name = "Üçüncü Silverlight Makalesi" },

                        new { value = 4, name = "Dördüncü Silverlight Makalesi" },

                        new { value = 5, name = "Beşinci Silverlight Makalesi" }

                                  };

            }

 

            return Json(articles);

        }

 

        public JsonResult GetArticle(int ArticleID, int CategoryID)

        {

            string article = "";

 

            if (CategoryID == 1)

            {

                switch (ArticleID)

                {

                    case 1: article = "Birinci Asp.Net Makalesi";

                        break;

                    case 2: article = "İkinci Asp.Net Makalesi";

                        break;

                    case 3: article = "Üçüncü Asp.Net Makalesi";

                        break;

                    case 4: article = "Dördüncü Asp.Net Makalesi";

                        break;

                    case 5: article = "Beşinci Asp.Net Makalesi";

                        break;

                    default: article = "";

                        break;

                }

 

            }

            else if (CategoryID == 2)

            {

                switch (ArticleID)

                {

                    case 1: article = "Birinci Entity Framework Makalesi";

                        break;

                    case 2: article = "İkinci Entity Framework Makalesi";

                        break;

                    case 3: article = "Üçüncü Entity Framework Makalesi";

                        break;

                    case 4: article = "Dördüncü Entity Framework Makalesi";

                        break;

                    case 5: article = "Beşinci Entity Framework Makalesi";

                        break;

                    default: article = "";

                        break;

                }

            }

            else if (CategoryID == 3)

            {

                switch (ArticleID)

                {

                    case 1: article = "Birinci Entity Framework Makalesi";

                        break;

                    case 2: article = "İkinci Entity Framework Makalesi";

                        break;

                    case 3: article = "Üçüncü Entity Framework Makalesi";

                        break;

                    case 4: article = "Dördüncü Entity Framework Makalesi";

                        break;

                    case 5: article = "Beşinci Entity Framework Makalesi";

                        break;

                    default: article = "";

                        break;

                }

            }

            else if (CategoryID == 4)

            {

                switch (ArticleID)

                {

                    case 1: article = "Birinci Entity Framework Makalesi";

                        break;

                    case 2: article = "İkinci Entity Framework Makalesi";

                        break;

                    case 3: article = "Üçüncü Entity Framework Makalesi";

                        break;

                    case 4: article = "Dördüncü Entity Framework Makalesi";

                        break;

                    case 5: article = "Beşinci Entity Framework Makalesi";

                        break;

                    default: article = "";

                        break;

                }

            }

            else if (CategoryID == 4)

            {

                switch (ArticleID)

                {

                    case 1: article = "Birinci Entity Framework Makalesi";

                        break;

                    case 2: article = "İkinci Entity Framework Makalesi";

                        break;

                    case 3: article = "Üçüncü Entity Framework Makalesi";

                        break;

                    case 4: article = "Dördüncü Entity Framework Makalesi";

                        break;

                    case 5: article = "Beşinci Entity Framework Makalesi";

                        break;

                    default: article="";

                        break;

                }

            }

 

            return Json(article);

        }

 

        #endregion

 

#endregion

 

    Son olarak, HomeController'ımıza da JSon data döndürecek olan Result'larımızı yazdık, burada kullandığımız datalar sadece örnek içindir. Gerçek bir projede tabiki bunlar veri tabanından çekileceği için data sade bir kod bloğu oluşacaktır. Burdaki gibi karmaşık kontroller olmayacaktır. Sonuç olarak bu şekilde ilk dropdowndan kategoriyi seçtikten sonra Controller'ımıza post edilecek ve kategoriye uyan makaleler diğer dropdowna bind edilecek. Sonrasında seçilen makale de alt satırda yazı olarak gelecek. Bir de kontrolümüz vardı; Bir kategori seçmemiş ise uyarı verdik.

 

 

MVC 2 Projelerinde Kullanıcının Seçimlerine Göre Data Getirmek(Dropdown List Filtreleme)      MVC 2 Projelerinde Kullanıcının Seçimlerine Göre Data Getirmek(Dropdown List Filtreleme)

 

 MVC 2 Projelerinde Kullanıcının Seçimlerine Göre Data Getirmek(Dropdown List Filtreleme)     MVC 2 Projelerinde Kullanıcının Seçimlerine Göre Data Getirmek(Dropdown List Filtreleme)

  

 Örnek Uygulama

 

 

 

Etiketler : Asp.Net , MVC2 , JQuery , Json , Filtreleme