ASP.NET MVC2 中的 Ajax 注释表单,如何?
一段时间以来,我一直在尝试 MVC 的不同方面,但我已经遇到了这样的情况:我不确定解决问题的最佳方法是什么。我希望 SO 社区能够帮助我:P
我在互联网上看到了许多 Ajax.BeginForm 的示例,这似乎是一个非常漂亮的想法。例如,您有一个下拉菜单,您可以在其中选择一位客户 - 选择一个客户后,它将在页面上的某个占位符中加载该客户的详细信息。这工作得很好。
但是,如果您想在框中加入一些验证该怎么办?
假设一下,想象一个文章页面,底部有用户评论。评论区域下方有一个 ajax-y“添加评论”框。当用户添加评论时,它将显示在评论区域中最后一条评论的下方。
如果我将 Ajax.BeginForm 设置为将调用结果附加到注释区域,它将正常工作。但如果发布的数据无效怎么办?我必须显示用户验证错误,而不是在评论区域附加“成功”评论。
此时,我决定 Ajax.BeginForm 内的区域将位于部分内容内,并且表单的提交将返回该部分内容。验证工作正常。每次提交时,我们都会重新加载表单元素内的内容。但是如何将成功的评论添加到顶部呢?
其他需要考虑的事项:评论表单还有一个“预览”按钮。当用户单击“预览”时,我应该将渲染的评论加载到预览框中。这也可能位于表单区域内。
我正在考虑使用 Json 结果来代替。当用户提交表单时,服务器代码将生成一个带有 Success 值的 Json 对象,以及 html 呈现的部分作为一些属性。像这样的东西
{ "success": true, "form": "<html form data>", "comment": "successful comment html to inject into the page" }
这将是一个完美的解决方案,除了 MVC 中无法将部分渲染到控制器内部的字符串中(上下文分离,还记得吗?)。
UPD:似乎没有人知道这个问题的答案。这是否意味着没有办法做到这一点,或者你们只是不知道,伙计们?
I've been playing around with different aspects of MVC for some time now, and I've reached a situation where I'm not sure what would be the best way to solve a problem. I'm hoping that the SO community will help me out here :P
I've seen a number of examples of Ajax.BeginForm on the internet, and it seems like a very nifty idea. E.g. you have a dropdown where you select a customer - and on selecting one it will load this client's details in some placeholder on the page. This works perfectly fine.
But what to do if you want to tie in some validation in the box?
Just hypothetically, imagine an article page, and user comments in the bottom. Below the comments area there's an ajax-y "Add comment" box. When a user adds a comment, it will appear in the comments area, below the last comment there.
If I set the Ajax.BeginForm to Append the result of the call to the Comments area, it will work fine. But what if the data posted is not valid? Instead of appending a "successful" comment to the comments area I have to show the user validation errors.
At this point I decided that the area INSIDE the Ajax.BeginForm will be inside a partial, and the form's submits will return this partial. Validation works fine. On each submit we reload the contents inside the form element. But how to add the successful comment to the top?
Other things to consider: The comment form also has a "Preview" button. When the user clicks on Preview, I should load the rendered comment into a preview box. This will probably be inside the form area as well.
I was thinking of using Json results instead. When the user submits the form, the server code will generate a Json object with a Success value, and html rendered partials as some properties. Something like
{ "success": true, "form": "<html form data>", "comment": "successful comment html to inject into the page" }
This would be a perfect solution, except there's no way in MVC to render a partial into a string, inside the controller (separation of context, remember?).
UPD: Seems like nobody knows an answer to this one.. Does it mean that there's no way to do this, or you just don't know, guys?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
经过更多的考虑+获得更多的MVC经验后,我决定分解这个问题,并得出以下结论。不确定是否有人会觉得它有用
对于需要字段验证的 Ajax.BeginForm,提交的返回应该返回表单的 html。这样,如果验证失败,响应将包含错误消息,并且界面将看起来无缝。
结果也很可能包含整个表单,包括它的声明。
本例中的预览是一个简单的问题。当用户单击预览按钮时,可以发布表单,结果将包含填充的表单+预览框。或者,预览按钮可以是 Ajax.LinkButton,它将序列化表单,将数据发布到服务器,然后将其呈现为注释。然后客户端的 js 会将这个预览放入所需的容器中。
成功提交后,有几个选项,具体取决于要求和布局。
a) 表单提交的结果可以返回评论+空白表单(准备新评论)
例如,当评论表单位于所有评论下方时,这看起来就像评论已添加到表单底部
b) 结果可以包含空白表单 + 一个小的 js 脚本,该脚本将更新评论区域/将最新评论加载到页面
c) 它还可以强制刷新父页面,以确保新发布的评论立即对用户可见。
基本上,此选择取决于特定案例的要求。
After giving it more consideration + getting more experience with MVC, I decided to break down the problem, and came to the following conclusion. Not sure if anyone will find it useful
With an Ajax.BeginForm that requires field validation, the return from the submit should return the form's html. This way, if the validation failed- the response will contain the error messages, and the interface will look seamless.
The result will also most likely contain the whole form, including the declaration of it.
The preview in this case is a simple issue. When the user clicks on the preview button, the form can be posted, and the result will contain the populated form + the preview box. Alternatively, the Preview button can be an Ajax.LinkButton that will serialize the form, post the data to the server, that will render it into a comment. The js on the client side will then put this preview in the required container.
On successful submit, there are a couple options, depending on the requirements and the layout.
a) The result of the form submit can return the comment + the blank form (ready for a new comment)
e.g. when the comment form is below all the comments, this will look as if the comment has been added to the bottom of the form
b) The result can contain the blank form + a small js script that will update the comments area / load the latest comment to the page
c) It can also force a refresh of the parent page, to ensure the newly posted comment will be immediately visible to the user.
Basically, this choice depends on the requirements of the particular case.
以下是如何使用 jQuery 发布以及如何处理验证中的错误的示例。
http://jvance.com/blog/2010/02/20/MakingAnAjaxFormWithJQueryInASPdotNETMVC.xhtml
Here is an example how to post using jQuery and how to deal with error in the validation.
http://jvance.com/blog/2010/02/20/MakingAnAjaxFormWithJQueryInASPdotNETMVC.xhtml