los widgets embebidos utilizando jQuery y ASP.NET MVC

Question

necesito algunos consejos para el mejor enfoque para uso en el desarrollo de widgets embebidos que mis usuarios del sitio pueden utilizar para mostrar nuestro contenido en su sitio.

Vamos a decir que tenemos algún contenido que utiliza una jQuery plugin para ser prestados, y nosotros quieren dar a nuestros clientes una forma fácil de integrar en sus sitios web.

Una opción podría ser el uso de un IFrame, pero como sabemos que esto es bastante invasiva y tiene algunos problemas. Me gustaría saber su opinión sobre eso, también.

Otro enfoque podría estar dando un código como este, para mostrar el artículo # 23:

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

Y de alguna manera (ayuda para continuar ...) la creación de la secuencia de comandos del lado del servidor wdg.js al contenido de inyección, jQuery, plugins necesarios, dentro del DIV.

Este parece más prometedor, ya que el usuario puede personalizar en cierta medida el estilo de la DIV, y no se necesita IFRAME. Pero cual es la mejor y más eficiente manera de hacer esto en ASP.NET MVC?

Por supuesto, hay muchos otros enfoques para lograr lo que necesitamos.

Answer 1

JSONP es una manera de hacer esto. Se empieza por escribir una costumbre ActionResult que volverá JSONP JSON en lugar de lo que le permitirá trabajar alrededor de la cruz-dominio Ajax limitación:

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

A continuación, se podría escribir una acción de controlador que vuelve JSONP:

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

Y finalmente la gente puede llamar a esta acción en sus sitios utilizando jQuery:

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

Si los usuarios no quieren incluir jQuery en su sitio puede escribir código JavaScript en su sitio que incluirá jQuery y realizar la llamada getJSON anterior, por lo que las personas sólo tendrán que incluir un único archivo JavaScript desde el sitio como en su ejemplo.

---

ACTUALIZACIÓN:

Como se pidió en la sección de comentarios que aquí hay un ejemplo que ilustra cómo cargar jQuery dinámica a partir de la secuencia de comandos. Sólo hay que poner lo siguiente en su archivo 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();