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对话框上的按钮？

任何建议/指示赞赏。

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硬编码。在处理网址时始终使用网址助手。因此，让你的锚更有活力，而不是：

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

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

......这是上述答案的组合。

再次感谢。

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。你可以用这个来获得更多，但是这个答案太长了：）

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}）”

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

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

5 个答案: