widget embeddable utilizzando jQuery e ASP.NET MVC

Question

Ho bisogno di un consiglio per l'approccio migliore da utilizzare nello sviluppo di widget incorporabili che i miei utenti del sito potrebbero utilizzare per mostrare il contenuto sul loro sito.

Diciamo che abbiamo un po 'di contenuti che utilizza un jQuery plugin per il rendering, e noi vogliamo dare ai nostri clienti un modo semplice per incorporare nei loro siti web.

Una possibilità potrebbe essere di utilizzare un IFrame, ma come sappiamo che questo è abbastanza invasiva e ha alcuni problemi. Mi piacerebbe conoscere la vostra opinione su questo, anche.

Un altro approccio potrebbe essere dando un codice come questo, di mostrare item # 23:

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

E in qualche modo (aiuto necessario qui ...) creando lo script wdg.js lato server per iniettare il contenuto, jQuery, i plugin necessari, all'interno del DIV.

Questo sembra più promettente, in quanto l'utente può personalizzare in una certa misura lo stile del div, e non è necessaria alcuna IFRAME. Ma qual è il modo migliore e più efficace per farlo in ASP.NET MVC?

Ci sono naturalmente molti altri approcci per ottenere quello che ci serve.

Answer 1

JSONP è un modo per fare questo. Si inizia scrivendo una consuetudine ActionResult che tornerà JSONP invece di JSON, che vi permetterà di aggirare il cross-domain Ajax limitazione:

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));
            }
        }
    }
}

Poi si potrebbe scrivere un azione di controllo che restituisce JSONP:

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

E finalmente la gente può chiamare questa azione sui loro siti utilizzando jQuery:

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

Se gli utenti non vogliono includere jQuery sul loro sito si potrebbe scrivere il codice JavaScript sul tuo sito che includerà jQuery ed effettuare la chiamata getJSON precedente, in modo che la gente solo bisogno di includere un singolo file JavaScript dal sito come nel tuo esempio.

---

UPDATE:

Per quanto chiesto nella sezione commenti qui un esempio che illustra come caricare jQuery dinamicamente da script. Basta mettere il seguente nel file 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();