代码之家 › 专栏 › 技术社区 › Tommy

.NETMVCAJAX表单-如何隐藏它?

microsoft-ajax ajax vb.net asp.net-mvc

Tommy · 技术社区 · 16 年前

好吧,一切都是'功能'与我试图完成的工作,再一次,我相信这是愚蠢的东西,但我不知道如何做这一件事。

我有一个实体的编辑表单,比如说一辆车。这辆“车”可以有0多个乘客。所以在我的编辑表单上,我有所有汽车的字段,然后是一个显示每个乘客的列表视图(部分)。我也有一个'添加新乘客'按钮,将呈现一个新的局部视图,允许您输入乘客。它有一个cancel链接和一个add按钮来提交Ajax表单。添加乘客时,乘客会自动添加到列表中,但我需要“输入乘客”窗体才能离开。我尝试过使用onSuccess和onComplete函数来隐藏表单所在的div,但是这两个函数都只呈现部分视图HTML元素(白屏、文本),而不呈现整个页面上下文中的部分视图。

资料来源: 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) 添加乘客视图。下面的cancel链接是一个不返回任何内容的操作,从而删除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 %>

2 回复 | 直到 16 年前

Tommy 16 年前

好吧-弄明白了,我想昨晚已经太晚了。所以,答案就在这里,事实证明是一些小问题最终变成了一个问题。

我在OnSuccess属性中使用了“hideForm()”,而不是“hideForm”-doh。
您可能不想隐藏div,因为再次单击addnewpassenger链接时,不会显示div。已更改hideForm函数以将div的innerHTML属性设置为“”。

Darin Dimitrov 16 年前

确保引用了 MicrosoftAjax.js 和 MicrosoftMvcAjax.js FireBug 如果执行过程中出现错误。

至于隐藏表单,您可以使用 OnSuccess 回拨:

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

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