asp.net - MVC中jQuery对话框中表单的常用方法

标签 asp.net asp.net-mvc ajax asp.net-mvc-3

似乎有几种方法可以将jQuery对话框与ASP.NET MVC集成在一起。有没有一种特定的方法成为普遍接受的最佳实践方法?

例如:我有一个列表页面,在其中单击任何列出的项目的“编辑”将在jQuery对话框中打开一个表单,其中填充了该项目的详细信息。用户编辑详细信息,然后单击“保存”。如果在服务器端成功保存,则关闭对话框,并使用新数据重新构建列表。如果在服务器端保存失败,该对话框将保持打开状态,并向用户显示错误消息。


无JSON方法:每个“编辑”链接都是指向“编辑”控制器动作的HREF。该控制器操作将构建一个与“列表”视图相同的视图,另外还包括一个部分操作,以构建编辑表单,填充该表单并定义JavaScript以将其弹出以作为jquery对话框打开。 “保存”是一个表单发布;如果成功,则将重定向操作返回到列表页面。如果失败,它将重建显示错误消息的整个页面(包括在对话框中弹出的表单)。
全JSON方法:列表页面呈现一个空的编辑表单(隐藏),可以随时弹出打开到对话框中。 “编辑”链接调用本地javascript,后者执行ajax请求以获取完整的对象(我定义了一个控制器,该控制器将完整的对象作为JsonResult返回)。成功后,它将用对象的数据填充编辑表单,然后打开对话框。 “保存”链接调用本地javascript,该JavaScript将表单数据捆绑到json对象中,并调用以该json对象作为有效负载的后操作(我定义了一个控制器,该控制器期望该对象,尝试保存,并返回一个JsonResult,指示成功/故障+错误消息)。来自ajax请求的成功回调将评估返回的对象,并在仍然打开的jquery对话框中显示错误消息,或者关闭对话框并重新加载“列表”页面以获取列表中的新数据。
[编辑] Ajax-HTML方法:刚刚看到this SO discussion描述了另一种方法。 “编辑”调用本地javascript,后者执行ajax发布以获取对话框的完整HTML(我将编写一个返回部分视图的控制器:完全填充的表单)。它将返回的HTML呈现到jquery对话框中,还“重新连接”表单提交以对表单内容进行ajax-post(我将编写一个httpPost控制器,与上面的#2相同)。成功回调评估响应并填充错误消息或关闭对话框。
我没有想到的其他一些不错的方法?


选项1似乎更符合“纯” ASP.NET MVC。但是,它似乎具有很大的HTTP负载(因为我们会根据每个请求将整个页面传送回浏览器),并且服务器端性能会较慢(因为我们会根据每个请求重新构建列表)。

选项2与更现代的基于Ajax的Web应用程序(更小的HTTP有效负载,更精细的操作)似乎更加一致。但是,似乎许多控制器将是JSON控制器,并且我将编写大量客户端代码来将数据从JSON对象封送至表单字段,从表单字段封送,显示错误消息等。会错过许多很酷的MVC功能,例如EditorFor()和ValidationMessageFor()。就像我在围绕MVC系统工作而不是在使用它一样,这“感觉”到了。

[编辑:添加了选项3]选项3似乎是1和2之间的混合体。我使用“纯” MVC方法来构建和填充表单,并返回一个完整的HTML FORM标签。将HTML返回给ajax请求感觉很奇怪,因为它太冗长了,但是我可以克服它。 post操作是一个不错的,紧凑的JSON,它比ajax感觉更好。但是,不幸的是,有效负载对象是FormCollection而不是实际的viewmodel对象。看来我可以利用某些MVC便利(EditorFor()),但不能利用其他便利(ValidationMessageFor())。

我正在寻找做到这一点的“正确”方法,而不仅仅是将其结合在一起的最快方法。是的,是的,我知道没有普遍的“正确”方法。但是我敢肯定,有一些明显错误的方法可以做到,我想避免它们。

我对ASP.NET/C#很有经验,但对MVC还是很陌生。在此先感谢您的帮助!

[编辑]-出色的回答-我希望我可以奖励多个答案/赏金,因为我发现一些回答非常有用。但是由于我做不到,因此将最受好评的答案标记为答案。再次感谢所有答复者!

最佳答案

我的团队和我在编写启用AJAX的MVC应用程序方面都有丰富的经验,我们已经使用了所有3种方法。

但是,我最喜欢的绝对是AJAX-HTML方法-使用PartialView呈现对话框的内容,其中可能包括服务器端验证消息和任何其他逻辑。

这种方法的最大好处是关注点分离-视图始终负责呈现HTML,而JavaScript不必包含呈现JSON所需的任何文本,标记或“模板”。

另一个很大的优点是,所有强大的MVC功能都可用于呈现HTML:强类型视图,HtmlHelperDisplayForEditorFor模板,DataAnnotations等。这使得一致性和借出更加容易很好地进行重构。

请记住,没有必要坚持单一方法。当您的AJAX调用仅需要简单的操作(例如状态更新(如“成功”))时,只需使用stringJSON传达这些消息就可以了。需要HTML时使用PartialViews,而在需要通信时使用更简单的方法。

关于asp.net - MVC中jQuery对话框中表单的常用方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7759119/

相关文章:

c# - 跨页播放的音乐播放器

asp.net - 如果 WebAPI 根据客户端凭据进行身份验证,则获取用户信息

javascript - CORS 错误 header 允许来源 * http 与 https

javascript - $_POST[] 未捕获 HTML 表单输入

c# - 电子邮件地址编码问题

c# - ASP.NET 页面性能

c# - jQuery Ajax 发布不传递参数

javascript - 使用ajax和json保存数据

c# - ASP.net 中文本框的占位符

asp.net-mvc - 如何使用 Wix 在 IIS 7 上安装 ASP.Net MVC 应用程序?