3

对于开发可嵌入小部件的最佳方法，我需要一些建议，我的网站用户可以使用这些小部件在他们的网站上显示我们的内容。

假设我们有一些使用jQuery插件来呈现的内容，我们希望为我们的客户提供一种简单的方法来将其嵌入到他们的网站中。

一种选择是使用 IFrame，但我们知道这是非常具有侵入性的并且存在一些问题。我也想知道你对此的看法。

另一种方法可能是给出这样的代码，以显示项目 #23：

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

并且以某种方式（此处需要帮助...）创建 wdg.js 服务器端脚本以在 DIV 中注入内容、jQuery、所需的插件。

这看起来更有希望，因为用户可以在一定程度上自定义 DIV 的样式，并且不需要 IFRAME。但是，在 ASP.NET MVC 中执行此操作的最佳和更有效的方法是什么？

当然，还有许多其他方法可以实现我们所需要的。

4

1 回答 1

12

JSONP是执行此操作的一种方法。您首先编写一个自定义ActionResult，它将返回 JSONP 而不是 JSON，这将允许您解决跨域Ajax限制：

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 的控制器操作：

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

最后，人们可以使用 jQuery 在他们的网站上调用此操作：

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

如果用户不想在他们的网站上包含 jQuery，您可以在您的网站上编写 JavaScript 代码，其中将包含 jQuery 并执行之前的 getJSON 调用，这样人们只需要像您的示例中那样包含来自网站的单个 JavaScript 文件.

更新：

如评论部分所述，这里有一个示例，说明如何从脚本动态加载 jQuery。只需将以下内容放入您的 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();
于 2010-02-21T14:27:08.693 回答