Как внедрить CSS-файл из частичного представления ASP.NET MVC (на стороне сервера)? - PullRequest
9 голосов
/ 06 октября 2010

У меня есть частичное представление (.ascx), которое должно включать свой собственный файл CSS, так как он используется во многих других представлениях. Как добавить таблицу стилей на серверную страницу, то есть без использования JavaScript?

Ответы [ 5 ]

2 голосов
/ 06 октября 2010

Дарио - из-за использования этого для частичного просмотра у вас всегда будет проблема с тем, что раздел <head> документа уже существует и поэтому не может быть изменен. Если вы хотите оставаться совместимым с WC3, то вам нужно будет добавить любые дополнительные CSS в раздел head через javascript. Это может или не может быть желательным (если вам нужно обслуживать браузеры downsteam с отключенным javascript).

Основная проблема, на которую вы можете ссылаться, это то, что вы не можете поместить <asp:contentplaceholders> в свои частичные функции. это боль (хотя понятно, что ссылка на мастер-страницу слишком привязывает частичное к конкретной главной странице).

Для этого я создал небольшой вспомогательный метод, который выполняет базовую работу по автоматическому добавлению файла css в раздел head.

edit - (согласно предложению Ому) это хороший маленький дом на полпути:

// standard method - renders as defined in as(cp)x file
public static string Css(this HtmlHelper html, string path)
{
    return html.Css(path, false);
}
// override - to allow javascript to put css in head
public static string 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 "";

    // 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 sb.ToString();
}

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

<%=Html.Css("~/Content/yourstyle.Css")%>

или

<%=Html.Css("~/Content/yourstyle.Css", true)%> // or false if you want!!

стоит подойти, если все остальное не поможет. также возможно адаптировать приведенную выше логику для попадания в фильтр действий и добавления CSS к заголовкам ответов и т. д. вместо вывода строки js.

1 голос
/ 06 октября 2010

Я не эксперт по ASP.NET или MVC, но сейчас я работаю над проектом с ним. Можно ли добавить что-то подобное в заголовок вашей главной страницы?

<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>

Тогда как-нибудь включить ваш CSS в заполнитель содержимого?

<asp:Content ID="styleSheetHolder" ContentPlaceHolderID="HeadContent" runat="server">
  <link rel='stylesheet' href='yourstyle.css' type='text/css' />
</asp:Content>

Похоже, вам придется сделать это с вызывающей страницы, что приведет к дублированию кода. Я не уверен, как обойти это. Может быть, это можно сделать с помощью помощника HTML.

1 голос
/ 06 октября 2010

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

Кроме того, если ajax получает частичное представление, вы в конечном итоге повторно загрузите файл css несколько раз (в зависимости от кэширования браузера).

0 голосов
/ 04 января 2011

В месте, где я работал, был сайт с множеством условных частичных просмотров, которые могли и будут время от времени меняться по мере добавления новых вещей в приложение. Лучшим способом, который мы нашли, было использование соглашений об именах - именование частичного представления, таблицы стилей и сценария одинаково (за исключением расширения, конечно).

Мы добавили одну или несколько таблиц стилей, сценариев и частичных представлений в модель представления страницы. Затем мы использовали пользовательский помощник HTML для циклического прохождения соответствующего массива в каждом разделе содержимого и вставки необходимого содержимого. Больно было управлять тремя или более файлами для каждого компонента, но, по крайней мере, мы смогли уменьшить объем обслуживания на страницах хостинга.

Никогда не решалась проблема помещения частичного представления в частичное представление.

0 голосов
/ 06 октября 2010

Почему бы не поместить тег ссылки в частичное представление:

<link rel="stylesheet" href="yourstyle.css" type="text/css" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...