使用来自 MVC 页面的 jqModal ajax 调用的结果更新 div

Question

这是我的场景。

我使用 jqModal 的 ajax 功能来调用 jqModal，该功能在模式对话框中显示表单。用户填写一些信息并提交表单，该表单返回一些 html 作为响应。

生成的 html 显示在 jqModal div 内。然后，用户单击“关闭”以关闭模式对话框。

到目前为止，这一切都工作正常。

相反，我想要做的是关闭提交时的对话框，并使用服务器的响应更新 div。

调用代码：

<script type="text/javascript">

    $(document).ready(function () {

        $('#jqmWindowContainer').jqm({
            modal: true,
            ajax: '.... url to display my form ...',
            onHide: myAddClose,
            ajaxText: 'Loading',
            toTop: true,
        });

        function myAddClose(hash) {
            hash.w.fadeOut('300', function () { hash.o.remove(); });
        }

    }); 

</script> 

调用页面的标记。单击“保存此搜索”会触发该对话框。

    <a href="#" class="jqModal">Save this search</a>  
    <span id="jqmWindowContainer" class="jqmWindow"></span> 

显示的表单：

   <div class="jqmPopupForm" id="jqmPopupForm">  
        <div id="loadingMessage" style="display: none;">
            Saving...
        </div>

        <% using (Ajax.BeginForm("Save", "AssetSearch", 
             new AjaxOptions() 
                 { HttpMethod = "Post", InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "jqmPopupForm", 
                   LoadingElementId = "loadingMessage"
                 }))
            {%>

            .... some html input elements go here ...

                <input type="submit" value="Save Search" />

                <a class="jqmClose" href="#">Cancel</a>                      

        <%
            }%>
    </div>

现在，整个 jqmPopupForm div 正在被表单提交的结果替换。

如何关闭对话框并更新页面上的 div，而不是让用户关闭对话框？

Answer 1

您可以通过向表单添加值为 $('#jqmWindowContainer').jqmHide(); 的 onSubmit 属性来关闭模式窗口。这应该允许在关闭模式时提交表单。

更新：

在 ASP 代码的 ajaxOptions 部分中，添加属性 onSuccess 并指定关闭模式窗口的函数。

    <% using (Ajax.BeginForm("Save", "AssetSearch", 
         new AjaxOptions() 
             { HttpMethod = "Post", InsertionMode = InsertionMode.Replace,
               UpdateTargetId = "jqmPopupForm", 
               LoadingElementId = "loadingMessage",
               OnComplete = "validateForm"
               OnSuccess = "closeWindow"
             }))
        {%>    

其中 closeWindow 是将关闭模式窗口的 JavaScript 函数的名称，并且
validateForm 是 JavaScript 函数的名称，它将在提交之前验证表单。

参考资料：
http://msdn.microsoft.com/en-us/library/dd460243.aspx
http://msdn.microsoft.com/en -us/library/system.web.mvc.ajax.ajaxoptions.aspx