CODEWITHSUNDEEP
javascriptasp.net-mvc
Nil Pun
Nil Pun

Reputation: 17383

Externalize JavaScript for Views

I've an ASP.NET MVC application with inline JavaScript that only applies to specific views.

If I put all the JavaScript on main Layout page, I get error message as not ID exists on all pages.

Is there a way to externalize the JavaScript for each view?

Upvotes: 0

Views: 179

Answers (4)

tBX
tBX

Reputation: 184

I use a HtmlHelper extension to register my used scripts on each controller-action and the "MasterPage" renders each registered script with the correct script tag.

HtmlHelper:

    public static void RegisterScript(string path)
    {
        if (!HttpContext.Current.Items.Contains("RegisteredScripts"))
            HttpContext.Current.Items.Add("RegisteredScripts", ";" + path);
        else
            HttpContext.Current.Items["RegisteredScripts"] = ";" + path;
    }

    public static MvcHtmlString RegisteredScripts(this HtmlHelper html)
    {
        var lines = new StringBuilder();
        if (html.ViewContext.HttpContext.Items.Contains("RegisteredScripts"))
        {
            foreach (var k in html.ViewContext.HttpContext.Items["RegisteredScripts"].ToString().Substring(1).Split(';'))
            {
                lines.Append(html.Script(k));
            }
        }

        return MvcHtmlString.Create(lines.ToString());
    }

    // Helper-functions
    public static MvcHtmlString Script(this HtmlHelper html, string path)
    {
        if (!ExistsInContext(html, path))
        {
            return Render(html, "<script type=\"text/javascript\" src=\"{0}\"></script>", path);
        }
        return MvcHtmlString.Create("");
    }
    private static bool ExistsInContext(HtmlHelper html, string path)
    {
        return html.ViewContext.HttpContext.Items.Contains(path);
    }

In the controller-action just call:

Helpers.HtmlHelpers.RegisterScript("~/Scripts/custom.js");

Hope this helps

Upvotes: 1

keyle
keyle

Reputation: 2837

The javascript could test if 'ID' is null or undefined, and not fire the code if it is.

Upvotes: 0

Brett Allred
Brett Allred

Reputation: 3487

Here is one way. This is using razor view engine

In you layout page between the head tags create a section

<head>
@RenderSection("Head", required: false);
</head>

then in your view create a section and put your script tags in it.

@section Head
{
     <script type="text/javascript">
         do some java script...
     </script>

}

You could also reference external libraries that are specific to that page, like a light box or something.

Upvotes: 2

John Kalberer
John Kalberer

Reputation: 5800

If you are using MVC 2 you can use a content placeholder. 

// this goes in your master page in your head tag
<asp:ContentPlaceHolder id="Script" runat="server"/>

// this goes in your view -- not partial
<asp:Content ID="Content1" ContentPlaceHolderID="script" runat="server">
    <script type="text/javascript" src="foo.js"></script>
</asp:Content>

In MVC 3 you can do this.

Upvotes: 1

Related Questions