使用jQuery和ASP.NET的可嵌入窗口小部件MVC

我需要一些建议，以便开发可嵌入窗口小部件的最佳方法，我的网站用户可以使用它们在我们的网站上显示我们的内容。使用jQuery和ASP.NET的可嵌入窗口小部件MVC

假设我们有一些内容使用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中，哪种方法是最好的，也是最有效的方法？

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

来源

2010-02-21 marco

JSONP是这样做的一种方法。你开始通过编写自定义ActionResult将返回，而不是JSON JSONP，这将使您能够解决跨域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); 
    } 
);

如果用户不想牛逼o在他们的网站上包含jQuery，你可以在你的网站上编写包含jQuery的JavaScript代码并执行以前的getJSON调用，这样人们只需要在你的例子中包含一个来自站点的JavaScript文件。

UPDATE：

由于要求在评论部分下面是说明如何从你的脚本动态加载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-21 14:27:08

这似乎是一个非常聪明的解决方案，谢谢Darin。我已经实现了它，并且如果我在“客户”页面中明确包含jquery和所需的插件，它会很好地工作。正如你在最后一段中所猜测的那样，我想尝试在我的服务器中包含一个

使用jQuery和ASP.NET的可嵌入窗口小部件MVC

回答

相关问题