AJAX级联与MVC4 [英] AJAX Cascading with MVC4
问题描述
我用于使用 AJAX 做异步回传下面的方法。这适用于点击提交罚款。但我想知道的是，可以通过 AJAX 调用各种 ActionMethod S IN的控制器。
我想实现像级联下拉列表。如何调用不同的 ActionMethod 通过 AJAX 在下拉值的变化？
下面是code调用其中只有一个 ActionMethod 上提交表单。
查看
@ {
ViewBag.Title =指数;
VAR的选择=新AjaxOptions（）
{
URL = Url.Action（指数，城市），
LoadingElementId =节约，
LoadingElementDuration = 2000，
确认=您确定要投降吗？
};
}＆LT; H2＆GT;指数＆LT; / H＆GT;@using（Ajax.BeginForm（选项））
{
＆LT; DIV ID =节约＆GT;加载...＆LT; / DIV＆GT;
@ Html.DropDownList（国家，作为ViewBag.Countries的SelectList）LT;输入类型=提交/＆GT;
}
控制器
公众的ActionResult指数（）
{
IEnumerable的＆LT; SelectListItem＆GT; selectListItems =新[]
{
新SelectListItem的{text =US，值=1}
}; ViewBag.Countries = selectListItems; 返回查看（）;
}公众的ActionResult GETSTATE（字符串countryId）
{
IEnumerable的＆LT; SelectListItem＆GT; selectListItems =新[]
{
新SelectListItem的{text =田纳西州，值=1}，
新SelectListItem的{text =NEWYORK，值=2}
}; 返回查看（）;
}
回答你的第一个问题是可以通过AJAX调用控制器中的各种ActionMethods是一个很大的肯定。您可以从您的控制器通过阿贾克斯但唯一的结果产生取决于是否像您发送视图或局部视图或JSON结果各种事情调用任何操作方法。
你的下一个问题：
我将张贴一些codeS
Controller.cs
公共JsonResult getCity（字符串国家）
{
VAR临时=（从db.Table3.OrderBy CNTRY（S = GT; s.country）
其中（的String.Compare（cntry.country，国家）== 0）
选择cntry.city）.ToList（）;
返回JSON（温度，JsonRequestBehavior.AllowGet）;
}
查看
＆LT; H1＆GT;
国家和LT; / H1＆GT;
＆LT;选择名称=国家级=二合一＆GT;
＆LT;期权价值=＆GT;＆LT; /选项＆GT;@ {
的foreach（VAR吨（列表＆LT;串GT;）ViewBag.countries）
{
＆LT;期权价值= @ T＆GT; @ T＆LT; /选项＆GT;
}
}
＆LT; /选择＆GT;
＆LT; H1＆GT;
国家＆LT; / H1＆GT;
＆LT;选择名称=城市CLASS =combo2＆GT;
＆LT; /选择＆GT;
＆LT; DIV ID =TESE＆GT;
＆LT; / DIV＆GT;
@ *
下面的jQuery code发现从国家下拉列表中选择的选项
然后发送一个Ajax调用到主/ getcity方法
最后它填充到城市下拉
* @
＆LT;脚本类型=文/ JavaScript的＆GT;
$（'身体'）。在（'变化'，'.combo'，函数（）{
VAR了selectedValue = $（本）.VAL（）;
警报（了selectedValue）;
$获得（/首页/ getcity，{国家：}了selectedValue，功能（数据）{
$（＃TESE）的html（数据）;
$（。combo2）HTML（＆LT;期权价值= \\\\＆GT;＆LT; /选项＆gt;中）。
$。每个（数据，功能（指数值）{
$（。combo2）追加。（＆LT;期权价值= \\+价值+\\＆gt;中+价值+＆LT; /选项＆GT;）;
}）;
$（。combo2）。HTML（）
}）;
}）;
＆LT; / SCRIPT＆GT;
这将显示国家列表下拉。一旦某个国家被选中它会使城市名单的一个新的下拉菜单
I used the below method for doing Async postback using AJAX. This works fine on clicking submit. But i would like to know, is that possible to call various ActionMethods in a controller via AJAX.
I would like to implement something like cascading dropdown. How to call different ActionMethod via AJAX on dropdown value change?
Here is the code which call only one ActionMethod on submitting form.
View
@{
ViewBag.Title = "Index";
var options = new AjaxOptions()
{
Url = Url.Action("Index", "City"),
LoadingElementId = "saving",
LoadingElementDuration = 2000,
Confirm = "Are you sure you want to submit?"
};
}
<h2>Index</h2>
@using (Ajax.BeginForm(options))
{
<div id="saving">Loading...</div>
@Html.DropDownList("Countries",ViewBag.Countries as SelectList)<input type="submit" />
}
Controller
public ActionResult Index()
{
IEnumerable<SelectListItem> selectListItems = new []
{
new SelectListItem{ Text = "US",Value = "1" }
};
ViewBag.Countries = selectListItems;
return View();
}
public ActionResult GetState(string countryId)
{
IEnumerable<SelectListItem> selectListItems = new[]
{
new SelectListItem { Text = "Tennesse", Value = "1" },
new SelectListItem { Text = "Newyork", Value = "2" }
};
return View();
}
The answer to your first question "is that possible to call various ActionMethods in a controller via AJAX" is a big yes. You may call any action method from your controller through Ajax though the only result generated depends on various things like whether you send a view or partial view or JSON result.
for your next question :
I will be posting some codes
Controller.cs
public JsonResult getCity(string country)
{
var temp = (from cntry in db.Table3.OrderBy(s => s.country)
where (string.Compare(cntry.country, country) == 0)
select cntry.city).ToList();
return Json(temp, JsonRequestBehavior.AllowGet);
}
View
<h1>
Countries</h1>
<select name="countries" class="combo">
<option value=""></option>
@{
foreach (var t in (List<string>)ViewBag.countries)
{
<option value=@t>@t</option>
}
}
</select>
<h1>
State</h1>
<select name="city" class="combo2">
</select>
<div id="tese">
</div>
@*
The following jquery code finds the selected option from country dropdown
and then sends an ajax call to the Home/getcity method
and finally populate it to the city dropdown
*@
<script type="text/javascript">
$('body').on('change', '.combo', function () {
var selectedValue = $(this).val();
alert(selectedValue);
$.get("/Home/getcity", { country: selectedValue }, function (data) {
$("#tese").html(data);
$(".combo2").html("<option value = \"\"></option>")
$.each(data, function (index, value) {
$(".combo2").append("<option value = \"" + value + "\">" + value + "</option>");
});
$(".combo2").html()
});
});
</script>
This will show a dropdown of countries list. Once a country is selected it will render a new dropdown of city list
这篇关于AJAX级联与MVC4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
