jQuery，MVC3:在模式对话框中提交部分视图表单 [英] jQuery, MVC3: Submitting a partial view form within a modal dialog

问题描述

我现在只是在玩 jQuery 和 MVC3，我想知道如何提交一个表单，它已被动态加载到 jQueryUI 对话框中?

I'm just playing around with jQuery and MVC3 at the moment, and am wondering how I can submit a form, which has been dynamically loaded into a jQueryUI dialog?

到目前为止，我的代码包括...

My code so far consists of...

Javascript/jQuery

$(document).ready(function () {

    $('.trigger').live('click', function (event) {

       var id = $(this).attr('rel');

       var dialogBox = $("<div>");

       $(dialogBox).dialog({
           autoOpen: false,
           resizable: false,
           title: 'Edit',
           modal: true,
           show: "blind",
           hide: "blind",
           open: function (event, ui) {
               $(this).load("PartialEdit/" + id.toString());
           }
        }
    });

    $(dialogBox).dialog('open');

})    });

cshtml

<h2>Detail</h2><a href="#" class="trigger" rel="1">Open</a>

控制器

public ActionResult PartialEdit(int id)
    {
        return PartialView(new EditViewModel() { Name = id.ToString() });
    }

    [HttpPost]
    public ActionResult PartialEdit(int id, FormCollection collection)
    {
        // What to put here???            
    }

局部视图

....@using (Html.BeginForm()){....Html.EditorFor(model => model.Name).....}....

如您所见，jQuery 中的 load() 调用了名为 PartialEdit 的 PartialView.

As you can see the load() in jQuery calls a PartialView named PartialEdit.

表单加载得很好，但我不知道如何实际提交表单?

The form is loading up just fine, but I'm stuck working out how I actually submit the form?

问题

如何让 UI 提交表单并关闭对话框?[HttpPost]PartialEdit 应该返回什么?

How do I get the UI to submit the form, and close the dialog? What should the [HttpPost]PartialEdit return?

目前我在局部视图中有提交按钮.单击时，表单被提交，并且浏览器执行 [HttpPost]PartialEdit 返回的任何操作(当前导致显示空白页面).

At the moment I have the submit button within the partial view. When clicked, the form is submitted, and the browser does whatever the [HttpPost]PartialEdit returns (currently resulting in a blank page being displayed).

但是，在提交之后，我想改为在客户端触发一个事件(可能是整个页面刷新，也可能是部分页面刷新，具体取决于所使用的上下文).我不知道从哪里开始?

However, after a submit I would like instead to trigger an event on the client side (Maybe a full page refresh, or a partial page refresh depending on the context it is used). I'm not sure where to start?

另外，我应该在 PartialView 中放置一个提交按钮，还是应该使用 jQuery-UI 对话框上的按钮?

Also, should I be placing a submit button within the PartialView, or should I use the buttons on the jQuery-UI dialog?

任何建议/指针表示赞赏.

Any suggestions/pointers appreciated.

推荐答案

感谢您的所有输入，目前对我有用的解决方案是将此功能附加到对话框上的提交"按钮....

Thanks for all your input, the solution that is working for me at the moment is having this function attached to the "Submit" button on the dialog....

"Submit": function () {
    var $this = this;
    var form = $('form', $this);
    if (!$(form).valid()) {
       return false;
    }

    $.post(form.attr("action"), JSON.stringify($(form).serializeObject()), function () {
        $($this).dialog("close").dialog("distroy").remove();
    });
}

...这是上述答案的一些组合.

...which is a bit of a combination of the answers above.

再次感谢.

这篇关于jQuery，MVC3:在模式对话框中提交部分视图表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！