How to dispatch on the result of submiting an AJAX form in ASP.Net MVC?

Question

In ASP.Net MVC, having a form more or less like this:

<% using (Ajax.BeginForm(new AjaxOptions() { OnSuccess="onSuccess"})) {%>
  <p>
    <label for="Comment">Comment:</label>
    <%= Html.TextArea("Comment")%>
    <%= Html.ValidationMessage("Comment", "*")%>
  </p>
  <p><input type="submit" value="Submit comment" /></p>
<% } %>

How can the onSuccess Javascript function know whether the result is another version of the form because it didn't validate, a comment as a div to add to the list of comments or a log in page that should be pop up for logging in?

Answer 1

You can define that in your returning JSON or whatever transport method you use?

Not sure if that's what you're looking for, but also: this is how the onSuccess function is called:

YourFunction(ajaxContext);

AjaxContext is defined as follows:

AjaxContext ajaxContext = new AjaxContext(request, updateElement, loadingElement, ajaxOptions.InsertionMode);

Answer 2

You should replace the code inside your ajax form with a new partial view, then you will return that partial view from your controller. The partial view would consist in:

<p>
    <label for="Comment">Comment:</label>
    <%= Html.TextArea("Comment")%>
    <%= Html.ValidationMessage("Comment", "*")%>
</p>
<p><input type="submit" value="Submit comment" /></p>

This way, your partial view works just like a regular view. Unfortunately there is no simple way to execute javascript as a response (since you are responding with a view). It would be easier if your response was a Json string, but in that case, you can't use the AjaxForm because the Json string would be rendered on screen as a result of submitting the form (and processing its response). This may work though (I haven't tried it):

<p>
    <label for="Comment">Comment:</label>
    <%= Html.TextArea("Comment")%>
    <%= Html.ValidationMessage("Comment", "*")%>
</p>
<p><input type="submit" value="Submit comment" /></p>
<script type="text/javascript">
    function processResponse(data){
        // blah blah blah
    }
    processResponse(<%= ViewData["dataFromTheController"] %>);
</script>

Answer 3

Your could simply add different CSS classes to the root elements of your responses (for example .form, .comments, .login). And then (for example in jQuery):

var response = $(responseContent);
$('.form', response).each(function() {
    // $(this) is form
});
$('.comments', response).each(function() {
    // $(this) is comments
});
$('.login', response).each(function() {
    // $(this) is login page
});

Answer 4

How can the onSuccess Javascript function know whether the result is another version of the form because it didn't validate, a comment as a div to add to the list of comments or a log in page that should be pop up for logging in?

The short answer is that it cannot unless you explicitly validate it. That's because JSON is transported as a string and when the client side Javascript gets the string.

For starters you should implicitly know what sort of object to expect. If you are calling an web service @ Cars/List then you know the returned object will be a list of cars and you parse that appropriately in your client. You can run into errors which you should handle appropriately by retrying the request or logging them or showing an error message.

Answer 5

I would recommend you to use the jquery.form plugin, with this you can have a normal form to act like an ajax one, like this:

 <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 

<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>