Nathan Bridgewater » jQuery

Cross-domain JsonP using Asp.net MVC and jQuery

Nathan — Sun, 25 Jul 2010 05:27:01 +0000

So there are a couple great walkthroughs out there that talk about using jquery jsonp in cross-domain scenarios. They talk a lot about the requesting and server side, but not so much about how to use the callback. So to clarify, I’ll step through what I did to make this work including providing my implementation for a new ActionResult called JsonPResult for MVC.

Starting out, client-side on the calling page, I setup my script. This function makes a request to the server and expects a jsonp response back. The default “success” handler is optional here and will be invoked along-side the one you specify for jsonp.

$.ajax({
    url: 'http://other-domain/api/GetInformation',
    data: { key: 'some data key, this parameter is optional' },
    type: "GET",
    dataType: "jsonp",
    jsonpCallback: "localJsonpCallback"
});

function localJsonpCallback(json) {
    //do stuff...
}

We need to setup the server side. I’m using Asp.Net MVC, so I built this new ActionResult for handling Jsonp GET requests. I copied most of the code from the original JsonResult class in System.Web.MVC Ms-Pl code. Before I show you that, you should see it in action. Here I have a controller action that uses JsonpResult:

public JsonpResult GetInformation(string key)
{
    var resp = new Core.Model.CustomObject();
    if (validateKey(key))
    {
        resp.Data = "some custom message";
        resp.Success = true;
    }
    else
        resp.Message = "unauthorized";

    return this.Jsonp(resp); //using extension method
}

This automatically handles all the fancy Jsonp work that goes on behind the scenes. It serializes the custom object into Json and wraps it with the callback function. So your response appears something like this:

localJsonpCallback({"Data":{"Success":true, Message: "some custom message"}});

I setup an extension method to use controller.Jsonp(object) just as you do the existing controller.Json(object) method already available. This should make it a lot easier to handle. It will inspect the call for the json callback itself so you also don’t have to manually pull it from the request. It will also work with the two different types of callback requests parameters in use out there like: “jsoncallback” and “callback.”

/* ****************************************************************************
 *
 * Copyright (c) Microsoft Corporation. All rights reserved.
 *
 * Content of this class was mostly derived from the original
 * JsonResult class in the System.Web.Mvc 2.0 RTM Assembly. This
 * has beeen slightly extended for use with JSONP calls.
 *
 * This software is subject to the Microsoft Public License (Ms-PL).
 * A copy of the license can be found in the license.htm file included
 * in this distribution.
 *
 * You must not remove this notice, or any other, from this software.
 *
 * ***************************************************************************/

namespace System.Web.Mvc
{
    using System;
    using System.Text;
    using System.Web;
    using System.Web.Mvc.Resources;
    using System.Web.Script.Serialization;

    public class JsonpResult : ActionResult
    {

        public JsonpResult()
        {
        }

        public Encoding ContentEncoding
        {
            get;
            set;
        }

        public string ContentType
        {
            get;
            set;
        }

        public object Data
        {
            get;
            set;
        }

        public string JsonCallback { get; set; }

        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
            {
                throw new ArgumentNullException("context");
            }

            this.JsonCallback = context.HttpContext.Request["jsoncallback"];

            if (string.IsNullOrEmpty(this.JsonCallback))
                this.JsonCallback = context.HttpContext.Request["callback"];

            if (string.IsNullOrEmpty(this.JsonCallback))
                throw new ArgumentNullException("JsonCallback required for JSONP response.");

            HttpResponseBase response = context.HttpContext.Response;

            if (!String.IsNullOrEmpty(ContentType))
            {
                response.ContentType = ContentType;
            }
            else
            {
                response.ContentType = "application/json";
            }
            if (ContentEncoding != null)
            {
                response.ContentEncoding = ContentEncoding;
            }
            if (Data != null)
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                response.Write(string.Format("{0}({1});", this.JsonCallback, serializer.Serialize(Data)));
            }
        }
    }

    //extension methods for the controller to allow jsonp.
    public static class ContollerExtensions
    {
        public static JsonpResult Jsonp(this Controller controller, object data)
        {
            JsonpResult result = new JsonpResult();
            result.Data = data;
            result.ExecuteResult(controller.ControllerContext);
            return result;
        }
    }
}

