添加CSS引用页面的从一个局部视图

StackOverflow https://stackoverflow.com/questions/4210391

题

有没有一种方法，以CSS引用从局部视图添加到页面，，并让它们在页面的<head>渲染（所要求的的 HTML 4.01规范）？

有帮助吗？

解决方案 4

您可以使用HttpModule处理响应HTML和移动任何CSS /脚本引用到合适的地方。这不是理想的，而且我不知道的性能影响，但它似乎是唯一的方法来解决问题，而不是（a）一个基于JavaScript的解决方案，或（b）对MVC原则的工作。

其他提示

如果您正在使用MVC3＆剃须刀，最好的办法，以每页项添加到您的部分是： 1）呼叫RenderSection（）从布局页面内 2）你的孩子的网页内声明一个对应的部分：

<强> /Views/Shared/_Layout.cshtml： 

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

<强> /Views/Entries/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>

您也可以使用MVC的Telerik的开源控件，并做一些这样的：

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

在头部 和

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

在你的页面的botttom脚本部分。

和您可以继续在任何视图添加脚本，或局部视图，他们应该工作。

如果您不想使用该组件可以随时从那里激励自己，做一些更多的自定义。

呵呵，与Telerik的你也有组合和压缩脚本的选项。

您可以有，在风格头下降一个JavaScript块中的部分观点负载，但是这将是愚蠢的考虑，你可能希望在头部分出于同样的原因的JavaScript块。

最近，我发现了一些很酷虽然。可以序列的局部视图转换为字符串，并将其发送回客户端作为一个JSON对象的一部分。这样可以通过其它参数，以及，与该视图沿

返回一个视图作为JSON对象

您可以抓住用jQuery和Ajax JSON对象，并把它装载了局部视图，然后又是JSON财产可能是你的风格块。 JQuery的可以检查，如果你回到一个样式块，如果这样的话把它扔到头部分。

是这样的：

$.ajax(
{
     url: "your/action/method",
     data: { some: data },
     success: function(response)
     {
          $('#partialViewContainer).html(response.partialView);
          if (response.styleBlock != null)
               $('head').append(response.styleBlock);
     }
});

另一种方法，这违背了MVC的原理是使用一个ViewModel和响应到网页的Init-事件来设置所希望的CSS / JavaScript的（即myViewModel.Css.Add（“ CSS”），并且在头呈现在您的视图模型的CSS-集合的内容。

要做到这一点，你创建一个基ViewModel类，从所有其他机型继承，ALA 

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

在您的母版页设定要使用此视图模型

<%@ 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>

下面将只有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，从而限制了其有效性一点。

不隶属于 StackOverflow
scroll top