Is there a "working" example of using jquery tabs with MVC 4 views in VS2012, VS2013 or VS2015

Question

I've seen lots of examples (mostly VS2010) of using Tabs in MVC but I can't get any of them to actually work in a view with newer version of the VS IDE. So is there an example including references which works in VS2013?

My code which works in HTML but doesn't work in MVC is:

@{
    ViewBag.Title = "Edit1";
}

<h2>Edit1</h2>
<link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script>
<script>
        $(function () {
            $("#tabs").tabs();
        });
</script>
<div id="tabs">

    <ul>
        <li><a href="#tabs-1">Tab Header 1</a></li>
        <li><a href="#tabs-2">Tab Header 2</a></li>
        <li><a href="#tabs-3">Tab Header 3</a></li>
    </ul>

    <div id="tabs-1">
        Content for Tab 1 goes here.<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>

    <div id="tabs-2">
        Content for Tab 2 goes here.<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>

    <div id="tabs-3">
        Content for Tab 3 goes here.<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>

</div>

I know the references and script should be done through helpers but I'd like to see a full working code in case I was making any typo's.

The closest thing I've found to an answer are at http://stackoverflow.com/questions/15176574/jquery-tabs-is-not-working-under-new-asp-net-mvc4-project and http://stackoverflow.com/questions/13112519/mvc4-jquery-ui-does-not-work , but still can't get the tabbing (tabbed jQuery) to work. — Mick, May 21 '15 at 01:41
How would you like to explaint _Doesn't work_, because I just copy and pasted your same code and it works like as usual. — Guruprasad J Rao, May 21 '15 at 04:25
Did you add into a view which is loaded from the scaffolded controller?. For example redirecting from a url myURL/mycontrollername/edit via: public ActionResult Edit() . Also did you use VS 2012 or above? If so I'd like to know if it works in that environment for you. Maybe something is wrong with my IDE? { return View(); } — Mick, May 21 '15 at 11:23
what I meant to say is, did you get it to run in a .cshtml file using VS2012 or gretaer? I think the helper is clobbering the jquery ui library. — Mick, May 21 '15 at 13:24
Yea!! I ran it in cshtml file itself but not as in editor scaffolding. I dont think that will make any difference.. Try adding latest `jquery.js` and `jquery-ui` along with `jquery-unobtrusive` — Guruprasad J Rao, May 21 '15 at 13:28
I added the line but it still didn't work. Using the exact same code as above. It doesn't work when run via a controller call. — Mick, May 21 '15 at 15:03

score 0 · Answer 1 · answered May 22 '15 at 14:24

0

Apart from using partials, which isn't my intention, the only thing I could find was http://getbootstrap.com/javascript/#tabs .

For it to work Bootstrap has to be installed, easiest done via NuGet.

answered May 22 '15 at 14:24

Mick

1
3

Obviously the standard MVC tempate provided by VS has a menu tab, but that uses partials. – Mick May 22 '15 at 14:30

score 0 · Accepted Answer · edited May 23 '17 at 10:26

Even better: How to include javascript code in asp.net MVC4 View page?

full page code is:

 @{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Foo</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
</head>
<body>
    <div id="sections">
        <ul>
            <li><a href="#section-1">section-1 </a></li>
            <li><a href="#section-2">section-2 </a></li>
        </ul>
        <div id="section-1">
            section-1 content............  
        </div>
        <div id="section-2">
            section-2 content............ 
        </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    <script type="text/javascript">
        $("#sections").tabs();
    </script>
</body>
</html>

Is there a "working" example of using jquery tabs with MVC 4 views in VS2012, VS2013 or VS2015

2 Answers2