23

Trong một dự án MVC3, tôi có một "_Layout.vbhtml" tập tin với mã nàyLàm cách nào để hiển thị Phần trong Chế độ xem một phần trong MVC3?

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
    ... 
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script> 
    @RenderSection("Scripts", false) 
    </body> 
</html> 

Sau đó, tôi có một phần Chế độ xem "ValidationScripts.vbhtml" trong thư mục Shared với

@Section Scripts 
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.fix.js")"></script> 
    <script src="@Url.Content("~/Scripts/localization/messages_de.js")"></script>  
End Section 

Nếu tôi gọi là Xem phần từ một Xem như thế này ...

@ModelType MvcExample.MyModel 
@Code 
    ViewData("Title") = "Test" 
End Code 

@Html.Partial("ValidationScripts") 

<h2>Just a Test</h2> 
... 

Mục "Scripts" không được hiển thị trên trang, và HTML đầu ra là

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
    ... 
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script> 

    </body> 
</html> 

Làm cách nào để hiển thị Phần trong Chế độ xem một phần?

Trả lời

45

tôi đã cùng một vấn đề trên đầu trang của các kịch bản trùng lặp, vì vậy tôi đã tạo ra một vài phương pháp mở rộng:

public static class HtmlHelperExtensions 
{ 
    private const string _jSViewDataName = "RenderJavaScript"; 
    private const string _styleViewDataName = "RenderStyle"; 

    public static void AddJavaScript(this HtmlHelper htmlHelper, 
            string scriptURL) 
    { 
    List<string> scriptList = htmlHelper.ViewContext.HttpContext 
     .Items[HtmlHelperExtensions._jSViewDataName] as List<string>; 
    if (scriptList != null) 
    { 
     if (!scriptList.Contains(scriptURL)) 
     { 
     scriptList.Add(scriptURL); 
     } 
    } 
    else 
    { 
     scriptList = new List<string>(); 
     scriptList.Add(scriptURL); 
     htmlHelper.ViewContext.HttpContext 
     .Items.Add(HtmlHelperExtensions._jSViewDataName, scriptList); 
    } 
    } 

    public static MvcHtmlString RenderJavaScripts(this HtmlHelper HtmlHelper) 
    { 
    StringBuilder result = new StringBuilder(); 

    List<string> scriptList = HtmlHelper.ViewContext.HttpContext 
     .Items[HtmlHelperExtensions._jSViewDataName] as List<string>; 
    if (scriptList != null) 
    { 
     foreach (string script in scriptList) 
     { 
     result.AppendLine(string.Format(
      "<script type=\"text/javascript\" src=\"{0}\"></script>", 
      script)); 
     } 
    } 

    return MvcHtmlString.Create(result.ToString()); 
    } 

    public static void AddStyle(this HtmlHelper htmlHelper, string styleURL) 
    { 
    List<string> styleList = htmlHelper.ViewContext.HttpContext 
     .Items[HtmlHelperExtensions._styleViewDataName] as List<string>; 

    if (styleList != null) 
    { 
    if (!styleList.Contains(styleURL)) 
    { 
     styleList.Add(styleURL); 
    } 
    } 
    else 
    { 
    styleList = new List<string>(); 
    styleList.Add(styleURL); 
    htmlHelper.ViewContext.HttpContext 
     .Items.Add(HtmlHelperExtensions._styleViewDataName, styleList); 
    } 
} 

public static MvcHtmlString RenderStyles(this HtmlHelper htmlHelper) 
{ 
    StringBuilder result = new StringBuilder(); 

    List<string> styleList = htmlHelper.ViewContext.HttpContext 
    .Items[HtmlHelperExtensions._styleViewDataName] as List<string>; 

    if (styleList != null) 
    { 
    foreach (string script in styleList) 
    { 
     result.AppendLine(string.Format(
     "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />", 
     script)); 
    } 
    } 

    return MvcHtmlString.Create(result.ToString()); 
    } 
} 

Trên bất kỳ Xem hoặc một phần Xem hoặc hiển thị/Edit Template bạn chỉ cần thêm những gì bạn cần:

@{ 
    Html.AddJavaScript("http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"); 
} 

Trong Layouts của bạn, bạn làm cho nó nơi bạn muốn nó:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    @Html.RenderStyles() 
    @Html.RenderJavascripts() 

Các onl y vấn đề bạn có thể có là thứ tự mà trong đó các kịch bản được trả lại nếu bạn nhận được để phức tạp. Nếu điều đó trở thành vấn đề, chỉ cần thêm các tập lệnh vào cuối lượt xem/mẫu của bạn và chỉ cần đảo ngược thứ tự trong phương thức mở rộng trước khi hiển thị chúng.

+0

Mở rộng tuyệt vời !!!! – Max

+2

Bất cứ ai xem lại điều này bằng cách sử dụng MVC 4 (hoặc cao hơn), bạn có lẽ nên xem xét sử dụng [Bundling Thay vì] (http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification). –

+0

Điều này sẽ không hoạt động nếu bạn gọi một phần trong tệp bố cục của mình. Html.AddJavaScript đã chạy trước đó. – LiverpoolsNumber9

2

Tôi nghĩ rằng bạn nên sử dụng những người giúp đỡ cho việc này http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx

Nếu bạn có thể nâng cấp lên MVC4 bạn có thể sử dụng bó và việc rút gọn tính năng mới: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification. Nó được thiết kế đặc biệt để giải quyết những gì bạn đang cố gắng đạt được (bao gồm cả tập lệnh).

Hoặc bạn có thể sử dụng http://combres.codeplex.com/ với MVC3

+0

Bạn có thể xin hãy giải thích về cách thêm các kịch bản sử dụng '@ helper'? – Shimmy

0

Nếu tôi hiểu đúng bạn có một cấu trúc

  • Layout.cshtml
  • View - X
    • PartialView Y (gọi là bên View-X)

thì bạn cần phải xác định

@section Script{ .... } trong View-XKHÔNG PartialView Y từ View-XView.Layout bộ của nó để Layout.cshtml

+0

Tất nhiên, tôi có thể thêm Phần "Tập lệnh" theo cách thủ công trong bất kỳ Chế độ xem nào. Tuy nhiên, nếu tôi muốn nhóm tất cả các thẻ tập lệnh ở một nơi và sử dụng lại nó trong Chế độ xem, tôi có thể làm như thế nào? – Max

+0

bạn chỉ có thể hiển thị một phần trong bố cục nếu các tập lệnh đang được tất cả các chế độ xem sử dụng bố cục đó sử dụng HOẶC nếu bạn sẽ phải tham chiếu bố cục trong phần! Nếu bạn muốn đi con đường đó, bạn có thể thử kế thừa trong các bố cục nơi bố cục sử dụng một phần chỉ làm cho phần còn lại của nội dung bị trống. Điều đó có ý nghĩa ? – frictionlesspulley

+0

Cái gì? :) Có, tôi có thể làm theo cách đó nhưng tôi nghĩ rằng phương pháp mở rộng của @ Erik hữu ích hơn. – Max

5

Bạn không thể sử dụng các phần trong một phần lượt xem. Bạn có thể đi cho người giúp đỡ tùy chỉnh như đã đề cập here.

+0

liên kết hữu ích, cảm ơn bạn. – Max

0

tất cả điều này là thông tin tuyệt vời, tuy nhiên nếu bạn nhìn vào mã ban đầu của mình, Phần được viết hoa do đó không được công nhận.

nó phải được @section blahblah không @Section