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?

我的code到目前为止由...

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中的负载（）调用一个名为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开发的用户界面对话框中的按钮？

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

任何建议/ AP指针preciated。

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屋！