Добавить CSS ссылки на страницу <head>из частичного представления - PullRequest
Новая
       32

Добавить CSS ссылки на страницу <head>из частичного представления

11 голосов
/ 18 ноября 2010

Есть ли способ добавить ссылки CSS на страницу из частичного представления, и сделать так, чтобы они отображались в <head> страницы (как того требует спецификация HTML 4.01 )

Ответы [ 6 ]

5 голосов
/ 14 февраля 2011

Если вы используете MVC3 и Razor, лучший способ добавить постраничные элементы в раздел - это: 1) Вызовите RenderSection () из вашей страницы макета 2) Объявите соответствующий раздел на ваших дочерних страницах:

/ Views / Shared / _Layout.cshtml: 

<head>
    <!-- ... Rest of your head section here ... ->
    @RenderSection("HeadArea")
</head>

/ Просмотров / записи / Index.cshtml: 

@section HeadArea {
    <link rel="Stylesheet" type="text/css" href="/Entries/Entries.css" />
}

Результирующая HTML-страница включает в себя раздел, который выглядит следующим образом: 

<head>
    <!-- ... Rest of your head section here ... ->
    <link rel="Stylesheet" type="text/css" href="/Entries/Entries.css" />
<head>
4 голосов
/ 18 ноября 2010

Вы также можете использовать элементы управления с открытым исходным кодом Telerik для MVC и сделать что-то вроде: 

<%= Html.Telerik().StyleSheetRegistrar()
                  .DefaultGroup(group => group
                     .Add("stylesheet.css"));

в головной части и 

<%= Html.Telerik().ScriptRegistrar()
                  .DefaultGroup(group => group
                     .Add("script.js"));

в разделе сценариев внизу вашей страницы.

И вы можете продолжать добавлять сценарии в любом или частичном представлении, и они должны работать.

Если вы не хотите использовать компонент, вы всегда можете вдохновить себя оттуда и сделать что-то более нестандартное.

О, с Telerik у вас также есть варианты объединения и сжатия сценариев.

1 голос
/ 19 ноября 2010

Вы можете использовать HttpModule для манипулирования HTML-кодом ответа и перемещения любых ссылок CSS / скриптов в соответствующие места. Это не идеально, и я не уверен в последствиях для производительности, но кажется, что это единственный способ решить проблему без (а) решения на основе JavaScript или (б) работы против принципов MVC. *

1 голос
/ 18 ноября 2010

У вас может быть частичная загрузка вида в блоке javascript, который переходит в стиле к голове, но это было бы глупо, если учесть, что вам, вероятно, нужен блок javascript в разделе head по той же причине.

Я недавно обнаружил кое-что довольно крутое, хотя.Вы можете сериализовать частичное представление в строку и отправить его обратно клиенту как часть объекта JSON.Это позволяет передавать и другие параметры вместе с представлением.

Возврат представления как части объекта JSON

Вы можете получить объект JSON с помощью JQueryи ajax и загрузите его с частичным представлением, а затем другое свойство JSON может быть вашим стилем.JQuery может проверить, если вы вернули блок стиля, если это так, то поместите его в раздел head.

Что-то вроде: 

$.ajax(
{
     url: "your/action/method",
     data: { some: data },
     success: function(response)
     {
          $('#partialViewContainer).html(response.partialView);
          if (response.styleBlock != null)
               $('head').append(response.styleBlock);
     }
});
0 голосов
/ 18 ноября 2010

Следующее будет работать, только если JavaScript включен.это маленький помощник, который я использую именно для сценария, который вы упоминаете: 

// standard method - renders as defined in as(cp)x file
public static MvcHtmlString Css(this HtmlHelper html, string path)
{
    return html.Css(path, false);
}
// override - to allow javascript to put css in head
public static MvcHtmlString Css(this HtmlHelper html, 
                                string path, 
                                bool renderAsAjax)
{
    var filePath = VirtualPathUtility.ToAbsolute(path);

    HttpContextBase context = html.ViewContext.HttpContext;
    // don't add the file if it's already there
    if (context.Items.Contains(filePath))
        return null;

    // otherwise, add it to the context and put on page
    // this of course only works for items going in via the current
    // request and by this method
    context.Items.Add(filePath, filePath);

    // js and css function strings
    const string jsHead = "<script type='text/javascript'>";
    const string jsFoot = "</script>";
    const string jsFunctionStt = "$(function(){";
    const string jsFunctionEnd = "});";
    string linkText = string.Format("<link rel=\"stylesheet\" type=\"text/css\" href=\"{0}\"></link>", filePath);
    string jsBody = string.Format("$('head').prepend('{0}');", linkText);

    var sb = new StringBuilder();

    if (renderAsAjax)
    {
        // join it all up now
        sb.Append(jsHead);
        sb.AppendFormat("\r\n\t");
        sb.Append(jsFunctionStt);
        sb.AppendFormat("\r\n\t\t");
        sb.Append(jsBody);
        sb.AppendFormat("\r\n\t");
        sb.Append(jsFunctionEnd);
        sb.AppendFormat("\r\n");
        sb.Append(jsFoot);
    }
    else
    {
        sb.Append(linkText);
    }

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

использование: 

<%=Html.Css("~/content/site.css", true) %>

работает для меня, хотя, как указано, только если включен JavaScript, таким образом ограничиваяего полезность немного.

0 голосов
/ 18 ноября 2010

Другой подход, который противоречит принципам MVC, состоит в том, чтобы использовать ViewModel и отвечать на init-событие вашей страницы, чтобы установить желаемый css / javascript (т.е. myViewModel.Css.Add (". Css") и в вашемhead рендерит содержимое css-коллекции на вашей модели представления.

Для этого вы создаете базовый класс модели представления, от которого наследуются все ваши другие модели, ala 

public class BaseViewModel
{
    public string Css { get; set; }
}

В вашем master-На странице вы установите его для использования этой модели представления 

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage<BaseViewModel>" %>

, а в вашей головной части вы можете записать значение свойства Css 

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

    <%= Model.Css %>
</head>

Теперь в вашем частичном представлении вам нужноесть этот код, который довольно некрасив в MVC 

<script runat="server">
    protected override void OnInit(EventArgs e)
    {
        Model.Css = "hej";

        base.OnInit(e);
    }
</script>
...