Встраиваемые виджеты с использованием jQuery и ASP.NET MVC
-
21-09-2019 - |
Вопрос
Мне нужно несколько советов о наилучшем подходе к разработке встраиваемых виджетов, которые пользователи моего сайта могли бы использовать для показа нашего контента на своем сайте.
Допустим, у нас есть некоторый контент, который использует jQuery - jQuery - запрос плагин для рендеринга, и мы хотим предоставить нашим клиентам простой способ встроить его на свои веб-сайты.
Одним из вариантов могло бы быть использование IFrame, но, как мы знаем, это довольно инвазивно и сопряжено с некоторыми проблемами.Я бы тоже хотел узнать ваше мнение по этому поводу.
Другим подходом могло бы быть предоставление кода, подобного этому, для отображения элемента # 23:
<DIV id="mysitewidget23"><script src="http://example.com/scripts/wdg.js?id=23" /></DIV>
И каким-то образом (здесь нужна помощь ...) создаю wdg.js серверный скрипт для внедрения содержимого, jQuery, необходимых плагинов внутрь DIV.
Это выглядит более многообещающе, поскольку пользователь может в определенной степени настроить стиль DIV, и никакой IFRAME не требуется.Но какой лучший и более эффективный способ сделать это в ASP.NET MVC?
Конечно, есть много других подходов к достижению того, что нам нужно.
Решение
JSONP это один из способов сделать это.Вы начинаете с написания пользовательского Действиерезультат это вернет JSONP вместо JSON, что позволит вам обойти междоменность Аякс ограничение:
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();