Eingebundene Widgets mit jQuery und ASP.NET MVC

Question

Ich brauche ein paar Ratschläge für den besten Ansatz zur Verwendung bei der Entwicklung eingebundene Widgets, dass meine Website-Nutzer verwenden könnten unsere Inhalte auf ihrer Website zu zeigen.

Lassen Sie uns sagen, dass wir einige Inhalte haben, die verwendet eine jQuery Plugin gerendert werden, und wir will, dass unsere Kunden eine einfache Möglichkeit zu geben, einbinden, um sie in ihren Websites.

Man könnte Möglichkeit sein, einen IFrame verwenden, aber wie wir wissen dies sehr invasiv ist und hat einige Probleme. Ich möchte Ihre Meinung dazu wissen, auch.

Ein weiterer Ansatz könnte einen Code wie dieser wird geben, um zu zeigen, Artikel # 23:

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

Und irgendwie (Hilfe benötigt hier ...) die Schaffung der wdg.js serverseitiges Skript einzuspritzen Inhalt, jQuery, benötigt Plugins innerhalb des DIV.

Das sieht vielversprechender, da der Benutzer zu einem gewissen Grad den Stil des DIV anpassen können, und kein IFRAME benötigt. Aber was ist der beste und effizienter Weg, dies in ASP.NET MVC zu tun?

Es gibt natürlich noch viele andere Ansätze zu erreichen, was wir brauchen.

Answer 1

JSONP ist ein Weg, dies zu tun. Sie beginnen, indem Sie eine benutzerdefinierte schreiben Action dass anstelle von JSON JSONP zurück, die Sie die Cross-Domain Ajax Einschränkung:

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

Dann könnten Sie eine Controller-Aktion schreiben, dass die Renditen JSONP:

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

Und schließlich können die Menschen auf ihren Websites diese Aktion rufen Sie jQuery verwenden:

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

Wenn Benutzer wollen nicht jQuery auf ihrer Website sind Sie möglicherweise JavaScript-Code auf Ihrer Website schreiben, die jQuery umfassen wird und den vorherigen getJSON Anruf durchführen, so dass die Menschen nur eine einzige JavaScript-Datei von der Website enthalten müssen als in Ihrem Beispiel.

---

UPDATE:

gefragt Wie in den Kommentaren hier ein Beispiel ist die zeigen, wie jQuery von Ihrem Skript dynamisch zu laden. Legen Sie einfach die folgende in Ihre JavaScript-Datei:

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