Scott's Blog : AJAX

Using jQuery Ajax methods in ASP.NET MVC: $.get() and $.getJSON() vs. $.post()

srkirkland — Tue, 08 Sep 2009 18:49:57 GMT

I’m currently working on a project that uses ASP.NET MVC and jQuery to do some Ajax magic, and I ran into a minor (but maybe not obvious) issue when using $.post() against an MVC action that returns a JsonResult.

The core issue is that calling $.get or $.post does not by default treat the returned data as Json, which $.getJSON does. [Also, there is no $.postJSON]

First, let’s setup a little test case using a simple get request.

Calling An Action From jQuery – $.getJSON

   1: function DoAjaxCall() {

   2:     var url = '<%= Url.Action("AjaxTest", "Lookup") %>';

3:

   4:     $.getJSON(url,

   5:         null,

   6:         function(data) {

   7:             alert(data.name);

   8:         }

   9:     );

  10: }

Our JavaScript here simple calls $.getJSON(), passing along the action url and expecting back some data with a name property. The action is implemented as follows:

   1: public ActionResult AjaxTest()

   2: {

   3:     var data = new { name = "TestName"};

4:

   5:     return Json(data);

   6: }

When we run this, we get the expected result, a little popup that says “TestName”.

Calling the Action using $.post

Let’s make a few changes so that we are posting data to the action and expecting back Json. The JavaScript changes slightly, with $.getJSON turning into $.post.

   1: function DoAjaxCall() {

   2:     var url = '<%= Url.Action("AjaxTest", "Lookup") %>';

3:

   4:     $.post(url,

   5:         null,

   6:         function(data) {

   7:             alert(data.name);

   8:         }

   9:     );

  10: }

All we need to do to the action method is to add an attribute so that it will restrict itself to accepting post requests.

   1: [AcceptPost]

   2: public ActionResult AjaxTest()

   3: {

   4:     var data = new { name = "TestName"};

5:

   6:     return Json(data);

   7: }

Note that [AcceptPost] is the same thing as [AcceptVerbs(HttpVerbs.Post)]. It can be found in MVC Contrib.

When we run this example, we get a post to the correct method, but our alert box shows only ‘undefined’.

A trip into FireBug shows that our response was the following: {"name":"TestName"}

Everything looks good there, but the problem is obviously that $.post is not interpreting the return value as JSON. If you debug into the $.post callback you see that the value of the data parameter is this: "{\"name\":\"TestName\"}".

So it appears the result was stringified. The fix is to specify the type of data to be returned to the callback function as the fourth parameter to $.post(). Possible values are: "xml", "html", "script", "json", "jsonp", or "text".

Let’s try specifying the type parameter and setting it to ‘json’:

   1: function DoAjaxCall() {

   2:     var url = '<%= Url.Action("AjaxTest", "Lookup") %>';

3:

   4:     $.post(url,

   5:         null,

   6:         function(data) {

   7:             alert(data.name);

   8:         },

   9:         'json'

  10:     );

  11: }

Success! If we look at the POST response it is the same as before, but now we get the proper alert message to display “TestName”. If we debug through with firebug we see data is now an object with a single property of name (that has the value “TestName”).

What I learned

jQuery’s $.get and $.post do not natively parse the result as JSON. $.get has a helper called $.getJSON which will do the job for you, though you can achieve the same result by using $.get and passing the string ‘json’ as the fourth “type” parameter. Since there is no $.postJSON, if you are doing a jQuery ajax post and expecting a JsonResult, you must always pass ‘json’ as the fourth parameter to $.post.

using ASP.NET Validation from client code

srkirkland — Thu, 14 Feb 2008 00:49:30 GMT

I recently ran into a scenario where I needed to have a submit button exclusively run some client code, which is pretty common and usually handled by having some DOM element call an onclick method that does the work. However, there was quite a bit of validation that needed to be done and I did not want to have to rewrite the logic that the built in ASP.NET Validators provide. My solution was to make the form as if I was going to do a full postback, including adding validation to many different controls. Then I intercepted the postback by calling my custom JavaScript validation/action method and then returning false inside the OnClientClick property of the submitting button (which suppresses the postback, and also the validation). With the use of Firebug (an essential web development tool for Firefox) I was able to drill into the WebForm__DoPostBackWithOptions() method (included in the WebResource.axd JavaScript include) that ASP.NET uses. The first few lines are as follows:

