使用jQuery和ASP.NET MVC嵌入式小工具 [英] Embeddable widgets using jQuery and ASP.NET MVC

问题描述

我需要一些建议最好的方法来开发我的网站的用户可以用它来展示我们在其网站上的内容嵌入式小工具使用。

I need some advice for the best approach to use in developing embeddable widgets that my site users could use to show our content on their site.

比方说，我们的系统使用的jQuery插件要渲染一些内容，我们希望为了给客户一个简单的方法来将它嵌入到自己的网站。

Let's say we have some content which uses a jQuery plugin to be rendered, and we want to give our customers an easy way to embed it in their websites.

一种选择是使用iframe的，但我们知道这是非常侵入性和有一些问题。我想知道你对此的意见了。

One option could be of using an IFrame, but as we know this is quite invasive and has some problems. I'd like to know your opinion on that, too.

另一种方法可以让一个code这样，展现项目＃23：

Another approach could be giving a code like this, to show item #23:

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

和以某种方式（需要帮助这里...）创建wdg.js服务器端脚本注入内容，jQuery的，插件需要的DIV中。

And somehow (help needed here...) creating the wdg.js server-side script to inject content, jQuery, needed plugins, inside the DIV.

这看起来更有前途，因为用户可以自定义，以在一定程度上DIV的风格，不需要IFRAME。但是，这是在ASP.NET MVC做到这一点的最好的和更有效的方式？

This looks more promising, since the user can customize to a certain extent the style of the DIV, and no IFRAME is needed. But which is the best and more efficient way to do this in ASP.NET MVC?

当然还有很多其他的方法来实现我们所需要的。

There are of course many other approaches to achieve what we need.

推荐答案

JSONP 是做到这一点的方法之一。你开始通过编写自定义的ActionResult 即会返回而不是JSON JSONP这将让你来解决跨域阿贾克斯限制：

JSONP is one way to do this. You start by writing a custom ActionResult that will return JSONP instead of JSON which will allow you to work around the 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));
            }
        }
    }
}

然后，你可以编写返回JSONP的控制器操作：

Then you could write a controller action that returns JSONP:

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

和最后的人可以调用使用jQuery他们的网站这个动作：

And finally people can call this action on their sites using jQuery:

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

如果用户不希望包括在其网站上的jQuery，你可以写上你的网站的JavaScript code，其中将包括jQuery和执行previous的getJSON调用，因此，人们只需要包括单从网站的JavaScript文件，如你的例子。

If users don't want to include jQuery on their site you might write JavaScript code on your site that will include jQuery and perform the previous getJSON call, so that people will only need to include a single JavaScript file from the site as in your example.

更新：

由于要求在评论部分下面是说明如何从你的脚本动态加载jQuery的一个例子。只要把下面的到你的JavaScript文件：

As asked in the comments section here's an example illustrating how to load jQuery dynamically from your script. Just put the following into your JavaScript file:

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

这篇关于使用jQuery和ASP.NET MVC嵌入式小工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！