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.
2 answers
solution1
0 2015-05-22 14:24:33
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.
solution2
0 ACCPTED 2015-05-22 14:36:41
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.