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

回答

相關問題