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

Question

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

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

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

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

Answer 1

所以,你不需要一次考虑这一切.首先在html前面和页面中间放置你的表单,附加一个动作,让它在没有Modal的情况下工作.
一旦你的表单逻辑工作,你可以循环jQuery.无论你想要开始使用modality&popup还是使用带有jQuery的Asynchronous Post,都取决于你.我通常喜欢在它漂亮之前让它工作,所以我们将采取这条路线.如果使用标准<%Html.BeginForm ... {%>语法来定义表单,请将其删除.去老派html!(我知道你可以进一步自定义Html.Beginform但是更容易使用html)

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

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

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

在你的动作表单中,你可能会调用jQuery的帖子,其中帖子的回调隐藏了你的表单并更新了页面的其余部分.Api文档

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.
}

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

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