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

问题描述

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

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

Javascript/jQuery

$(document).ready(function () {$('.trigger').live('click', function (event) {var id = $(this).attr('rel');var dialogBox = $("
");$(dialogBox).dialog({自动打开:假，可调整大小:假，title: '编辑',模态:真，显示:盲"，隐藏:盲"，打开:功能(事件，用户界面){$(this).load("PartialEdit/" + id.toString());}}});$(dialogBox).dialog('打开');}) });

cshtml

Detail
打开

控制器

public ActionResult PartialEdit(int id){返回 PartialView(new EditViewModel() { Name = id.ToString() });}[HttpPost]公共 ActionResult PartialEdit(int id, FormCollection 集合){//这里放什么???}

局部视图

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

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

表单加载得很好，但我一直在思考如何实际提交表单?

问题

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

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

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

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

感谢任何建议/指示.

解决方案

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

提交":function(){var $this = this;var form = $('form', $this);如果 (!$(form).valid()) {返回假；}$.post(form.attr("action"), JSON.stringify($(form).serializeObject()), function () {$($this).dialog("close").dialog("distroy").remove();});}

...这是上面答案的组合.

再次感谢.

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>

Controller

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

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

The Partial View

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

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?

Questions

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

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?

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.

Thanks again.

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