Thursday, 24 October 2013

How to Create Cascading DropDownList in MVC 4 Razor using JQuery.

Hi Friends, in this article I will explain about How to Create Cascading DropDownList in MVC 4 Razor and JQuery..
DDl.cs Model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc.Html;
using System.Web.Mvc;

namespace MvcCRUD.Models
{
    public class DDL
    {
        public int? Year { get; set; }
        public int? Month { get; set; }

        public IEnumerable<SelectListItem> Years
        {
            get
            {
                return Enumerable.Range(2010, 12).Select(x => new SelectListItem
                {
                    Value = x.ToString(),
                    Text = x.ToString()
                });
            }
        }
      
    }
}

DropDownList Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcCRUD.Models;

namespace MvcCRUD.Controllers
{
    public class DropDownListController : Controller
    {
        public ActionResult Index()
        {
            var model = new DDL();
            return View(model);
        }     
        public ActionResult Months(int year)
        {
            if (year == 2013)
            {
                return Json(
                    Enumerable.Range(1, 10).Select(x => new { value = x, text = x }),
                    JsonRequestBehavior.AllowGet
                );
            }
            return Json(
                Enumerable.Range(1, 12).Select(x => new { value = x, text = x }),
                JsonRequestBehavior.AllowGet
            );
        }
    }
}

Index.cshtml view:
@model MvcCRUD.Models.DDL
<table style="text-align:center;">
<tr>
<td>Year   :</td>
<td>
@Html.DropDownListFor(x => x.Year,
    new SelectList(Model.Years, "Value", "Text"),
    "-- Select --"
)
</td></tr>
<tr>
<td>Month:</td>
<td>
@Html.DropDownListFor(
    x => x.Month,
    Enumerable.Empty<SelectListItem>(),
    "-- Select --"
)
</td></tr>
<tr  ><td colspan="2"><input type="submit" value ="Submit" id="btn"/></td>

</tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type ="text/javascript" ></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Month').prop("disabled", "true");
        $('#btn').click(function () {alert("You Selected Year is" + $('#Year').val() + " and " + "Month is" + $('#Month').val()); });
    });
    $('#Year').change(function () {
        $('#Year').prop("disabled", "true");
        $('#Month').removeAttr('disabled');
        var selectedYear = $(this).val();
        if (selectedYear != null && selectedYear != '') {
            $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
                var monthsSelect = $('#Month');
                monthsSelect.empty();
                $.each(months, function (index, month) {                    
                    monthsSelect.append($('<option/>', {
                        value: month.value,
                        text: month.text                       
                    }));
                });
            });
        }
    });
</script>

The output of the above code as shown in the below figure.
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook pageAspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter  on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on  RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog  for more articles."

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.