Question

我正在试图创建一组级联下拉列表，我的主视图包含一组两个部分视图：

@model  WebUI.Controllers.IndexViewModel
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

<table cellpadding="0" cellspacing="4" border="0">
<tr>
    <td>Category </td>
    <td> :</td>
    <td>@Html.Partial("ParentsUserControl", Model)</td>
</tr>
<tr>
    <td>Sub - Category </td>
    <td> :</td>
    <td><div id="Children">@Html.Partial("ParentChildrenUserControl", Model)</div></td>
</tr>

</table>

每个局部视图都有一个带下拉列表的AJAX表单：

@model WebUI.Controllers.IndexViewModel

@using (Ajax.BeginForm("SelectParent", "Ticket", new AjaxOptions { UpdateTargetId = "Children" }))
{ 
@Html.DropDownListFor(
        m => m.SelectedParenId,
        new SelectList(Model.AvailableParents, "EstablishmentId", "Name"),
       string.Empty
    )
}

<script type="text/javascript">
$('#SelectedParenId').change(function () {
    $(this).parents('form').submit();
});
</script>

问题是，只要我点击第一个列表中的某个项目，就会使用第二个局部视图渲染一个新页面，如何让它渲染主视图内部的局部视图而不是生成一个新页面？，UpdateTargetId引用了什么？

和另外如何将用户选择的值发送回控制器？我创建的所有是一张桌子，我应该把那张桌子放在一张表格中吗？

提前致谢！

Answer 1

您可以检查是否在web.config文件中添加了以下密钥

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

Answer 2

是如果将表放在表单中，框架将自动将所有模型值存储在模型包装器中。这称为模型绑定，您可以直接在控制器操作中使用它。

PartialView呈现为新页面而不是在主视图上呈现

2 个答案: