AJAX 与 MVC4 级联

Question

我使用以下方法使用AJAX 进行Async 回发。单击submit 时效果很好。但我想知道，是否可以通过AJAX 在控制器中调用各种ActionMethods。

我想实现类似级联下拉菜单的功能。如何在下拉值更改时通过AJAX 调用不同的ActionMethod？

这是在提交表单时只调用一个ActionMethod的代码。

查看

@{
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" />
}

控制器

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();        
}

Answer 1

您的第一个问题"is that possible to call various ActionMethods in a controller via AJAX" 的答案是肯定的。您可以通过 Ajax 从控制器调用任何操作方法，但生成的唯一结果取决于各种因素，例如您是发送视图还是部分视图还是 JSON 结果。

你的下一个问题：

我将发布一些代码

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>

这将显示国家列表的下拉列表。一旦选择了一个国家，它将呈现一个新的城市列表下拉列表

Answer 2

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);
    }

查看

<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>