0

我有 3 个下拉列表；当我选择#1 中的项目时，我希望#2 中的项目根据#1 的值填充。当我在#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 完全陌生，所以我很感激以简单的方式告诉我？

谢谢

4

1 回答 1

0

据我所知，没有真正的组件可以为您执行此操作。但是您可以使用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>
于 2012-09-29T06:48:11.907 回答