2011-09-26 70 views
0

我正在使用的局部視圖需要包含某些jQuery庫,並且我正在嘗試考慮很好地添加它們的最佳方法。ASP.NET MVC 3 Razor局部視圖 - 包含在主佈局中的jQuery

我目前的設置如下:

_Layout.cshtml:

... 
@if (ViewBag.jQuery) 
{ 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
      type="text/javascript"></script> 
} 
... 

Index.cshtml:

... 
@{ Html.RenderPartial("PartialView", 
     new MVCModel.Models.MyModel(), 
     new ViewDataDictionary { { "ViewBag", ViewBag } }); } 
... 

PartialView.cshtml:

... 
@{ 
    if (ViewBag.ViewBag != null) 
    { 
     var vb = (dynamic)ViewBag.ViewBag; 
     vb.jQuery = true; 
    } 
} 
... 

那麼什麼我試圖做的是「tu關於「部分視圖中的庫,並將該布爾值傳播到主佈局。這使得我可以像任何想要的那樣儘可能多地啓用庫(許多部分視圖或多次使用一個視圖),但它只會包含一次。最重要的是,我可以控制包含的順序,所以我可以確保首先包含文件依賴關係。

我只是想知道是否有一個更好的方式拉斷。

現在我的兩個最大的問題是:

  1. 的ViewBag不是強類型,因此智能感知不會告訴我這些庫提供給我。
  2. 將ViewBag傳遞給局部視圖,以便我可以重新使用它。

回答

1

這是一個簡單的方法來實現你的目標。

在MVC Razor視圖中有一個名爲RenderSection的函數。它有一個像

@RenderSection ("occasionalScripts", false) 

語法(occasionalScripts是部分的名稱和虛假表示的部分是可選的,可能不會出現在每一頁。)

你將要包括這在你的_Layout.cshtml其中是Views\Shared。這將允許您的主腳本模板顯示一個包含您的腳本定義的部分,如果您已爲特定視圖定義該部分。

一般來說,您希望在結束</body>標記之前將其放在頁面底部。 (這是性能的最佳實踐。)我會列出其上的所有其他腳本(每個頁面上加載的腳本)。原因是因爲jQuery腳本的加載順序非常重要。

在每一個你的意見,你有特殊的腳本,添加以下內容:

@section occasionalScripts { 
... put script references here 
} 

如果您有不需要特殊的腳本視圖,那麼你並不需要包括本節還有。 @RenderSection標記上的false將容納缺少@section標記的任何視圖。

在實現此功能的每個頁面上,可以選擇不同的腳本。

或者,您可以爲不同類別的文件定義多個部分。

-1

我通常有不同的方法,並認爲網站上使用的所有庫應在每個頁面上引用。它確實會使第一次加載速度變慢一些,但隨後所有後續頁面的加載速度會更快,因爲它使用的是瀏覽器緩存。

爲了更好地改善它,您可以使所有庫僅在一個文件中可用。

我在某個時候使用了SquishIt。我整合在ASP.NET MVC中。

+0

如果只需要幾頁上的庫,引用每個頁面上的所有庫並不是一個好主意。這不必要地浪費帶寬並使頁面複雜化。 –

+0

我不同意。我認爲這不會浪費帶寬來壓縮所有引用,並讓客戶端瀏覽器下載一次(每個庫只有一個請求而不是一個請求)並依賴於瀏覽器的緩存。我不明白它是如何使頁面變得複雜......在每個頁面上以不同的方式加載它會使維護變得複雜...... – tsimbalar

+0

這取決於您下載的文件數量以及您是否真的需要每個頁面上的所有文件。有很多時候我會有20多個Javsascript文件在不同的頁面上使用。絕對沒有理由在每個頁面上都顯示所有這些內容 - 特別是如果用戶不太可能訪問需要某些文件的頁面。另外,當你在做很多jQuery的時候,你會冒碰撞和其他問題的風險。而且......沒有任何東西可以阻止所有文件的縮小。此外,可以同時加載多個縮小文件。 –