使用 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.

另一种方法是提供这样的代码，以显示项目 #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 服务器端脚本以在 DIV 中注入内容、jQuery、所需的插件.

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将返回 JSONP 而不是 JSON，这将允许您解决跨域 Ajax 限制:

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，您可以在您的网站上编写包含 jQuery 的 JavaScript 代码并执行之前的 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屋！