When the response is downloaded from the client, it’s invoked and you handle it just as you normally would with any other getJSON success handler. So hopefully this helps clear up any confusion with using JsonP. There’s about a thousand suggestions I found on doing cross domain JSON and this was just one of the many. I also wrote a simple JsonWebClient class in .Net that will permit the server-side proxy POST to another domain if anyone is interested. I did that before I learned about CORS (preflight post) or this, JsonP. Comments are welcome!

Sample Code

Additionally, here is a simple, working demo showing how this works. Be sure to start both websites. Then browse the ClientWebsite and click Test JSONP. This will perform a JSONP GET to the second website.

Download the sample

This project is also in the IWS Snippets project.

Using jQuery Modal Dialog Confirmation with an ASP.NET Server Control

Nathan — Tue, 01 Dec 2009 22:07:07 +0000

So the other day, I wanted to build a confirmation dialog using jQuery with an existing Asp.Net web forms Button control. I wanted this dialog to be modal; and upon confirmation, I wanted it to postback using the Button’s server-side click event. After toying with the jQuery dialog, I realized that its dialog doesn’t suspend the process while waiting for user input. So it also causes problems with confirmation since clicking the original button will always postback. So with a few tweaks, you can prevent the postback and emulate the click event pretty easily.

Setup the Dialog and Postback Script

In my application, we may click the button multiple times. So you’ll need to initialize it on load and actually open it later. As you can see below, we’re making our dialog modal and setting its autoOpen to false to prevent it from opening during initialization. The dialog contains two buttons, and in this initialization, we can define their handler code. The confirmation button “Yes, I Understand and Agree” runs a chunk of code emulates the server control Click event on Button1. Notice I used the inline server-side script to gain access to the Page.ClientScript object, which contains a nice handful of helper functions for javascript.

$().ready(function() {
    $("#ConfirmPanel").dialog(
    { autoOpen: false,
        modal: true,
        bgiframe: true,
        width: 400,
        height: 300,
        buttons: {
            'Youbetcha': function() {
                <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
            },
            'No Thanks': function() {
                $(this).dialog('close');
            }
        }
    })
});

Open the Dialog with OnClientClick

Next we’ll open the dialog each time our original server control button is clicked. You use the OnClientClick property to do this.

$("#ConfirmPanel").dialog('open'); return false;

We always return false here. Since the dialog doesn’t suspend the process, it will always finish and immediately postback. So by returning false, we’re preventing the button from posting back and allowing the jquery dialog to appear.

Here’s the full Asp.Net markup:




    Terms and Conditions
    By accepting, you agree to the following:
        

            Are you really, really sure????

The Result

Clicking Youbetcha fires the Click event for our Button1.

Updated: 2/16/2010

To answer Matt’s question, I setup a simple web forms page with a data grid and a button within its rows. All the buttons are wired to one event handler and their command argument property is used to provide identifying data to the event handler. Having said that, here’s the same solution using dynamic confirmation dialog. If you click OK, it will postback using the original button’s information which is displayed on postback. Noticed I placed a ClientScript.GetPostBackEventReference(uxGrid, string.Empty) within the PageLoad event. Every time the page loads, postback or not, I want it to do this so it will render the __doPostBack client-side function. Without that, it will only work the first time. Subsequent clicks after the first postback will break.

So essentially the solution is to use __doPostBack(clientside_input_name_attribute, ”). Using the javascript function below we rebuild the buttons for the dialog each time and rewire it to the appropriate location. So for this, if you didn’t want to use a grid, you could still use it the same way via OnClientClick with “this.name” and pass that to __doPostBack.

Here’s the markup source. You can also download the full source code here.

Thanks Matt.

<%@ Page Language="C#" AutoEventWireup="true"  %>
<%@ Import Namespace="System.Collections.Generic" %>




    

    

    
    
    
    


    
    
        confirm
        Click ok to accept