CODEWITHSUNDEEP
jqueryjquery-uiasp.net-mvc-4
AJ.
AJ.

Reputation: 16719

jQuery UI Menu not working in ASP.NET MVC 4

I'm working on a site built with ASP.NET MVC 4 that has a rather long menu in a left sidebar. I'm attempting to pretty things up by categorizing menu items in an accordion, with any items that have sub-items within the accordion expanding with a jQuery UI Menu. Here's an example of what I'm trying to do, with code pasted and slightly modified from the jQuery UI Menu page:

<div id="accordion" style="width: 300px;">
    <h3>Section 1</h3>
    <div>
        <ul id="menu" style="border: 0">
            <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
            <li><a href="#">Ada</a></li>
            <li><a href="#">Adamsville</a></li>
            <li><a href="#">Addyston</a></li>
            <li> <a href="#">Delphi</a>
                <ul>
                    <li class="ui-state-disabled"><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li><a href="#">Saarland</a></li>
            <li> <a href="#">Salzburg</a>
                <ul>
                    <li> <a href="#">Delphi</a>
                        <ul>
                            <li><a href="#">Ada</a></li>
                            <li><a href="#">Saarland</a></li>
                            <li><a href="#">Salzburg</a></li>
                        </ul>
                    </li>
                    <li> <a href="#">Delphi</a>
                        <ul>
                            <li><a href="#">Ada</a></li>
                            <li><a href="#">Saarland</a></li>
                            <li><a href="#">Salzburg</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Perch</a></li>
                </ul>
            </li>
            <li class="ui-state-disabled"><a href="#">Amesville</a></li>
        </ul>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
            faucibus urna.</p>
    </div>
</div>

Here's a jsFiddle of the above: http://jsfiddle.net/G54RH/

As you can see, it works fine in the jsFiddle. However, I can't for the life of me get it working in MVC 4. I've followed these steps several times with slight variations mainly involving CSS, and the menu never renders:

  1. Create a new MVC 4 application in VS 2012.
  2. Update jQuery to 1.9.1 (can't use 2.0 due to Microsoft.jQuery.Unobtrusive.Ajax incompatibility): update-package jQuery -version 1.9.1.
  3. Update jQuery UI to 1.9.2: update-package jquery.ui.combined -version 1.9.2.
  4. Install the ui-lightness theme for jQuery UI 1.9.2 (this is the theme I'm using with my actual application).
  5. Add the ui-lightness style reference to the bundle config (see below).
  6. Add/move script and style references <head> section of _Layout.cshmtl (see below).
  7. Copy/paste the exact same code from the jsFiddle into the index.cshtml view.
  8. Watch the menu not work on the resulting page.

I have published the MVC 4 project here and am happy to post any more details if requested. This is driving me crazy. What am I doing wrong?

BundleConfig addition:

bundles.Add(new StyleBundle("~/Content/themes/ui-lightness/css")
    .Include("~/Content/themes/ui-lightness/jquery-ui-1.9.2.custom.css"));

_Layout.cshtml changes/additions:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/ui-lightness/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/modernizr")

Upvotes: 1

Views: 3671

Answers (1)

AJ.
AJ.

Reputation: 16719

Oh my gosh, this is embarrassing. The _Layout.cshtml template has the following code:

<ul id="menu">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

I had duplicate <ul> elements with the ID "menu." I changed the ID of the <ul> in my view and now it works.

Upvotes: 1

Related Questions