widgets intégrables en utilisant jQuery et ASP.NET MVC

Question

J'ai besoin de conseils pour la meilleure approche à utiliser dans le développement de widgets intégrables qui pourraient utiliser mes utilisateurs du site pour montrer notre contenu sur leur site.

Disons que nous avons un contenu qui utilise un plugin jQuery à rendre, et nous veulent donner à nos clients un moyen facile de l'intégrer dans leurs sites Web.

Une option pourrait être d'utiliser un iFrame, mais comme nous savons que cela est tout à fait invasive et a quelques problèmes. Je voudrais connaître votre opinion à ce sujet, aussi.

Une autre approche pourrait être de donner un code comme celui-ci, pour montrer l'article 23:

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

Et en quelque sorte (avait besoin d'aide ici ...) la création du script côté serveur de wdg.js pour injecter du contenu, jQuery, plugins nécessaires, dans la DIV.

Cela semble plus prometteur, puisque l'utilisateur peut personnaliser dans une certaine mesure le style de la DIV, et pas IFRAME est nécessaire. Mais ce qui est le meilleur moyen et le plus efficace de le faire dans ASP.NET MVC?

Il y a bien sûr beaucoup d'autres approches pour parvenir à ce que nous avons besoin.

Answer 1

JSONP est une façon de le faire. Vous commencez par écrire une coutume ActionResult retournera JSONP au lieu de JSON qui vous permettra de travailler autour de la cross-domain Ajax limitation:

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

Ensuite, vous pouvez écrire une action de contrôleur qui retourne JSONP:

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

Et enfin les gens peuvent appeler cette action sur leurs sites en utilisant jQuery:

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

Si les utilisateurs ne veulent pas inclure jQuery sur leur site, vous pouvez écrire du code JavaScript sur votre site qui comprendra jQuery et effectuer l'appel getJSON précédent, de sorte que les gens ne doivent inclure un seul fichier JavaScript à partir du site comme dans votre exemple.

---

Mise à jour:

Comme demandé dans la section commentaires est ici un exemple illustrant comment charger dynamiquement jQuery à partir de votre script. Il suffit de mettre les éléments suivants dans votre fichier 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();