Menu

Dropdown cascading in mvc 3

Hello Friend,

Here we have gave demo for Dropdown cascading in mvc 3. Using following step.

Download source code => Dropdowncasceding.rar

Step 1 First create model One for Country and Second for State like below.

Country.cs


namespace DropdownCascading.Models
{
public class MdlCountry
{
public MdlCountry()
{

}
#region Property
public int CountryId { get; set; }
public int StateId { get; set; }
public IList<SelectListItem> lstCountryList = new List<SelectListItem>();
public IList<SelectListItem> lstStateList = new List<SelectListItem>();
#endregion
}
}

Here we have create property lstCountryList for bind country list and lstStateList for bind state list.
State.cs

namespace DropdownCascading.Models
{
public class MdlState
{
public MdlState()
{
}
#region Property
public int StateId { get; set; }
public int CountryId { get; set; }
public string StateName { get; set; }
#endregion
}
}

Step 2 Create controller

Casceding.cs

namespace DropdownCascading.Controllers
{
public class CascedingController : Controller
{
//
// GET: /Casceding/

public ActionResult Index()
{
var model = new MdlCountry();

//Bind Country List
model.lstCountryList = CountryBinding();

//Bind State List
model.lstStateList = SateBinding();
return View(model);
}

//Call this method to jquery on dropdown change event.
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetState(int countryId)
{
var model = SateBinding(countryId);
return Json(model, JsonRequestBehavior.AllowGet);
}

//Pass country id and get state list
public IList<SelectListItem> SateBinding(int countryId = 0)
{
var statlist = StateList().Where(i => i.CountryId == countryId).ToList();
var model = statlist.Select(
c => new SelectListItem
{
Value = c.StateId.ToString(),
Text = c.StateName
}
).OrderBy(m => m.Text).ToList();
model.Insert(0, new SelectListItem { Text = "Select State", Value = "0" });
return model;
}

//Bind State list
public IList<MdlState> StateList()
{
IList<MdlState> objStateList = new List<MdlState>();
objStateList.Add(new MdlState { StateId = 1, StateName = "Delhi", CountryId = 1 });
objStateList.Add(new MdlState { StateId = 2, StateName = "Gujrat", CountryId = 1 });
objStateList.Add(new MdlState { StateId = 3, StateName = "Uttar Pradesh", CountryId = 1 });

objStateList.Add(new MdlState { StateId = 1, StateName = "Balochistan", CountryId = 2 });
objStateList.Add(new MdlState { StateId = 2, StateName = "Punjab", CountryId = 2 });
objStateList.Add(new MdlState { StateId = 3, StateName = "Sindh", CountryId = 2 });

objStateList.Add(new MdlState { StateId = 1, StateName = "Alabama", CountryId = 3 });
objStateList.Add(new MdlState { StateId = 2, StateName = "Georgia", CountryId = 3 });
objStateList.Add(new MdlState { StateId = 3, StateName = "Kansas", CountryId = 3 });

objStateList.Add(new MdlState { StateId = 1, StateName = "London", CountryId = 4 });
objStateList.Add(new MdlState { StateId = 2, StateName = "Surrey", CountryId = 4 });
objStateList.Add(new MdlState { StateId = 3, StateName = "Torbay", CountryId = 4 });
return objStateList;
}

//Bind country list
public IList<SelectListItem> CountryBinding()
{
IList<SelectListItem> lstCountryList = new List<SelectListItem>();
lstCountryList.Insert(0, new SelectListItem { Text = "Select Country", Value = "0" });
lstCountryList.Add(new SelectListItem { Text = "India", Value = "1" });
lstCountryList.Add(new SelectListItem { Text = "Pakistan", Value = "2" });
lstCountryList.Add(new SelectListItem { Text = "US", Value = "3" });
lstCountryList.Add(new SelectListItem { Text = "UK", Value = "4" });
return lstCountryList;
}
}
}

Step 3 Create view

Index.cshtml


@model DropdownCascading.Models.MdlCountry
@{
ViewBag.Title = "Drop Down Cascedding";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$("document").ready(function () {
$("#CountryId").change(function () {
var CountryId = $(this).val();
$.getJSON("/Casceding/GetState", { CountryId: CountryId }, function (carData) {
var select = $("#StateId");
select.html('');
$.each(carData, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
});

</script>
<div style="float: left;">
<div>
Country
</div>
<div>
@Html.DropDownListFor(m => m.CountryId, Model.lstCountryList, new { id = "CountryId" })
</div>
</div>
<div style="float: left; margin-left: 10px;">
<div>
State
</div>
<div>
@Html.DropDownListFor(m => m.StateId, Model.lstStateList, new { id = "StateId" })
</div>
</div>

Step  4 Now run application

Final output like below

Out put
dropdowncascading

 

 

 

 

Thanks, If this article help us please share it.

No comments

Leave a Reply


× 1 = 5

Categories