代码之家 › 专栏 › 技术社区 › DavidAndroidDev

Asp.net MVC在一个页面上有多个(相同的)部分视图,部分视图中有<script>标记

asp.net-mvc javascript

DavidAndroidDev · 技术社区 · 14 年前

寻找一种优雅的方式让脚本在一个页面上添加一次,就这样。
我有一个部分视图,需要2个CSS文件和2个JS文件。在大多数地方,只需要一个局部视图。但是在一个页面上,我需要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

还有其他想法吗?

2 回复 | 直到 14 年前

jim tollan 14 年前

大卫,

我在代码中使用了几个静态htmlhelper来实现这个场景。它的工作原理是,每个项目都会收集上下文项目集合,因此如果一个条目存在于CutExtItitem集合中,那么它不会被添加两次。不管怎么说,够多的苏格兰话了,'你会成为瓦坦的科德'。。。

对于我们的脚本:

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

John Farrell 14 年前

把它们放在你的主人身上。CSS和Javascript文件被缓存。装一次,别担心。