Question

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

ASP.Net MVC RC1（或2）
jquery的
模态表格

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

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

Answer 1

所以，你不需要一次考虑这一切。首先在html的前面和页面中间放置你的表单，附加一个动作，然后让它在没有Modal功能的情况下工作。
一旦你的表单逻辑工作，你可以循环jQuery。是否要从模态开始弹出窗口或使用jQuery的Asynchronous Post取决于你。我通常喜欢在它漂亮之前让它工作，所以我们将采取这条路线。如果您使用标准＆lt;％Html.BeginForm ... {％＆gt;用于定义表单的语法，将其删除。去老派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插件或类似的东西为你做。然后，只需要连接事件来显示和隐藏弹出窗口，你就可以了。

如果您的意图是在单击“show”链接时异步加载该表单，那会更麻烦，但仍然可行。您可以使用jQuery.Load（Api Documentation）来拉取html并将其注入dom，但您仍然需要连接事件（再次，使用bind（'submit'...）描述上文）。

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

1 个答案: