Question

寻找一种在页面上添加一次脚本的优雅方式，就是这样我有一个部分视图，需要2个CSS文件和2个JS文件。在大多数地方，只需要1个部分视图。但是在一个页面上，我需要3个相同的局部视图，每个局部视图都有4个文件，所以我有6个JS链接和6个CSS链接。相当难看。

我最初的想法是使用jQuery查看标签（通过id）是否在页面上是否存在。如果不是，则将其添加进去。否则，什么都不做。这将是一个像....一样的内联脚本。

<script type="text/javascript" language="javascript">
     function(){
           var jQueryUICSS = $("#jQueryUICSS");
           if(!jQueryUICSS){
                document.write('link id="jQueryUICSS" href="/Content/smoothness/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />')
           }
           ...And so on for the other 3 tags.
 };

但是，我不确定它是否会起作用（或者主导者会接受它）：P

还有其他想法吗？

Answer 1

大卫，

我在我的代码中使用了几个静态htmlhelper来实现这种情况。它的工作原理是每个请求都会填充context.items集合，因此如果context.items集合中存在一个项目，那么它就不会被添加两次。无论如何，还有足够多的苏格兰语中的词语，'yill jist会让你感到沮丧'......

我们的脚本：

public static MvcHtmlString Script(this HtmlHelper html, string path)
{
    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 MvcHtmlString.Create("");

    // add the beast...
    context.Items.Add(filePath, filePath);

    return MvcHtmlString.Create(
        string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", filePath));
}

我们可爱的css：

// 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")%>
<%=Html.Script("~/Scripts/default.js")%>

玩得开心......

[edit] - 特别注意评论专栏：

// this of course only works for items going in via the current
// request and by this method

Answer 2

把它们放在你的主人身上。缓存CSS和Javascript文件。加载一次，不用担心。

Asp.net MVC多个（相同）部分视图在部分视图中带有<script>标签的页面</script>

2 个答案: