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

Question

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

• ASP.Net MVC RC1(或 2)
• jquery
• 模态形式

我希望用户能够单击 View (父级)中的链接/按钮，并显示包含表单的模式表单。模式对话框的内容应该是 MVC View (子级)。

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

Answer 1

所以，你不需要一下子考虑这一切。 首先将您的表单放在页面前面和中心的 html 中，附加一个操作，然后让它在没有模态花哨的情况下工作。
一旦你的表单逻辑工作了，你就可以在 jQuery 中循环了。无论您想从模态和弹出窗口开始，还是从带有 jQ​​uery 的异步发布开始，都取决于您。我通常喜欢先让它发挥作用，然后再把它变得漂亮，所以我们就走这条路。 如果您使用标准 <% Html.BeginForm... { %> 语法来定义表单，请将其删除。去老派的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 并将其注入(inject)到 dom 中，但您仍然需要连接事件(同样，使用上面描述的 bind('submit'...) ) .