.NET MVC Ajax 表单 - 如何隐藏它？

Question

好吧，一切都是“功能性”的，与我试图完成的事情一起工作，我再次确信这是一件愚蠢的事情，但我不知道如何做这一件事。

我有一个实体的编辑表单，比如说一辆汽车。这辆“汽车”可以有 0 至多名乘客。因此，在我的编辑表单上，我有汽车的所有字段，然后是显示每位乘客（部分）的列表视图。我还有一个“添加新乘客”按钮，它将呈现一个新的部分视图，允许您输入乘客。它有一个取消链接和一个用于提交 Ajax 表单的添加按钮。当您添加乘客时，乘客会自动添加到列表中，但我需要输入乘客表格才能消失。我尝试使用 onSuccess 和 onComplete 函数来隐藏表单所在的 div，但两者都只渲染部分视图 HTML 元素（白屏、文本），而不渲染整个页面上下文中的partialView。

资料来源：1) 主编辑视图

    <script type="text/javascript">
    Function hideForm(){
        document.getElementById('newPassenger').style.display = 'none';
    }

</script>
<h2>Edit</h2>

<%-- The following line works around an ASP.NET compiler warning --%>
<%= ""%>

<%Html.RenderPartial("EditCar", Model)%>
<h2>Passengers for this car</h2>
<%=Ajax.ActionLink("Add New Passenger", "AddPassenger", New With {.ID = Model.carID}, New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%>
<div id="newPassenger"></div>
<div id="passengerList">
    <%Html.RenderPartial("passengerList", Model.Passengers)%>
</div>
<div>
    <%= Html.ActionLink("Back to List", "Index") %>
</div>

2) 添加乘客视图。下面的取消链接是一个不返回任何内容的操作，从而删除了 div 中的信息。

<%  Using Ajax.BeginForm("AddPassengerToCar", New With {.id = ViewData("carID")}, New AjaxOptions With {.OnSuccess = "hideForm()", .UpdateTargetId = "passengerList", .InsertionMode = InsertionMode.Replace})%>   
    <%=Html.DropDownList("Passengers")%> 
    <input type="submit" value="Add" />
    <%=Ajax.ActionLink("Cancel", "CancelAddControl", _
                                            New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%><% end using %>

Answer 1

好吧 - 想通了，我想昨晚已经太晚了。所以，这就是答案，它实际上是一些小问题最终汇聚成的。

1. javascript 中的函数 hideForm() 应该是 function hideForm()，没有大写。我想太习惯于编写控制器函数了。
2. 我在 OnSuccess 属性中使用“hideForm()”，而不是“hideForm” - doh。
3. 您可能不想隐藏该 div，因为当您再次单击“添加新乘客”链接时，该 div 将不会显示。更改了 hideForm 函数以将 div 的innerHTML 属性设置为“”。

再次感谢达林的帮助，我试图从中获得比结果更多的东西。

Answer 2

请确保你已经在你的页面引用两个MicrosoftAjax.js和MicrosoftMvcAjax.js脚本。其原因获得局部视图内容（白色屏幕，文本）可能是一个脚本错误，其防止从AJAX正确执行。的外观与萤火如果有执行期间的一些错误。

至于隐藏的形式而言，你可以使用OnSuccess回调：

<% Using Ajax.BeginForm("AddPassengerToCar", 
    New With { .id = ViewData("carID")}, 
    New AjaxOptions With {
        .UpdateTargetId = "passengerList", 
        .InsertionMode = InsertionMode.Replace,
        .OnSuccess = "hideForm"
}) %>

在hideForm javascript函数将被如果AJAX调用成功并执行将隐藏所需的div。