ASP.NET MVC 4 issues with including external javascript

Question

I'm new in MVC and i got stuck with using a downloaded javascript controller in a partial view. I downloaded this treeview:
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
Then I placed the treeview.js and demo.js scripts in the project, with the css and the images folder. The 2 .js files are in the /Scripts/treeview folder and the css and images folder is in the /Content folder.

I added these to my BundleConfig.cs:

        bundles.Add(new ScriptBundle("~/bundles/treeview").Include(
                    "~/Scripts/treeview/jquery.treeview.js",
                    "~/Scripts/treeview/demo.js"));

        bundles.Add(new StyleBundle("~/Content/css/treewiew").Include("~/Content/jquery.treeview.css"));

My partial view looks like this:

<ul id="browser" class="treeview">
    <li><span class="folder">Folder 1</span>
        <ul>
            <li><span class="file">Item 1.1</span></li>
        </ul>
    </li>
    <li><span class="folder">Folder 2</span>
        <ul>
            <li><span class="folder">Subfolder 2.1</span>
                <ul id="folder21">
                    <li><span class="file">File 2.1.1</span></li>
                    <li><span class="file">File 2.1.2</span></li>
                </ul>
            </li>
            <li><span class="file">File 2.2</span></li>
        </ul>
    </li>
    <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
        <ul>
            <li><span class="file">File 3.1</span></li>
        </ul>
    </li>
    <li><span class="file">File 4</span></li>

In the _Layout.cshtml I added these 2 lines in the head section, just before the @Styles.Render("~/Content/css") and @Scripts.Render("~/bundles/modernizr") lines:

<link href="@Url.Content("~/Content/jquery.treeview.css")" rel="stylesheet" type="text/css" />
<script runat="server" type="text/javascript" src="@Url.Content("~/Scripts/treeview/jquery.treeview.js")"></script>

And lastly, I call the partial view in the Index view, which is generated automatically with the project. The css works almost fine, I've got the styled list, but it doesn't functional as a tree view controller.

Now, I found these posts, but these weren't able to help me:
How to include javascript code in asp.net MVC4 View page?
MVC4 partial view javascript bundling Issue

I just can't see what's the problem at me. I've just started to learn javascript recently, MVC was totally new and unknown to me 5 days before, and I stuck with this problem for 3 days now and I'm angry at myself for that. Please, help me! Thanks a lot!

Chamika Sandamal · Accepted Answer · 2013-07-07T16:20:33.827

2

Add this line instead of using your script registration,

@Scripts.Render("~/bundles/jquery")    
@Scripts.Render("~/bundles/treeview")

Note: treeview should register after the jQuery reference.

edited Jul 07 '13 at 16:20

answered Jul 07 '13 at 15:27

Chamika Sandamal

23,565
5
63
86

It doesn't seem to work. I added that line to the Index view, the partial view, and even to the _Layout. Nothing so far. – user2082422 Jul 07 '13 at 16:15
As far as I understand, you have to render every javascript after jquery, because they use jquery, right? And what if I render my external .js in a different page instead of the _Layout page? – user2082422 Jul 07 '13 at 16:27
You have to register all the jQuery plugins after the jQuery reference. And remember if you register the main reference again after the plugins, it will reset all the registered plugins. You don't need to register all in your layout. You can register the main reference in the layout and use render section after the that to register rest of the scripts. – Chamika Sandamal Jul 07 '13 at 16:32

ASP.NET MVC 4 issues with including external javascript

1 Answers1