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

发布于 2024-07-14 14:41:32 字数 232 浏览 5 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

み青杉依旧 2024-07-21 14:41:32

所以，你不需要一下子考虑所有事情。
首先将您的表单放在页面前面和中心的 html 中，附加一个操作，然后让它在没有模态花哨的情况下工作。
一旦你的表单逻辑工作了，你就可以在 jQuery 中循环了。您是否想从模态开始？弹出窗口或使用 jQuery 的异步发布取决于您。我通常喜欢先让它发挥作用，然后再让它变得漂亮，所以我们会采取这条路线。
如果您使用标准 <% 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 插件，例如 this 或其他插件类似于为你做的。然后，只需连接事件来显示和隐藏弹出窗口，就可以了。

如果您的目的是在单击“显示”链接时异步加载该表单，则有点麻烦，但仍然可行。您可以使用 jQuery.Load (Api 文档) 提取 html 并将其注入到dom，但您仍然需要连接事件（再次使用上面描述的 bind('submit'...) ）。

So, you don't need to think about it all at once.
First make your form in html front and center on the page, attach an action, and get it to work without Modal fanciness.
Once your form logic works you can loop in jQuery. Whether you want to start with modality & the popup or with the Asynchronous Post with jQuery is up to you. I usually like to make it work before i make it pretty, so we'll take that route.
If you use the standard <% Html.BeginForm... { %> syntax to define your form, remove it. Go old school html! (I know you can further customize the Html.Beginform but it's easier to just use html)

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

Now you can wire up jQuery in your document.ready, or wherever you initialize your JS.

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

In your action form you'll probably be calling jQuery's post where the callback of the post hides your form and updates the rest of the page. 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.
}

Now you have an ajaxy form, so you can work on the callback.

function yourCallbackFunction(data)
{
    // do something with the result.
}

Now we can talk about modality. It's typically a bit of a pain, but you can use a jQuery plugin like this or something similar to do it for you. Then it's just a matter of wiring up events to show and hide the popup, and you're all set.

If your intent was to have that form loaded asynchronously when the "show" link is clicked, that's a bit more troublesome, but still doable. You can use jQuery.Load (Api Documentation) to pull the html and inject it into the dom, but you'll still have to wire up the events (again, with the bind('submit'...) described above).

回复收藏 0 原文

~没有更多了~