var validationResult = true;

 if (options.validation) {

 if (typeof(Page_ClientValidate) == 'function') {

 validationResult = Page_ClientValidate(options.validationGroup);

From there you can see that all of the work is done inside the Page_ClientValidate("ValGroup") function, which you can call from your own code to get the best validation without the postback. What follows is a quick example of how you would use this in practice:

ASP.NET

<asp:TextBox runat="server" ID="tbHours" Width="50px"></asp:TextBox>

<asp:RequiredFieldValidator ID="rvalAddHours" runat="server" ControlToValidate="tbHours" ValidationGroup="AddEntry" ErrorMessage="* Hours Required" Display="Dynamic"></asp:RequiredFieldValidator>

<asp:RangeValidator ID="rgValAddHours" runat="server" ControlToValidate="tbHours" ValidationGroup="AddEntry" ErrorMessage="* Hours Must Be 0-24" Display="Dynamic" Type="Double" MinimumValue="0" MaximumValue="24"></asp:RangeValidator>

<asp:Button ID="btnAddEntry" runat="server" OnClientClick="ValidateAndAddNewEntry(); return false;" CausesValidation="true" ValidationGroup="AddEntry" Text="Create" />

JavaScript

function ValidateAndAddNewEntry()

    var res = Page_ClientValidate("AddEntry");

    if ( res == true )

        //Do work

Happy Coding!

Animate a GridView row using the AJAX Control Toolkit from client code

srkirkland — Thu, 29 Nov 2007 22:00:36 GMT

I've run across a few situations in which I wanted to animate a certain row in a GridView as a result of some client action. The reason that this is a little tricky is that the AJAX Control Toolkit's Animation Extender needs to act on a certain Target Control (identified of course by the TargetControlID) and you can't point the target control as a specific grid view row (not that you would even want to).

Both methods I will discuss use the same actual animation code -- they just differ in the way in which the animation is called. I'll begin with the common animation code, which flashes the row with a color change animation (basically a fading highlight).

function animateRow(affectedRow)

 //first save the existing row color so you can restore it after the animation is completed

 //you may have to do some post-processing to make sure the affectedRowColor is a hex value like #FFFFFF

 var affectedRowColor = affectedRow.style.backgroundColor;

 animation = new AjaxControlToolkit.Animation.ColorAnimation(affectedRow, 2, 32, "style", "backgroundColor", "#ffff99", affectedRowColor);

 animation.play();

Basically the above code uses the AjaxControlToolkit Animation API to create a ColorAnimation that acts on the affected row, which will cause the entire row to highlight and then fade back to its original color.

The quick method for getting access to the affected row can be used when an element of that row initiates the animation (for example, click on an update button flashes the row that it is contained in). The code would look something like this:

<asp:TemplateField HeaderText="Highlight My Row">

 <ItemTemplate>

 <input type="button" value="Click Me" onclick="animateRow(this.parentNode.parentNode);" />

 </ItemTemplate>

</asp:TemplateField>

The onclick event of this template field button calls the above animateRow function and passes it's grandparent node (this.parentNode.parentNode). Since the DOM tree has the element inside a <td/> which is inside a <tr/>, we know that the element's grandparent is the row to animate.

The second method involves giving each row a unique identifier during the handling of the rowCreated event. The details will change depending on your implementation, but lets assume that you are using a GridView with a bound ID property (which is also a datakey). Then you need to handle the rowCreated event and add an "id" attribute to each row:

protected void gv_RowCreated(object sender, GridViewRowEventArgs e)

 GridView gview = (GridView)sender;

 e.Row.Attributes.Add("id", gview.DataKeys[e.Row.RowIndex]["id"].ToString());

This will allow you to dynamically update any row by executing the following javascript:

var id = "idhere";

var affectedRow = $get(id);

animateRow(affectedRow);

With a few modifications you can get some pretty dynamic per-row animations while letting the AJAX Control Toolkit do all the heavy lifting. Enjoy!

Changing the ASP.NET AJAX Control Toolkit Calendar display mode

srkirkland — Tue, 20 Nov 2007 20:04:17 GMT

The ASP.NET AJAX Control Toolkit's Calendar (Click Here To See The CalendarExtender Control In Action) is a very nice control that allows you implement a client side dynamic calendar for date-picking functionality. One interesting feature is the ability to change the calendar from the default "days" mode (shows the days in one month) to "months" mode (showing all of the months in the current year) by clicking on the calendar title. Another click on the title will change the calendar into "years" mode, which shows 12 years at a time.

One feature that would be nice is the ability to start the calendar control in any of the desired modes ("days", "months", or "years") depending on the type of interaction with the calendar that is most appropriate. For example, a current project of mine requires entering employee hire dates -- which are almost always at least a few years old.

The following is some simple code that allows you to get the desired functionality (in this case, we switch to the "years" mode) by handling the Calendar's OnClientShown event.

Step 0 -- The initial Calendar control hooked up to a TextBox

<asp:TextBox ID="txtTitleLength" runat="server"></asp:TextBox>

<AjaxControlToolkit:CalendarExtender ID="calTitleLength" runat="server"

TargetControlID="txtTitleLength">

</AjaxControlToolkit:CalendarExtender>

Step 1 -- Add a callback to the OnClientShown event (here: "calendarShown")

<asp:TextBox ID="txtTitleLength" runat="server"></asp:TextBox>

<AjaxControlToolkit:CalendarExtender ID="calTitleLength" runat="server"

TargetControlID="txtTitleLength"

OnClientShown="calendarShown">

</AjaxControlToolkit:CalendarExtender>

Step 2 — Handle the OnClientShown event (which takes 2 parameters: "sender, e") and then call the calendar control’s _switchMode() method

function calendarShown(sender, e) { sender._switchMode("years"); }

That’s all there is to it! One note: you must call the switchMode() method in the OnClientShown event and not the OnClientShowing event for the effect to work properly.