asp.net-mvc - 如何在MVC4 Jquery中重置包含级联下拉列表的部分 View

Question

我正在使用 MVC4/EF，我有四个级联下拉列表，我第一次就让它工作了。因此，当页面第一次呈现时，我可以选择第一个下拉列表并过滤第二个下拉列表的结果，然后通过选择第二个下拉列表，过滤第三个下拉列表，然后根据第四个下拉列表填充编辑 View 。但是，当我返回并更改第一个下拉列表中的选择时，它会过滤第二个下拉列表，但不会重置第三个、第四个下拉列表和编辑部分 View 。这是第一个 dropdwon 部分 View 代码。

CampusUsercontrol.cshtml

@model RHMS.Models.RoomEditor
@using (Ajax.BeginForm("SelectCampus", "RoomEditor", new AjaxOptions { UpdateTargetId  = "Buildings" }))
{ 
@Html.DropDownListFor(
        m => m.SelectedCampusID,
        new SelectList(Model.Campuses,"CampusId", "Name"),
       string.Empty
    )
}

<script type="text/javascript">

$('#SelectedCampusID').change(function () {
    $(this).parents('form').submit();

 });
</script>

索引.cshtml

 @model RHMS.Models.RoomEditor
 @{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
 }
   <table cellpadding="0" cellspacing="4" border="0">
<tr>
    <td>Campus </td>
    <td> :</td>
    <td>@Html.Partial("CampusUserControl", Model)</td>
</tr>
<tr>
    <td>Building </td>
    <td> :</td>
    <td><div id="Buildings">@Html.Partial("BuildingUserControl", Model)</div></td>
</tr>
<tr>
    <td>Floor </td>
    <td> :</td>
    <td><div id="Floor">@Html.Partial("FloorsUserControl", Model)</div></td>
</tr>
 <tr>
    <td>Room </td>
    <td> :</td>
    <td><div id="Room">@Html.Partial("RoomUserControl", Model)</div></td>
</tr>
</table>
<div id="RoomInfo">
@Html.Partial("RoomInfoUserControl", Model)
</div>

请帮助我如何在第一个部分 View 更改时刷新其他部分 View 。

Answer 1

看起来这部分 JavaScript 代码仅在页面第一次加载时执行

<script type="text/javascript">

$('#SelectedCampusID').change(function () {
    $(this).parents('form').submit();

 });
</script>

尝试使用 Jquery 的 on 连接 #SelectedCampusID 的 change 事件捆绑。您可能还需要对其他下拉菜单执行相同的操作。