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

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

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

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

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

解决方法

所以,你不需要一次考虑这一切.
首先在html前面和页面中间放置你的表单,附加一个动作,让它在没有Modal的情况下工作.
一旦你的表单逻辑工作,你可以循环jQuery.是否要从模态开始弹出窗口或使用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 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’…)).