StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>JsonResult</code> is just a kind of <code>ActionResult</code> derived class that indicates that this action will return JSON instead of a view or something else.</p> <p>For example:</p> <pre><code>public ActionResult Foo() { var model = new MyViewModel { Foo = "bar" }; return Json(model); } </code></pre> <p>This controller action, when invoked, returns the JSON serialized representation of the model:</p> <pre><code>{"Foo":"bar"} </code></pre> <p>In addition to that it sets the <code>Content-Type</code> HTTP response header to <code>application/json</code>.</p> <p><code>Ajax.BeginForm</code> is an HTML helper used to generate a <code><form></code> 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.</p> <p>For example:</p> <pre><code>@using (Ajax.BeginForm("foo", "home", new AjaxOptions { OnSuccess = "onSuccess" })) { @Html.EditorFor(x => x.SomeProperty) <button type="submit">OK</button> } </code></pre> <p>This will generate a <code><form></code> element which will send an AJAX request when submitted to the <code>Foo</code> action. For this to work you need to include the following script to your page:</p> <pre><code><script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> </code></pre> <p>Now all that's left is to write this <code>onSuccess</code> javascript function and process the JSON results returned by the server:</p> <pre><code><script type="text/javascript"> var onSuccess = function(result) { alert(result.Foo); }; </script> </code></pre> <hr> <blockquote> <p>Can the functionality of each be accomplished by JQuery?</p> </blockquote> <p>Behind the scenes when you include the <code>jquery.unobtrusive-ajax.js</code>, all forms or links that were generated with <code>Ajax.*</code> helpers will automatically be parsed and AJAXified with jQuery. The HTML5 <code>data-*</code> attributes that those helpers generated will be processed and turned into AJAX calls. </p> <p>You could of course decide to use plain jQuery and none of the <code>Ajax.*</code> helpers. In this case you don't need including the <code>jquery.unobtrusive-ajax.js</code> script. You don't need using any of the Ajax.* helpers. </p> <p>To generate the form you could use a normal <code>Html.BeginForm</code> helper:</p> <pre><code>@using (Html.BeginForm("foo", "home", FormMethod.Post, new { id = "myform" })) { @Html.EditorFor(x => x.SomeProperty) <button type="submit">OK</button> } </code></pre> <p>and then in a javascript file use jQuery to subscribe to the <code>.submit</code> event of this form, cancel the default synchronous submission by returning false and sending an AJAX request instead:</p> <pre><code>$(function() { $('#myform').submit(function(){ $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function(result) { alert(result.Foo); } }); return false; }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload