2011-09-26 71 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的时候,你会冒碰撞和其他问题的风险。而且......没有任何东西可以阻止所有文件的缩小。此外,可以同时加载多个缩小文件。 –