Embedded widgets using jQuery and ASP.NET MVC

Question

I need advice for a better approach to developing embedded widgets that site users could use to display our content on their site.

Let's say we have content that uses the jQuery plugin, and we want to give our customers an easy way to implement it on their sites.

One option might be to use an IFrame, but as we know, it is quite invasive and has some problems. I would also like to know your opinion about this.

Another approach could be code to show element # 23:

<DIV id="mysitewidget23"><script src="http://example.com/scripts/wdg.js?id=23" /></DIV>

And somehow (need help here ...), creating the server side of the wdg.js script to insert jQuery content, necessary plugins inside the DIV.

This looks more promising as the user can customize the DIV style to some degree and no IFRAME is required. But what is the best and most effective way to do this in ASP.NET MVC?

Of course, there are many other approaches to achieve what we need.

Answer 1

JSONP is one way to do this. You start by writing a custom ActionResult that will return JSONP instead of JSON, which will allow you to work with the Ajax cross-domain restriction:

public class JsonpResult : JsonResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        var 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)
        {
            var request = context.HttpContext.Request;
            var serializer = new JavaScriptSerializer();
            if (null != request.Params["jsoncallback"])
            {
                response.Write(string.Format("{0}({1})",
                    request.Params["jsoncallback"],
                    serializer.Serialize(Data)));
            }
            else
            {
                response.Write(serializer.Serialize(Data));
            }
        }
    }
}

Then you can write a controller action that returns JSONP:

public ActionResult SomeAction()
{
    return new JsonpResult
    {
        Data = new { Widget = "some partial html for the widget" }
    };
}

And finally, people can call this action on their sites using jQuery:

$.getJSON('http://www.yoursite.com/controller/someaction?jsoncallback=?',
    function(json)
    {
        $('#someContainer').html(json.Widget);
    }
);

jQuery , JavaScript , jQuery getJSON, JavaScript , .

---

UPDATE:

, , jQuery script. JavaScript:

var jQueryScriptOutputted = false;
function initJQuery() {
    if (typeof(jQuery) == 'undefined') {
        if (!jQueryScriptOutputted) {
            jQueryScriptOutputted = true;
            document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
    } else {
        $(function() {
            $.getJSON('http://www.yoursite.com/controller/someaction?jsoncallback=?',
                function(json) {
                    // Of course someContainer might not exist
                    // so you should create it before trying to set
                    // its content
                    $('#someContainer').html(json.Widget);
                }
            );
        });
    }
}
initJQuery();