Hi Friends, in this article I will explain about How to Create Cascading DropDownList in MVC 4 Razor and JQuery..
I will explain in the previous articles about MVC4 Razor :Routing or Set StartUp page in MVC4 with example,How to use sessions using C# and MVC4 Razor:How to call Stored Procedure using C#.
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