سلام
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<h2>Index</h2>
<div class="editor-label">
<br />
<div style="color: Purple;">
@Html.Label("استان را انتخاب کنید")
</div>
<div class="editor-field">
@if (ViewData.ContainsKey("State"))
{
@Html.DropDownList("State", ViewData["State"] as List<SelectListItem>, new { style = "width:250px", @class = "dropdown1" })
}
</div>
<br />
<div style="color: Purple;">
@Html.Label("شهر را انتخاب کنید", new { style = "width:250px" })
</div>
<div class="editor-field">
@Html.DropDownList("cities", new SelectList(string.Empty, "Value", "Text"), "شهر را انتخاب کنید", new { style = "width:250px", @class = "dropdown1" })
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//Dropdownlist Selectedchange event
$("#State").change(function() {
$("#cities").empty();
$.ajax({
type: 'POST',
url: '/Home/GetCities', // we are calling json method
dataType: 'json',
data: { id: $("#State").val() },
success: function(cities) {
// states contains the JSON formatted list
// of states passed from the controller
$.each(cities, function(i, city) {
$("#cities").append('<option value="' + city.Value + '">' + city.Text + '</option>');
}); // here we are adding option for States
},
error: function(ex) {
alert('Failed to retrieve states.' + ex);
}
});
return false;
});
});
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Cascadingdropdownlist_MVC.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<SelectListItem> li = new List<SelectListItem>();
li.Add(new SelectListItem { Text = "Select", Value = "0" });
li.Add(new SelectListItem { Text = "تهران", Value = "1" });
li.Add(new SelectListItem { Text = "خراسان", Value = "2" });
li.Add(new SelectListItem { Text = "کردستان", Value = "3" });
li.Add(new SelectListItem { Text = "ساری", Value = "4" });
ViewData["State"] = li;
return View();
}
public JsonResult GetCities(string id)
{
List<SelectListItem> cities = new List<SelectListItem>();
switch (id)
{
case "1":
cities.Add(new SelectListItem { Text = "انتخاب کنید", Value = "0" });
cities.Add(new SelectListItem { Text = "تهران", Value = "1" });
cities.Add(new SelectListItem { Text = "کرج", Value = "2" });
cities.Add(new SelectListItem { Text = "شهر ری", Value = "3" });
cities.Add(new SelectListItem { Text = "اسلامشهر", Value = "4" });
cities.Add(new SelectListItem { Text = "البرز", Value = "5" });
break;
case "2":
cities.Add(new SelectListItem { Text = "انتخاب کنید", Value = "0" });
cities.Add(new SelectListItem { Text = "خراسان شمالی", Value = "1" });
cities.Add(new SelectListItem { Text = "خراسان جنوبی", Value = "2" });
cities.Add(new SelectListItem { Text = "مشهد", Value = "3" });
break;
case "3":
cities.Add(new SelectListItem { Text = "انتخاب کنید", Value = "0" });
cities.Add(new SelectListItem { Text = "سنندج", Value = "1" });
break;
case "4":
cities.Add(new SelectListItem { Text = "انتخاب کنید", Value = "0" });
cities.Add(new SelectListItem { Text = "ساری", Value = "1" });
cities.Add(new SelectListItem { Text = "رشت", Value = "1" });
break;
}
return Json(new SelectList(cities, "Value", "Text"));
}
}
}