Question

我有3个DropDownLists;当我在＃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" />
    <%}%>

是否可以在不将页面发送回服务器的情况下填写2级和3级下拉列表？
如何判断在GetItemsForLevel操作中点击了哪个下拉列表？我是MVC的新手，所以我很欣赏以简单的方式告诉我？

谢谢

Answer 1

据我所知，实际上没有一个组件可以帮到你。但您可以使用Ajax.BeginForm帮助程序来构建它。

第一个ajax表单应包含第一个选择列表，并回发到返回部分视图的操作
1.中的局部视图应返回带有第二个选择列表的第二个ajax表单
等等

所以主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>

链接Razor DropDownLists的项目

1 个答案: