ساخت DropDownList های مرتبط به کمک jQuery Ajax در MVC
نویسنده: امیرحسین مرجانی
تاریخ: ۱۳۹۱/۰۷/۲۷ ۲۱:۵۸
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
رابطه ای از جدول Type به جدول Category.
به کمک Scaffolding یک کنترلر برای کلاس Tap (شیر آب) میسازیم ، به طور عادی در فایل Create.chtml مقدار گروه را به صورت DropDown نمایش میدهد، حال ما نیاز داریم که خودمان DropDown را برای Type ایجاد کنیم و بعد ارتباط اینها را بر قرار کنیم.
تابع اولی Create را این طوری ویرایش میکنیم :
public ActionResult Create()
{
ViewBag.Type = new SelectList(db.Types, "Id", "Title");
ViewBag.Category = new SelectList(db.Categories, "Id", "Title");
return View();
}
همان طور که مشخص است ، علاوه بر مقادیر Category که خودش ارسال میکند ، ما نیز مقادیر نوعها را به View مورد نظر ارسال میکنیم.
برای نمایش دادن هر دو DropDownList ویو مورد نظر را به این صورت ویرایش میکنیم :
<div>
نوع
</div>
<div>
@Html.DropDownList("Type", (SelectList)ViewBag.Type, "-- انتخاب ---", new { id = "rdbTyoe" })
@Html.ValidationMessageFor(model => model.Category)
</div>
<div>
دسته بندی
</div>
<div>
@Html.DropDownList("Category", (SelectList)ViewBag.Category, "-- انتخاب ---", new { id = "rdbCategory"})
@Html.ValidationMessageFor(model => model.Category)
</div>
همان طور که مشاهده میکنید ، در اینجا DropDownList مربوط به Type که خودمان سمت سرور ،مقادیر آن را پر کرده بودیم نمایش میدهیم.
خب شاید تا اینجای کار ، ساده بود ولی میرسیم به اصل مطلب و ارتباط بین این دو DropDownList. (قبل از این قسمت حتما نگاهی به ساختار DropDownList یا همان تگ select بیندازید ، اطلاعات جی کوئری شما در این قسمت خیلی کمک حال شما است)
برای این کار ما از jQuery استفادی میکنیم ، کار به این صورت است که هنگامی که مقدار DropDownList اول تغییر کرد :
public ActionResult SelectCategory(int id)
{
var categoris = db.Categories.Where(m => m.Type1.Id == id).Select(c => new { c.Id, c.Title });
return Json(categoris, JsonRequestBehavior.AllowGet);
}
$('#rdbTyoe').change(function () {
jQuery.getJSON('@Url.Action("SelectCategory")', { id: $(this).attr('value') }, function (data) {
$('#rdbCategory').empty();
jQuery.each(data, function (i) {
var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
$("#rdbCategory").append(option);
});
});
});
$('#rdbCategory').empty();
بعد از انتخاب :
var Cities =from c in Cities
Select new {Id=c.Id, Name=c.Name};
return Json(Cities , JsonRequestBehavior.AllowGet);
در مثال شما که نشانی از اشیاء تو در تو نیست. حتی در سؤال شما هم نبود. خروجی return json با اشیاء تو در تو مشکلی ندارد. فقط خروجی آنرا باید بتوانید سمت کلاینت پردازش کنید.
var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
<option value="value">Name</option>
.attr("value", data[i].Id).text(data[i].Title)
<option value="100">AmirHossein</option>
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
public ActionResult Create()
{
Models.category cat = new Models.category();
List<SelectListItem> list = cat.GetList().Select(p => new SelectListItem { Text = p.category1, Value = p.ID.ToString() }).ToList();
list[0].Selected = true;
ViewData["Category1"] = list;
Models.subcategory subcat = new Models.subcategory();
List<SelectListItem> list1 = subcat.GetList().Select(p => new SelectListItem { Text = p.subcategory1, Value = p.ID.ToString() }).ToList();
list1[0].Selected = true;
ViewData["Category2"] = list1;
return View();
}
-------------------------razor view-----------------------------------------------
<div>
@{ List<SelectListItem> lstCategories = (List<SelectListItem>)ViewData["category1"]; }
@Html.DropDownList("dbcat", lstCategories, new { id="dbcat" })
</div>
<div>
@{ List<SelectListItem> lstsubCategories = (List<SelectListItem>)ViewData["Category2"]; }
@Html.DropDownList("dbsubcat", lstsubCategories, new { id="dbsubcat"}) public ActionResult SelectCategory(int id)
{
studentDataContext db= new studentDataContext();
var subcat = db.subcategories.Where(m => m.ID == id).Select(c => new
{
c.ID,
c.subcategory1
});
return Json(subcat, JsonRequestBehavior.AllowGet);
}<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript"> $('#dbcat').change(function () { jQuery.getJSON('@Url.Action("SelectCategory")', { id: $(this).attr('value') }, function (data) { $('#dbsubcat').empty(); jQuery.each(data, function (i) { var option = $('<option></option>') .attr("value", data[i].Id).text(data[i].Title); $("#dbcat").append(option); }); }); }); </script>
$('#dbcat').change(function ()$(function () {
// اینجا اسکریپتهای جیکوئری باید تعریف شوند
});Select(c => new { c.Id, c.Title })ViewBag.city = new SelectList(_db.regions.Select(r => r.region_main).Distinct(), "region_main");
$('#dbcat').change(function () {
var selectedItem = $(this).val();
$.post( "-----url----", { item: selectedItem } );
}); $('#Cities').change(function () {
jQuery.getJSON('@Url.Action("SelectTown")', { id: $(this).val() }, function (data) {
$('#Towns').empty();
jQuery.each(data, function (i) {
var option = $('<option></option>').val(data[i].ID).text(data[i].Name);
$("#Towns").append(option);
});
});
}); public SelectList(IEnumerable items, string dataValueField, string dataTextField, Object selectedValue)
// in controller
ViewBag.Countries = new SelectList(countries.GetCountries(), "id", "countryName", "82" /* selected id */);
// in view
@Html.DropDownListFor(model => model.CountryId, (IEnumerable<SelectListItem>)ViewBag.Countries, new { @class = "form-control" }) $(function (){
$('#ostan').change(function () {
jQuery.getJSON('shahrestan.json', { id: $(this).attr('value') }, function (data) {
jQuery.each(data, function (i) {
var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
$("#shahrestan").append(option);
});
});
jQuery.getJSON('mantaqeh.json', { id: $("#shahrestan").attr('value') }, function (man) {
jQuery.each(man, function (i) {
var option = $('<option></option>').attr("value", man[i].Id).text(man[i].Title);
$("#mantaqeh").append(option);
});
});
jQuery.getJSON('mahaleh.json', { id: $("#mantaqeh").attr('value') }, function (ma) {
jQuery.each(ma, function (i) {
var option = $('<option></option>').attr("value", ma[i].Id).text(ma[i].Title);
$("#mahaleh").append(option);
});
});
});
}); <select id="ostan">
<option>--انتخاب کنید--</option>
<option value="1">کردستان</option>
</select>
<select id="shahrestan">
<option>--انتخاب کنید--</option>
</select>
<select id="mantaqeh">
<option>--انتخاب کنید--</option>
</select>
<select id="mahaleh">
<option>--انتخاب کنید--</option>
</select>