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

Posted 2023-03-06

【中文标题】jQuery，MVC3：在模式对话框中提交部分视图表单

【英文标题】：jQuery, MVC3: Submitting a partial view form within a modal dialog

【发布时间】：2011-09-20 13:30:27

【问题描述】：

我现在只是在玩 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 对话框上的按钮？

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

【参考方案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
);

【讨论】：

非常感谢您的建议。目前的问题是 $('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，你能定义isn't working吗？当您在 FireBug 控制台中记录此内容时，$('form', html) 选择器是否返回表单元素？ submit 回调执行了吗？

抱歉含糊了！未执行提交回调。 $('form', html) 返回长度：0。

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

不高兴-还是和以前一样的结果！我会继续玩下去，如果我解开这个谜团，我会告诉你的！！

【参考方案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();
    );

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

再次感谢。

【参考方案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); 
    );
);

并根据需要从定义 IsError、Error 或 Message 的 HttpPost PartialEdit 操作返回 JSON 对象。你可以对此更感兴趣，但是这个答案太长了:)

【参考方案4】：

好吧，jQuery 提交什么都不做，你需要在局部视图中有一个表单，然后当 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)"

【参考方案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()
                    );
                
                              
        );