javascript - Asp.net MVC 页面上的多个(相同的)部分 View ，部分 View 内带有 <script> 标记

Question

寻找一种优雅的方式在页面上添加一次脚本，就是这样。
我有一个需要 2 个 CSS 文件和 2 个 JS 文件的部分 View 。在大多数地方，只需要其中 1 个部分 View 。但在单个页面上，我需要 3 个相同的部分 View ，每个部分 View 都有 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

大卫，

我在代码中使用了几个静态 htmlhelpers 来应对这种情况。它的工作原理是 context.items 集合根据请求填充，因此如果 context.items 集合中存在某个项目，那么它不会被添加两次。无论如何，wisdOOOm 的苏格兰语已经够多了，“yill jist be waantin the coade”...

对于我们的脚本:

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")%>

玩得开心...

[编辑] - 特别注意评论行:

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