jQuery、MVC3：在模态对话框中提交部分视图表单

Question

我目前正在使用jQuery和MVC3进行尝试，并想知道如何提交一个已经动态加载到jQueryUI对话框中的表单？

我的代码如下...

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。

表单已成功加载，但我卡在了如何实际提交表单的问题上？

问题

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

目前，我将提交按钮放在了局部视图中。单击后，表单被提交，浏览器执行[HttpPost]PartialEdit返回的操作（当前结果是显示一个空白页面）。

然而，在提交后，我希望触发客户端事件（可能是完全页面刷新或部分页面刷新，具体取决于使用情况）。我不确定从哪里开始？

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

欢迎提出任何建议/指针。

- ETFairfax

Answer 1

尝试以下方法：

open: function (event, ui) {
    $(this).load("PartialEdit/" + id.toString(), function(html) {
        $('form', html).submit(function() {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function(res) {
                    if (res.success) {
                        $(dialogBox).dialog('close');
                    }
                }
            });
            return false;
        });
    });
}

控制器操作可以返回JSON：

[HttpPost]
public ActionResult PartialEdit(int id, FormCollection collection)
{ 
    // do some processing ...

    // obviously you could also return false and some error message
    // so that on the client side you could act accordingly
    return Json(new { success = true });
}

改进的最后一部分是这个：

"PartialEdit/" + id.toString()

在ASP.NET MVC应用程序中，永远不要进行硬编码的URL操作。处理URL时，请始终使用URL助手。因此，使您的锚点更加动态化，而不是：

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

使用:

@Html.ActionLink(
    "Open", 
    "PartialEdit", 
    new {
        id = "1" // you probably don't need a rel attribute
    }, 
    new { 
        @class = "trigger"
    }
)

接下来：

$(this).load(this.href, function(html) {
    ...
    return false; // now that the anchor has a href don't forget this
});

- Darin Dimitrov

---

非常感谢您的建议。目前的问题是 $('form', html).submit(function() {...}); 不起作用。我的部分视图需要特殊处理吗？到目前为止，它只是这样的...@using (Html.BeginForm()) { @Html.ValidationSummary(true)

@Html.LabelFor(model => model.Name)

@Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name)

} - ETFairfax

@ETFairfax，您能否定义一下“不起作用”是什么意思？当您在FireBug控制台中记录此时，$（'form'，html）选择器是否返回表单元素？submit回调是否被执行？ - Darin Dimitrov

抱歉说得不够清楚！提交回调没有被执行。 $('form'，html) 返回长度为0。 - ETFairfax

@ETFairfax，好的，试着给表单一个唯一的ID，并在选择器中使用它：$('#myForm').submit(...);。 - Darin Dimitrov

没用 - 仍然和之前一样的结果！我会继续尝试并让你知道如果我解开了这个谜题！！ - ETFairfax

Answer 2

感谢您的所有建议，目前对我有效的解决方案是将此函数附加到对话框上的“提交”按钮....

"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();
    });
}

......这有点结合了上面的答案。

再次感谢。

- ETFairfax

Answer 3

按钮在部分视图下是可以的，但是看起来你想通过 AJAX 提交表单，这样就不会刷新页面。你可以像这样做：

$('#theIdOfYourForm').live('submit', function(event){
    event.preventDefault();
    var form = $(this);
    $.post(form.attr('action'), form.serialize(), function(data){
        if (data.IsError) { alert(data.Error); }
        else { alert(data.Message); }
    });
});

并从您的HttpPost PartialEdit操作返回一个JSON对象，其中定义IsError、Error或Message。您可以更加高级地处理此问题，但这样答案将会过长 :)

- Milimetric

Answer 4

嗯，jQuery的submit不做任何事情，你需要在局部视图中放置一个表单，然后当执行jQuery对话框提交时，调用已经定义了操作的表单提交。

请查看下面的代码，这是非ajax提交

      }); 
    $dialog
        .dialog("option", "buttons", {
            "Submit":function(){
                var dlg = $(this);
                var $frm = $(frm);
                if(onFormSubmitting != null)
                    onFormSubmitting();
                $frm.submit();
        },
        "Cancel": function() { 
            $(this).dialog("close");
            $(this).empty();
        }    

    });

关于您在帖子操作中的问题，您应该执行业务逻辑，然后调用“Return RedirectToAction（“viewname”，new {id=xxx}）”。

- Vincent

Answer 5

今天我遇到了一个类似的问题，我必须提交一个在部分视图中的表单 - 而这个部分视图又在对话框中，而这个对话框是从另一个表单创建的！

关键是获取部分视图中表单的处理程序并将其序列化。

以下是我如何在第一个表单中定义我的对话框：

var udialog = $('#userdialog').dialog({
            open: function(event, ui) {                    
                $(this).load('xx');
            },
            buttons: {
                "Submit" : function(){                         
                    $.ajax(
                         {
                             url: 'xx',
                             type: "POST",
                             async: true,
                             data: $('form', $(this)).serialize()
                    });
                }
             }                 
        });

- gunnerz