jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery,MVC3:在模态对话框中提交局部视图表单大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我现在只是在玩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对话框上的按钮?

任何建议/指针赞赏.

解决方法

尝试一下这些内容
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
});

大佬总结

以上是大佬教程为你收集整理的jQuery,MVC3:在模态对话框中提交局部视图表单全部内容,希望文章能够帮你解决jQuery,MVC3:在模态对话框中提交局部视图表单所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: