Forums » Code » ASP.NET » HtmlHelper method to dynamically load script references from a CDN

HtmlHelper method to dynamically load script references from a CDN

Previous | Next
Latest post 07-25-2010 2:13 AM by Pat. 3 replies.

  • 07-24-2010 6:16 PM

    • Pat
    • Top 10 Contributor
      Male
    • Joined on 04-27-2008
    • Tempe, AZ
    • Posts 45

    HtmlHelper method to dynamically load script references from a CDN

    Reply |Contact

    HtmlHelper method that pulls settings values from the web.config and dynamically adds script references to the CDN files to be displayed on the masterpage of a asp.net mvc web application. Adding another key to the web.config appsettings that starts with "CDN" will automatically be added to the pages.

    Web.config settings

    <appSettings>
        <add key="CDNJquery" value="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
        <add key="CDNJqueryUI" value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" />
        <add key="CDNJqueryValidate" value="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" />
        <add key="CDNMicrosoftAjax" value="http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js" />  
    </appSettings> 

    HtmlHelper.cs methods

    public static string CDNScripts(this HtmlHelper helper)
    {
        StringBuilder cdns = new StringBuilder();
        foreach (String name in ConfigurationManager.AppSettings.AllKeys)
            if (name.StartsWith("CDN")) cdns.Append(CDNScriptByPath(helper, ConfigurationManager.AppSettings[name]));
        return cdns.ToString();
    }

    public static string CDNScriptByPath(this HtmlHelper helper, string path)
    { return string.Format("<script src='{0}' ></script> ", path); }

    Render on Masterpage

    <head runat="server">
        <title></title>
        <%=Html.CDNScripts() %>
    </head>

    Patrick McNamara, BS-IS/CS, MBA, MAED
    ASP.NET Web Application Developer
    Asteryx, LLC.
    http://asteryx.com
    pat@asteryx.com

  • 07-24-2010 6:18 PM In reply to

    • Pat
    • Top 10 Contributor
      Male
    • Joined on 04-27-2008
    • Tempe, AZ
    • Posts 45

    Re: HtmlHelper method to dynamically load script references from a CDN

    Reply |Contact

    Here's what the <head> of the source looks like on a child page after the CDN references are loaded from the web.config.

    <head><title></title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' ></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js' ></script>
    <script src='http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js' ></script>
    <script src='http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js' ></script>
    </head>

    Patrick McNamara, BS-IS/CS, MBA, MAED
    ASP.NET Web Application Developer
    Asteryx, LLC.
    http://asteryx.com
    pat@asteryx.com

  • 07-24-2010 7:17 PM In reply to

    • Pat
    • Top 10 Contributor
      Male
    • Joined on 04-27-2008
    • Tempe, AZ
    • Posts 45

    Re: HtmlHelper method to dynamically load script references from a CDN

    Reply |Contact

    Here's an update that will also pull css files hosted on a cdn. Like the jquery themes hosted by google and described here. http://the-xavi.com/articles/jquery-ui-css-themes-hosted-on-cdn#base 

    Web.Config

    <appSettings>
      <add key="CDNJquery" value="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
      <add key="CDNJqueryUI" value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" />
      <add key="CDNJqueryValidate" value="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" />
      <add key="CDNMicrosoftAjax" value="http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js" />
      <add key="CDNCSSJqueryUI" value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" />   
    </appSettings>

    HtmlHelper.cs Methods

            public static string CDNScripts(this HtmlHelper helper)

            {

                StringBuilder cdns = new StringBuilder();

                foreach (String name in ConfigurationManager.AppSettings.AllKeys)

                {

                    if (name.StartsWith("CDN"))

                    {

                        if (name.StartsWith("CDNCSS"))

                            cdns.Append(CDNCSSByPath(helper, ConfigurationManager.AppSettings[name]));

                        else

                            cdns.Append(CDNScriptByPath(helper, ConfigurationManager.AppSettings[name]));

                    }

                }

     

                return cdns.ToString();

            }

     

            public static string CDNScriptByPath(this HtmlHelper helper, string path)

            { return string.Format("<script src='{0}' ></script> ", path); }

     

            public static string CDNCSSByPath(this HtmlHelper helper, string path)

            { return string.Format("<link rel='stylesheet' type='text/css' href='{0}'/> ", path); }

     

    Output

    <head><title></title><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' ></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js' ></script>
    <script src='http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js' ></script>
    <script src='http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js' ></script>
    <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css'/>
    </head>

     

    Patrick McNamara, BS-IS/CS, MBA, MAED
    ASP.NET Web Application Developer
    Asteryx, LLC.
    http://asteryx.com
    pat@asteryx.com
    Filed under: , , , ,

  • 07-25-2010 2:13 AM In reply to

    • Pat
    • Top 10 Contributor
      Male
    • Joined on 04-27-2008
    • Tempe, AZ
    • Posts 45

    Re: HtmlHelper method to dynamically load script references from a CDN

    Reply |Contact

    I ended up going a different direction with this and decided to store all the script and css references, for both CDNs and local files, in the appsettings of the web.config and then have a single htlmhelper method to render to the page.

    Web.Config

      <appSettings>

        <add key="refJSJquery" value="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />

        <add key="refJSJqueryUI" value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" />

        <add key="refJSJqueryValidate" value="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" />

        <add key="refJSMicrosoftAjax" value="http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js" />

        <add key="refCSSJqueryUI" value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" />

        <add key="refCSSSite" value="/Public/Css/Site.css"/>

        <add key="refCSSIe" value="/Public/Css/ie.css"/>

        <add key="refCSSPrint" value="/Public/Css/print.css"/>

        <add key="refCSSScreen" value="/Public/Css/screen.css"/>

        <add key="refCSSScreen" value="/Public/Css/plugins/buttons/screen.css"/>

        <add key="refCSSScreen" value="/Public/Css/plugins/fancy-type/screen.css"/>

      </appSettings>

    HtmlHelper.cs Method

            public static String GetReferences(this HtmlHelper helper)

            {

                StringBuilder refs = new StringBuilder();

                foreach (String name in ConfigurationManager.AppSettings.AllKeys)

                {

                    if (name.StartsWith("ref"))

                    {

                        if (name.StartsWith("refCSS"))

                            refs.Append(string.Format("<link rel='stylesheet' type='text/css' href='{0}'/> ", ConfigurationManager.AppSettings[name]));

                        else if (name.StartsWith("refJS"))

                            refs.Append(string.Format("<script src='{0}'></script> ", ConfigurationManager.AppSettings[name]));

                    }

                }

                return refs.ToString();

            }

    Render on Masterpage

    <head runat="server">

        <title></title>

         <%=Html.GetReferences()%>

    </head>

    Output

    <head><title></title><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>

    <script src='http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js'></script>

    <script src='http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js'></script>

    <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css'/>

    <link rel='stylesheet' type='text/css' href='/Public/Css/Site.css'/>

    <link rel='stylesheet' type='text/css' href='/Public/Css/ie.css'/>

    <link rel='stylesheet' type='text/css' href='/Public/Css/print.css'/>

    <link rel='stylesheet' type='text/css' href='/Public/Css/plugins/fancy-type/screen.css'/>

    </head>

     

     

     

    Patrick McNamara, BS-IS/CS, MBA, MAED
    ASP.NET Web Application Developer
    Asteryx, LLC.
    http://asteryx.com
    pat@asteryx.com
Page 1 of 1 (4 items) | RSS
Forums to discuss Microsoft ASP.Net Development and SQL
Powered by Community Server (Non-Commercial Edition), by Telligent Systems