ایجاد Dropdownlist با AJAX

[Wily_Fox]

با سلام و خسته نباشید به همه دوستان

من یه گروه (name = maingroup) دارم مثل لیست مراکز استان ها

و یه زیر گروه (name = subgroup) دارم مثل شهرستان های هر استان

می خوام هر کدوم از آیتم های maingroup که انتخاب شد بمراتب آیتم های subgroup تغییر کنه

کدهای زیر رو نوشتم:

@Html.DropDownList("NewsGroup", String.Empty)

<script>
$(document).ready(function () {
$("#NewsGroup").change(function () {
var selection = $("#NewsGroup").val();
var dataToSend = {
SelectItem: selection
};

$.ajax({
url: "Home/ChangeSelectedItemNewsGroupDropDownList",
data: dataToSend,
success: function (data) {
$.each(data.data.item, function (i, variant) {
$states.append($('<option/>').text(variant.Title).attr('value', item.Code));
});
}
});
});
});



public JsonResult ChangeSelectedItemNewsGroupDropDownList(int SelectItem)
{
var groupscode = (from g in context.NewsGroups
where g.IsActive == true && g.ParentID == SelectItem
select g.NewsGroupID).ToArray();

var relLangGroups = (from r in context.RelLangGroups
where r.Type == true && r.LanguageName == "Fa" && groupscode.Contains(r.Code)
select new { r.Title, r.Code }).ToList();

//if (Request.IsAjaxRequest())
//{
var item = new SelectList(relLangGroups, "Code", "Title");
//}

return Json(item, JsonRequestBehavior.AllowGet);
}



در واقع کدها تا زمان ارسال داده توسط تابع ChangeSelectedItemNewsGroupDropDownList درست است. اما dropdownlist بعدی که باید با این مقدار پر بشه ، پر نمیشه!
اگه امکانش هست راهنمایی کنید

متشکرم

[younesdoost]

دوست من می خوای 2 تا کار بکن انشا الله که حل بشه.:متفکر:
یکی اینکه بالای تابع ChangeSelectedItemNewsGroupDropDownList اتریبیوته [HttpGet] رو بیار.
دوم اینکه توی تابع success اینی که من نشون میدم رو استفاده کن.البته واسه شما هم نمی دونم درسته یا نه.ممکنه درست باشه اما اینی که اینجا می ذارم رو مطمئنم جواب میده انشا الله.


var i = 0;

for (i = 0; i <= data.length; i++) {
$states.append($('<option/>').html(data[i].Title).value(data[i].Code);
}


در ضمن تو کنترلر هم نمی خواد یه سلکت لیست برگردونی.همون لیست آبجکت هاتو برگردون.



اگر چنانچه بازم حل نشد یه Inspect Element بکن برو تو console ببین بین خودت و سرورت چی داره رد و بدل میشه.یا اینکه خودت دستی از طریق url اکشنت رو صدا بزن ببین چی برمی گردونه.اگه به هیچ نتیجه ای نرسیدی امر کن برات کد خودم رو می فرستم.
از تمیز نبودن مطلب هم عذر خواهی میکنم.به خاطر ضعف در کار کردن با ادیتور هستش.

[Wily_Fox]

با درست کردن 2 تا PartialView طبق این لینک (http://www.codeproject.com/Articles/258172/Simple-Implementation-of-MVC-Cascading-Ajax-Drop-D)مشکل حل شد

[younesdoost]

بدون 2 تا PartialView با همون روش خودتونم میشدا.:متفکر:

[Wily_Fox]

آره میشد اما اذیت می کرد...

دوست من قضیه اینطوریه که:

یه تب کنترل درست کردم مثل تب کنترل StackOverFlow
2 تا Dropdownlist دارم که اولی گروه های اصلی هستند و دومی زیر گروه ها

می خوام وقتی گروه رو انتخاب کرد زیر گروه update بشه و وقتی زیر گروه رو انتخاب کرد حالا براساس تب کنترل موجود (که چهار تا گرینه واسه انتخاب داره) یکی رو انتخاب کنه. نتیجه براساس گروه و زیر گروه و تب کنترل در صفحه بوسیله Ajax نمایش داده بشه

تب کنترل ها ثابت هستند. اما گروه و زیر گروه همواره متغیر.

حالا موندم این دو تا که انتخاب شدند چطور بوسیله آرگومان به تابع مربوطه ارسال کنم.

تب کنترل رو ها رو به این شکل نوشتم


@Ajax.ActionLink("جدیدترین ها","NextPage", new { GotoPage=1, TotalPage=Model.TotalPage, SelectedTabItem=1,
SelectedGroup=Model.SelectedGroup, SelectedSubGroup=Model.SelectedSubGroup},
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
UpdateTargetId = "Pane"
})


آرگومانی هایی که باید پس از انتخاب گروه و زیر گروه پرشده باشند SelectedSubGroup و SelectedGroup هستند.

اما نمیدونم چطوری حالا این دوتا رو مقدار دهی کنم.!!!!!

[younesdoost]

یعنی می خواید یه DropDownList که توش چیزی انتخاب شد اون یکی هم بر اساس این تغییر کنه دیگه.
خب شما این کار پایین که من نشون می دم رو انجام بدی درست میشه انشا الله.
خب.فرض کنیم DropDown ها تو اکشن Home/Index شما هستن.DropDown اول رو که بدون هیچ مشکلی پر می کنیم:


public ActionResult Index(){

اینجا که یه لیستی از SelectListItem ها رو توسط یه ViewBag پاس میدی به اکشنت

}

خب تو Home/Index هم که اینارو داریم:

@Html.DropDownList("firstId", (List<SelectListItem>)ViewBag.fistList, "انتخاب کنید")
<select id="secondList" name="secondId">
<option>انتخاب کنید</option>
</select>

خب تو فایل .js هم که اینو داریم:

$('#firstId').on("change", function () {
$.getJSON('/Home/ChangeSelectedItemNewsGroupDropDownList', { id: $(this).val() }, function (data) {
$("#secondList").empty();
var option = $('<option>انتخاب کنید</option>');
$("#secondList").append(option)
var i = 0;
for (i = 0; i <= data.length; i++) {
option = $('<option></option>').val(data[i].Code).html(data[i].Title);
$("#secondList").append(option);
}
});
});

بعد تو کنترلر خودتون هم اینطوری داشته باشید:

[HttpGet]
public ActionResult ChangeSelectedItemNewsGroupDropDownList(int id)
{

اینجا لیست آبجک هاتون رو بخونید و نیازی نیست به SelectList تبدیلش کنید و مثلا برابر با secondListObject قرارش بدید

return secondListObject;
}

این بدون 2 تا ViewModel و شبیه راه خودت بود.درد سر نداره.اینو بری بهتره.

[Wily_Fox]

دوست عزیز دستت درد نکنه. مشکل کلا حل شد. اشتباهی که من کرده بودم استفاده نادرست از id مربوطه بود. یعنی مقدار updateid رو درست نداده بودم