我是ajax /
jquery的新手,很难找到包含以下内容的简单示例:
> ASP.Net MVC RC1(或2)
> jquery
>模态形式
我希望用户能够单击视图(父级)中的链接/按钮,并显示包含表单的模式表单.模态对话框的内容应该是MVC视图(Child).
提交表单后,我希望模式对话框消失,并且要更新父视图的一部分.
解决方法
所以,你不需要一次考虑这一切.
首先在html前面和页面中间放置你的表单,附加一个动作,让它在没有Modal的情况下工作.
一旦你的表单逻辑工作,你可以循环jQuery.是否要从模态开始弹出窗口或使用jQuery的Asynchronous Post取决于你.我通常喜欢在它漂亮之前让它工作,所以我们将采取这条路线.
如果您使用标准<% Html.BeginForm … {%>用于定义表单的语法,将其删除.去老派html! (我知道你可以进一步自定义Html.Beginform但是更容易使用html)
首先在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’…)).