使用 jquery 的 asp.net mvc RC 中的模态表单答案

【问题标题】：Modal Form in asp.net mvc RC using jquery使用 jquery 的 asp.net mvc RC 中的模态表单
【发布时间】：2009-03-07 18:19:08
【问题描述】：

我是 ajax / jquery 新手，很难找到包含以下内容的简单示例：

ASP.Net MVC RC1（或 2）
jquery
模态形式

我希望用户能够单击视图（父级）中的链接/按钮并显示一个包含表单的模式表单。模态对话框的内容应该是 MVC 视图（子视图）。

提交表单后，我希望模式对话框消失并更新父视图的一部分。

【问题讨论】：

标签： jquery asp.net-mvc modal-dialog simplemodal

【解决方案1】：

因此，您无需一次考虑所有问题。首先在 html 中将表单放在页面的前面和中心，附加一个动作，让它在没有模态幻想的情况下工作。
一旦你的表单逻辑工作，你就可以在 jQuery 中循环。无论您是想从模态和弹出窗口开始，还是从带有 jQuery 的异步帖子开始，都取决于您。我通常喜欢在让它变得漂亮之前让它工作，所以我们会走那条路。如果您使用标准语法来定义您的表单，请将其删除。去老学校的html！（我知道你可以进一步自定义 Html.Beginform 但只使用 html 更容易）

<form action="<%= Url.ActionLink(...)%>" id="SomeForm">

现在你可以在你的 document.ready 或者任何你初始化 JS 的地方连接 jQuery。

$('#SomeForm').bind('submit', youractionfunction);

在您的操作表单中，您可能会调用 jQuery 的帖子，帖子的回调会隐藏您的表单并更新页面的其余部分。 Api Documentation

function youractionfunction(e){
  $.post($(e).attr('action'), // we get the action attribute (url) from the form
         { title : $('#titleBox').val()}, // the values we're passing
         yourCallbackFunction); 
  return false;  // This is important, this will stop the event from bubbling and your form from submitting twice.
}

现在你有了一个 ajaxy 表单，所以你可以处理回调了。

function yourCallbackFunction(data)
{
    // do something with the result.
}

现在我们可以谈谈模态了。这通常有点痛苦，但你可以使用像 this 这样的 jQuery 插件或类似的东西来为你做这件事。然后只需连接事件以显示和隐藏弹出窗口，就可以了。

如果您的意图是在单击“显示”链接时异步加载该表单，那会有点麻烦，但仍然可行。您可以使用 jQuery.Load (Api Documentation) 来拉取 html 并将其注入到 dom 中，但您仍然必须连接事件（再次，使用上述的 bind('submit'...)） .

【讨论】：

@Rob：感谢您的详细回复。这让我开始了。