Widgets incorporáveis ​​usando jQuery e ASP.NET MVC

Question

Preciso de alguns conselhos sobre a melhor abordagem a ser usada no desenvolvimento de widgets incorporáveis ​​que os usuários do meu site possam usar para mostrar nosso conteúdo em seus sites.

Digamos que temos algum conteúdo que usa um jQuery plugin seja renderizado e queremos oferecer aos nossos clientes uma maneira fácil de incorporá-lo em seus sites.

Uma opção poderia ser usar um IFrame, mas como sabemos isso é bastante invasivo e apresenta alguns problemas.Gostaria de saber sua opinião sobre isso também.

Outra abordagem poderia ser fornecer um código como este, para mostrar o item 23:

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

E de alguma forma (ajuda necessária aqui...) criando o script do lado do servidor wdg.js para injetar conteúdo, jQuery, plug-ins necessários, dentro do DIV.

Isso parece mais promissor, pois o usuário pode personalizar até certo ponto o estilo do DIV, e nenhum IFRAME é necessário.Mas qual é a melhor e mais eficiente maneira de fazer isso na ASP.NET MVC?

É claro que existem muitas outras abordagens para alcançar o que precisamos.

Answer 1

JSONP é uma maneira de fazer isso.Você começa escrevendo um costume AçãoResultado que retornará JSONP em vez de JSON, o que permitirá que você contorne o domínio cruzado Ájax limitação:

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

Então você poderia escrever uma ação de controlador que retorna JSONP:

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

E finalmente as pessoas podem chamar esta ação em seus sites usando jQuery:

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

Se os usuários não quiserem incluir jQuery em seus sites, você poderá escrever um código JavaScript em seu site que incluirá jQuery e executará a chamada getJSON anterior, para que as pessoas precisem apenas incluir um único arquivo JavaScript do site, como no seu exemplo .

---

ATUALIZAR:

Conforme solicitado na seção de comentários, aqui está um exemplo que ilustra como carregar o jQuery dinamicamente a partir do seu script.Basta colocar o seguinte em seu arquivo 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();