Question

I am trying to understand the difference between JsonResult and Ajax.BeginForm work? Can someone be kind enough to give examples of each? Can the functionality of each be accomplished by JQuery? If so, how?

Thanks

Answer 1

JsonResult is just a kind of ActionResult derived class that indicates that this action will return JSON instead of a view or something else.

For example:

public ActionResult Foo()
{
    var model = new MyViewModel
    {
        Foo = "bar"
    };
    return Json(model);
}

This controller action, when invoked, returns the JSON serialized representation of the model:

{"Foo":"bar"}

In addition to that it sets the Content-Type HTTP response header to application/json.

Ajax.BeginForm is an HTML helper used to generate a <form> element but which will be submitted using AJAX to the server. So if you point this form to the controller action returning JSON you will be able to retrieve the results of this JSON in the success callback. The results will be automatically parsed into a javascript object that you can access its properties.

For example:

@using (Ajax.BeginForm("foo", "home", new AjaxOptions { OnSuccess = "onSuccess" }))
{
    @Html.EditorFor(x => x.SomeProperty)
    <button type="submit">OK</button>
}

This will generate a <form> element which will send an AJAX request when submitted to the Foo action. For this to work you need to include the following script to your page:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

Now all that’s left is to write this onSuccess javascript function and process the JSON results returned by the server:

<script type="text/javascript">
    var onSuccess = function(result) {
        alert(result.Foo);
    };
</script>

---

Can the functionality of each be accomplished by JQuery?

Behind the scenes when you include the jquery.unobtrusive-ajax.js, all forms or links that were generated with Ajax.* helpers will automatically be parsed and AJAXified with jQuery. The HTML5 data-* attributes that those helpers generated will be processed and turned into AJAX calls.

You could of course decide to use plain jQuery and none of the Ajax.* helpers. In this case you don’t need including the jquery.unobtrusive-ajax.js script. You don’t need using any of the Ajax.* helpers.

To generate the form you could use a normal Html.BeginForm helper:

@using (Html.BeginForm("foo", "home", FormMethod.Post, new { id = "myform" }))
{
    @Html.EditorFor(x => x.SomeProperty)
    <button type="submit">OK</button>
}

and then in a javascript file use jQuery to subscribe to the .submit event of this form, cancel the default synchronous submission by returning false and sending an AJAX request instead:

$(function() {
    $('#myform').submit(function(){
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                alert(result.Foo);
            }
        });
        return false;
    });
});