Question

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?

Answer 1

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.

Answer 2

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

友情链接