23

W projekcie MVC3 mam „_Layout.vbhtml” plik z tym kodemJak renderować przekrój w widoku częściowym w MVC3?

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

Wtedy, mam częściowym widokiem „ValidationScripts.vbhtml” w folderze współdzielonym z

@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 

Jeśli zadzwonię częściowego widoku z widoku tak ...

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

@Html.Partial("ValidationScripts") 

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

sekcji „Skrypty” nie jest renderowany na stronie, a wyjście HTML jest

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

    </body> 
</html> 

Jak mogę renderować przekrój w widoku częściowym?

Odpowiedz

45

miałem ten sam problem na szczycie duplikatów skryptach, więc stworzyłem kilka sposobów rozszerzenia:

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()); 
    } 
} 

W dowolnym widoku lub częściowym widokiem lub wyświetlić/Edycja szablonu wystarczy dodać to, czego potrzebujesz:

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

W układach renderowania go tam, gdzie chcesz:

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

ONL Możliwe, że masz kolejność, w której skrypty są renderowane, jeśli masz złożony. Jeśli to staje się problemem, po prostu dodaj skrypty na dole swoich widoków/szablonów i po prostu odwróć kolejność w metodzie rozszerzenia przed ich renderowaniem.

+0

Wspaniałe przedłużenia !!!! – Max

+2

Każdy, kto przegląda to za pomocą MVC 4 (lub wyżej), powinieneś raczej spojrzeć na [Bundling Zamiast] (http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification). –

+0

To nie zadziała, jeśli wywołasz częściowe w pliku układu. Html.AddJavaScript już działa. – LiverpoolsNumber9

2

myślę należy używać pomocników w tym http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx

Jeśli można uaktualnić do MVC4 można użyć nowego wiązania i minifikacji cechę: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification. Został zaprojektowany specjalnie z myślą o tym, co próbujesz osiągnąć (w tym skrypty).

Alternatywnie można użyć http://combres.codeplex.com/ z MVC3

+0

Czy mógłbyś rozwinąć jak dodawać skrypty za pomocą '@ helper'? – Shimmy

0

Jeśli dobrze rozumiem masz strukturę

  • Layout.cshtml
  • View - X
    • PartialView Y (zwane wewnątrz View-X)

następnie trzeba określić

@section Script{ .... } w View-X i NIE PartialView Y od View-X ma swój View.Layout zestaw do Layout.cshtml

+0

Oczywiście, mogę dodać sekcję "Script" ręcznie w dowolnym widoku. Jeśli jednak chcę zgrupować wszystkie tagi skryptów w miejscu i użyć ich ponownie w widokach, jak mogę to zrobić? – Max

+0

można po prostu wyrenderować częściowe w samym layoucie, jeśli skrypty są używane przez wszystkie widoki, które używają tego układu, lub jeśli trzeba odnieść układ w częściowym! Jeśli chcesz iść tą drogą, możesz spróbować dziedziczyć w układach, w których układ, którego używają tylko cząstki, powoduje, że reszta rzeczy jest pusta. Czy to ma sens ? – frictionlesspulley

+0

Co? :) Tak, mogę podążać tą drogą, ale myślę, że metody rozszerzenia @ Erika są bardziej użyteczne. – Max

5

nie można używać w sekcji widoki częściowe. Możesz przejść do niestandardowych pomocników, jak wspomniano: here.

+0

użyteczny link, dziękuję. – Max

0

wszystko to było świetną informacją, jednak jeśli spojrzeć na jego oryginalny kod, sekcja jest pisana wielką literą, a zatem nie jest rozpoznawana.

powinno być @section blahblah nie @Section

Powiązane problemy