链接剃刀下拉列表的项目

Question

我有 3 个下拉列表;当我在 #1 中选择一个项目时，我希望根据 #1 的值填充 #2 中的项目。 当我在#2中选择一项时，#3中的项目应根据#2中的选择进行填充。 它们都位于名为 GetItemsForLeve1 的表单中。 我首先使用下拉列表onchange。

<% using (Html.BeginForm("GetItemsForLeve1", "Index"))
    { %>             
       Main Group: <%:Html.DropDownList("Level1", (SelectList)ViewBag.Level1, "Select One", new { onchange = "$this.form.submit()" })%> 
       <%:Html.DropDownList("Level2", (SelectList)ViewBag.Level2, "-", new { onchange = "$this.form.submit()" })%> 
       <%:Html.DropDownList("Level3", (SelectList)ViewBag.Level3, "-", new { onchange = "$this.form.submit()" })%> 
         <input type="submit" value="Filter" />
    <%}%>

1. 是否可以在不将页面发送回服务器的情况下填充级别 2 和级别 3 下拉列表？

2. 如何知道在GetItemsForLevel操作中单击了哪个下拉列表？我是MVC的新手，所以我很高兴以简单的方式告诉我？

谢谢

Answer 1

据我所知，没有一个组件可以为您执行此操作。 但是，您可以使用Ajax.BeginForm帮助程序来构建它。

1. 第一个 AJAX 窗体应包含第一个选择列表，并回发到返回分部视图的操作
2. 1. 中的分部视图应返回第二个带有第二个选择列表的 Ajax 窗体
3. 等等

因此，主 Razor 视图应包含如下内容：

@using (Ajax.BeginForm("SecondAjaxForm", new AjaxOptions() { UpdateTargetId = "secondFormDiv" })
{
    @Html.DropDownList("selectList1", Model.FirstSelectList, new { onchange = "this.form.submit()")
}
<!-- the second AJAX form + drop-down list will get populated here
<div id="secondFormDiv"></div>

SecondAjaxForm动作：

public ActionResult SecondAjaxForm(string selectList1)
{
    SelectList secondSelectList;
    // populate the second select list here
    return PartialView("SecondAjaxForm", secondSelectList);
}

部分视图SecondAjaxForm应与上面的第一种形式基本相同。

@model SelectList
@using (Ajax.BeginForm("ThirdAjaxForm", new AjaxOptions() { UpdateTargetId = "thirdFormDiv" })
{
    @Html.DropDownList("selectList2", Model, new { onchange = "this.form.submit()")
}
<!-- the third AJAX form + drop-down list (if any) will get populated here
<div id="thirdFormDiv"></div>