I have a mvc razor page (cshtml) and i tried to implement the bootstrp tabdrop in it. I am able to get the tabs however the tabdrops are not displayed. When i run the same code in a html file i am able to get the tabs as well as the tabdrop holding my extra tab names. however when i run the code in cshtml file its not getting displayed.
The extra tabs are displayed in the second line and the tabdrop is also not getting displayed.
Tabdrops Source
Here is my complete code of my cshtml file in which i have used the tabdrop.js...
<script src="Content/js/jquery-1.11.2.js"></script>
<script src="Content/js/bootstrap-tab.js"></script>
<script src="Content/js/bootstrap-tabdrop.js"></script>
<script src="Content/js/bootstrap-dropdown.js"></script>
<script>
if (top.location != location) {
top.location.href = document.location.href;
}
$(function () {
window.prettyPrint && prettyPrint();
$('.nav-tabs:first').tabdrop();
$('.nav-tabs:last').tabdrop({ text: 'More options' });
$('.nav-pills').tabdrop({ text: 'With pills' });
});
</script>
<link href="~/Content/css/bootstrap-tabdrop.css" rel="stylesheet" />
<div>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-6 connectedSortable">
<!-- Box (with bar chart) -->
<div id="loading-example">
<div class="box-body no-padding">
<div class="row">
<div class="col-sm-7">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="content">
<ul class="nav nav-tabs tabs-example" role="tablist">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
<li>Tab 7</li>
<li>Tab 8</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-tab1">
<p>This is tab 1!</p>
</div>
<div class="tab-pane" id="tabs-tab2">
<p>This is tab 2!</p>
</div>
<div class="tab-pane" id="tabs-tab3">
<p>This is tab 3!</p>
</div>
<div class="tab-pane" id="tabs-tab4">
<p>This is tab 4!</p>
</div>
<div class="tab-pane" id="tabs-tab5">
<p>This is tab 5!</p>
</div>
<div class="tab-pane" id="tabs-tab6">
<p>This is tab 6!</p>
</div>
<div class="tab-pane" id="tabs-tab7">
<p>This is tab 7!</p>
</div>
<div class="tab-pane" id="tabs-tab8">
<p>This is tab 8!</p>
</div>
</div>
<!-- top row -->
<!-- /.row -->
</section><!-- /.content -->
</aside>
</div>
</div>
I have the css files stored in the location
Content\css
and Javascript Files stored in the location
Content\js
The cshtml file has the bootstrap theme of ADMINLTE bootstrap.
Can any one help me with this? I want to know whether the bootstrap tabdrops works with cshtml file or not?
I had same issue. The tabdrop plugin initialized when window re-size.
I solved it by resizing the window after init tabdrop.
$(window).resize();
Related
I need to change an exising ASPX page by adding a tab control. This will change the layout and so I have started with this tag:
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">TAB1</li>
<li>TAB 2</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="tab1">
This is Tab 1
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
This is Tab 2
</div>
</div>
</div>
</div>
Now, I need to insert a control for tab panel. How can I share it and modify it on the fly during swtich from one tab to another tab?
I will appreciate it.
Thanks.
p.s. I'm not an expert in this so are there better ways or sample that you could share?
Because I'm using asp.net MVC the views are rendered in my body using #RenderBody()
My question is: am I correctly using the schema.org microdata?
In my example I have the html which is WebSite, it has some meta data in the header for WebSite itemscope.
Next I set the mainEntityOfPage to WebPage and add header, footer.
Some pages that will apear in the #RenderBody() have an own scope (e.g. ContactPage) and other have just data with some itemscopes of Product or Place.
Is this the correct way of using microdata?
Simplified _Layout.cshtml
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="test">
<meta itemprop="about" content="test">
</head>
<body itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage">
<div class="myheader" itemscope itemtype="http://schema.org/WPHeader">
<div class="...">
<nav class="navbar navbar-default navbarwrapper" itemscope itemtype="http://schema.org/SiteNavigationElement">
#*...*#
</div>
</div>
</div>
#RenderBody()
<div>
#* some other stuff*#
</div>
<div class="myfooter" itemscope itemtype="http://schema.org/WPFooter">
#*...*#
</div>
</body>
Simplified Index.cshtml (Home) which is shown in the #RenderBody(), and thus in the WebPage itemscope without any other itemscopes:
<div class="...">
#* content *#
</div>
Simplified Contact.cshtml (Home) which is shown in the #RenderBody(), and thus in the WebPage itemscope with other scopes:
<div class="banner">
#* banner stuff *#
</div>
<div class="myMiddleContent" itemscope itemtype="http://schema.org/ContactPage">
<div class="container">
<div class="row">
#*...*#
<div class="col-md-6" itemscope itemtype="http://schema.org/Place">
#*...*#
</div>
</div>
</div>
</div>
UPDATE:
This is what i have now:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="test">
<meta itemprop="about" content="test">
<meta itemprop="headline" content="my fancy pancy site">
<meta itemprop="cool, things here">
</head>
<body itemprop="mainEntity" itemscope itemtype="http://schema.org/ContactPage"> #* or /WebPage *#
<div class="myheader" itemprop="hasPart" itemscope itemtype="http://schema.org/WPHeader">
<div class="...">
<nav class="navbar navbar-default navbarwrapper" itemprop="hasPart" itemscope itemtype="http://schema.org/SiteNavigationElement">
#*...*#
</div>
</div>
</div>
#* injected via #RenderBody() *#
<div class="banner">
#* banner stuff *#
</div>
<div class="myMiddleContent">
<div class="container">
<div class="row">
#* list of products...*#
<div class="col-md-6" itemscope itemtype="http://schema.org/Product">
#*product x...*#
</div>
<div class="col-md-6" itemscope itemtype="http://schema.org/Product">
#* product y...*#
</div>
</div>
</div>
</div>
<div itemprop="contentLocation" itemscope itemtype="http://schema.org/Museum">
<link itemprop="additionalType" href="http://schema.org/TouristAttraction">
<meta itemprop="name" content="Foo bar">
<meta itemprop="sameAs" content="http://www.facebook.com/FooBar">
<div itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification">
#*...*#
</div>
</div>
#* end of injected via #RenderBody() *#
<div>
#* some other stuff*#
</div>
<div class="myfooter" itemprop="hasPart" itemscope itemtype="http://schema.org/WPFooter">
#*...*#
</div>
#*website/webpage creator / author / etc... *#
<div itemprop="creator" itemscope itemtype="http://schema.org/LocalBusiness">
<meta itemprop="name" content="...">
#*...*#
</div>
<div itemprop="copyrightHolder" itemscope itemtype="http://schema.org/LocalBusiness">
#*...*#
</div>
</body>
</html>
As Index.cshtml has no schema markup within, I'll talk about Contact.cshtml when inserted in _Layout.cshtml. This applies to Index.cshtml except when referring to content in Contact.cshtml.
The schema markup is read as follows:
WebSite
mainEntityOfPage: WebPage
WPHeader
SiteNavigationElement
ContactPage
Place
WPFooter
There are a number of problems with the markup, including but not limited to the lack of hierarchical organisation of the items on the page and incorrect schema.org usage. I will discuss your code line by line below:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
This markup informs that the HTML on this page is a web site. This is fine, but may not be what you intend. Terminology is important with schema markup — perhaps this should be a WebPage instead? I'll come back to this later.
<head prefix="go: http://ogp.me/ns#">
<meta property="og:title" content="test">
<meta itemprop="about" content="test">
</head>
<body itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage">
Here you're stating that the WebSite is the mainEntityOfPage: WebPage. This is almost certainly not what you intended. To clarify, you're saying the WebPage (this single page) mainEntity (the main content of this single page) is WebSite (the entire site). I encourage you to check schema.org/mainEntityOfPage for the specification of this property. Here's what I would do instead:
<!DOCTYPE html>
<html>
<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="test">
<meta itemprop="about" content="test">
</head>
<body itemscope itemtype="http://schema.org/WebPage">
Removing the itemprop removes the link from the WebPage to the WebSite and as you're not using any WebSite properties the WebSite schema can be removed.
<div class="myheader" itemscope itemtype="http://schema.org/WPHeader">
<div class="...">
<nav class="navbar navbar-default navbarwrapper" itemscope itemtype="http://schema.org/SiteNavigationElement">
#*...*#
</div>
</div>
</div>
These are two completely separate schemas. They are not associated with each other, nor with the WebPage schema. You're missing the itemprop attribute on both these. Both of them should include itemprop="hasPart" to define the following hierarchy:
WebPage
hasPart: WPHeader
hasPart: SiteNavigationElement
<div class="banner">
#* banner stuff *#
</div>
<div class="myMiddleContent" itemscope itemtype="http://schema.org/ContactPage">
This is a bit difficult, because ContactPage is a WebPage, but you're already in the scope of a WebPage and it's not a different page as such. Usually you would link these two with itemprop="mainEntity" but the item type is a WebPage, so this is incorrect. mainContentOfPage is for WebPageElement, but again you've defined an entire page.
This is where the WebPage schema should be replaced with ContactPage, but I understand that your ‘drop-in’ to #RenderBody() doesn't accommodate this. I guess mainEntity is the best you can do if you can't change the WebPage schema based on which page you're inserting (WebPage is still the most appropriate schema for Index.cshtml). If you are able to change the layout page when inserting the contact page, you should change the WebPage to ContactPage, and not use mainEntity. As the schema in the contact page as discussed later applies to the ContactPage schema, you do not need to make any further changes later.
The schema so far, presuming you are unable to change the layout page when inserting the contact page, is the following:
WebPage
hasPart: WPHeader
hasPart: SiteNavigationElement
mainEntity: ContactPage
<div class="container">
<div class="row">
#*...*#
<div class="col-md-6" itemscope itemtype="http://schema.org/Place">
This Place is completely separate from anything so far — again, an itemprop is missing from this schema. Use contentLocation (or define an Organization/etc to contain the Place). Then, you'll end up with…
WebPage
hasPart: WPHeader
hasPart: SiteNavigationElement
mainEntity: ContactPage
contentLocation: Place
#*...*#
</div>
</div>
</div>
</div>
<div>
#* some other stuff*#
</div>
<div class="myfooter" itemscope itemtype="http://schema.org/WPFooter">
Like WPHeader, WPFooter is missing hasPart. The finished schema looks like this:
WebPage
hasPart: WPHeader
hasPart: SiteNavigationElement
mainEntity: ContactPage
contentLocation: Place
hasPart: WPFooter
If you are able to change the layout page when inserting the contact page, the schema looks like this:
ContactPage
hasPart: WPHeader
hasPart: SiteNavigationElement
contentLocation: Place
hasPart: WPFooter
The corrected code (including fixing <nav></div>) is as follows:
<!DOCTYPE html>
<html>
<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="test">
<meta itemprop="about" content="test">
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="myheader" itemprop="hasPart" itemscope itemtype="http://schema.org/WPHeader">
<div class="...">
<nav class="navbar navbar-default navbarwrapper" itemprop="hasPart" itemscope itemtype="http://schema.org/SiteNavigationElement">
#*...*#
</nav>
</div>
</div>
#RenderBody()
<div>
#* some other stuff*#
</div>
<div class="myfooter" itemprop="hasPart" itemscope itemtype="http://schema.org/WPFooter">
#*...*#
</div>
</body>
<div class="banner">
#* banner stuff *#
</div>
<div class="myMiddleContent" itemprop="hasPart" itemscope itemtype="http://schema.org/ContactPage">
<div class="container">
<div class="row">
#*...*#
<div class="col-md-6" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
#*...*#
</div>
</div>
</div>
</div>
Google Structured Data Testing Tool won't show this correctly as some items are missing content.
Question background:
I have a MVC site that implements BootStrap. Currently each page is based on a MasterLayout view page. This master contains a dropdown list that will be populated with the cart items in the sites shopping cart along with the carts total monetary value. Please note currently the details in the dropdown are fixed values in the HTML:
What I'm after:
I've tried searching for this but cant seem to find exactly the answer. I want to be able to populate the dropdown in the navbar with the cart contents each time a page is loaded. To do this I need a method to extract the cart item objects which are stored in a SESSION object variable. Currently my MasterLayout view is just that, its a view that has no controller associated with it.
How do I go about assigning some sort of method to my MasterLayout so I can pass the cart items model to the view which in-turn will be set to the dropdown each time the page is loaded?.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/Styles.css")
#Scripts.Render("~/bundles/modernizr")</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo">HS<b>WH</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Products</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input type="text" class="form-control" placeholder="Search this site..." id="searchInput">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
<form class="navbar-form pull-right">
<div class="btn-group btn-group-cart">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="pull-left"><i class="fa fa-shopping-cart icon-cart"></i></span>
<span class="pull-left">Shopping Cart: 2 item(s)</span>
<span class="pull-right"><i class="fa fa-caret-down"></i></span>
</button>
<ul class="dropdown-menu cart-content" role="menu">
<li>
<a href="detail.html">
<b>Penn State College T-Shirt</b>
<span>x1 $528.96</span>
</a>
</li>
<li>
<a href="detail.html">
<b>Live Nation ACDC Gray T-Shirt</b>
<span>x1 $428.96</span>
</a>
</li>
<li class="divider"></li>
<li>Total: $957.92</li>
</ul>
</div>
</form>
</div>
</div>
</nav>
</div>
#RenderBody()
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 textAlignCenter">
<h5>Copyright © 2014 - Test Site</h5>
</div>
</div>
</div>
</footer>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown('toggle')
});
</script>
</body>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</html>
I would probably do this using a child action invoked from the master layout.
#Html.Action("Cart")
On server side create action returns PartialViewResult, which render your cart model.
At front-end render your partial via #Html.Action("YourPartialCart",'CartController') or ajax call.
All Views have a controller associated with them because the views are inherits. E.g. when you create a view you set it's Layout to be equal to the master.cshtml file.
Your view has a Model associated with it.
You can tackle this a couple of ways.
The simplest would be to use something like HttpContext.Current.Items, which is a request unique collection of shared data accessible from anywhere during an HttpRequest.
The next would be to use inheritance on your models. For example, Create Models like this
MasterModel
-> CartPageModel (inherits MasterModel)
-> AccountSettingsModel (inherits MasterModel)
etc.
Then on your master page set the model to MasterModel via the #Model MasterModel code, and on your view it would be #Model CartPageModel.
In your controller the code will populate values on the base model MasterModel and it's derrived type CartPageModel.
Question backgroud:
I am attempting to make a simple ASP.NET MVC website with the use of Twitter bootstrap. I am using Microsoft VS2013 Express on an MVC project.
The issue:
I have downloaded a Bootstrap website which should look as follows:
Mine currently look like:
I so far done the following to no avail:
Deleted the contents of the _layout.cshtml page, added the Header and Footer of the Index.html Header and Footer of the 'MetroMan' theme I've downloaded.
2.Replaced the contents of the 'Scripts' folder with the contents of the Scripts folder of the MetroMan theme.
3.Created a 'Template' Folder under the 'Contents' Folder of the project. In this I have added the img, css, fonts folders and there respective contents from the MetroMan theme.
The _Layout.cshtml file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Title here -->
<title>MetroMan</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="Your description">
<meta name="keywords" content="Your,Keywords">
<meta name="author" content="ResponsiveWebInc">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" href="css/settings.css" media="screen" />
<!-- Navigation menu -->
<link rel="stylesheet" href="css/ddlevelsmenu-base.css">
<link rel="stylesheet" href="css/ddlevelsmenu-topbar.css">
<!-- PrettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css">
<!-- cSlider -->
<link rel="stylesheet" href="css/slider.css">
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="#">
</head>
<body>
<!-- Sliding panel starts-->
<div class="slidepanel">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="spara">
<!-- Contact details -->
<p>
<i class="fa fa-envelope-o lightblue"></i> something#gmail.com
#*<i class="fa fa-twitter lightblue"></i> #something *#
<i class="fa fa-desktop lightblue"></i> 123-456-7890
</p>
</div>
</div>
<div class="col-md-4">
<div class="social">
<!-- Social media icons. Repalce # with your profile links -->
<i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-rss"></i>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Sliding panel ends-->
<!-- Header starts -->
<header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<!-- Logo starts -->
<div class="logo">
<div class="logo-image">
<!-- Image link -->
<i class="fa fa-desktop blue"></i>
</div>
<div class="logo-text">
<h1>Metro<span class="lightblue">Man</span></h1>
<div class="logo-meta">Cool Metro Theme</div>
</div>
<div class="clearfix"></div>
</div>
<!-- Logo ends -->
</div>
<div class="col-md-9 col-sm-8">
<!-- Navbar starts -->
<div class="navi pull-right">
<div id="ddtopmenubar" class="mattblackmenu">
<!-- Main navigation -->
<!-- Use the background color class in anchor tag for colorful menu -->
<ul>
<li>
<i class="fa fa-home"></i> Home
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li>Revolution Slider</li>
<li>Parallax Slider</li>
</ul>
</li>
<!-- Main navigation -->
<li>
<i class="fa fa-desktop"></i> Pages
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li>Landing Page</li>
<li>Coming Soon</li>
<li>Features</li>
<li>Service</li>
<li>Our Team</li>
<li>About Us</li>
<li>Resume</li>
<li>Tasks</li>
<li>
Sub Navigation
<ul>
<li>Nav Level #3</li>
</ul>
</li>
</ul>
</li>
<!-- Main navigation -->
<li>
<i class="fa fa-tablet"></i> Pages
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li>404</li>
<li>Testimonials</li>
<li>Clients</li>
<li>Pricing Table</li>
<li>Projects</li>
<li>Register</li>
<li>Login</li>
<li>Events</li>
</ul>
</li>
<li>
<i class="fa fa-comments"></i> Blog
<!-- Sub navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li>Blog #1</li>
<li>Blog #2</li>
<li>Blog Single</li>
</ul>
</li>
<li> <i class="fa fa-camera"></i> Portfolio</li>
<li> <i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
<div class="navis"></div>
<!-- Navbar ends -->
<div class="clearfix"></div>
</div>
</div>
</div>
</header>
<div class="clearfix"></div>
<!-- Header ends -->
#RenderBody()
<!-- Footer -->
<!-- Below area is for testimonial -->
<div class="foot blightblue">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- User icon -->
<span class="twitter-icon text-center"><i class="fa fa-user"></i></span>
<p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum dolor eget nisi <br />fermentum quis hendrerit magna vestibulum."</em></p>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="widgets">
<div class="col-md-3">
<div class="fwidget">
<h4>Contact</h4>
<p>Nullam justo nunc, dignissim at convallis posuere, sodales eu orci. </p>
<hr />
<i class="fa fa-home"></i> 123, Some Area. Los Angeles, CA, 54321.
<hr />
<i class="fa fa-phone"></i> +239-3823-3434
<hr />
<i class="fa fa-envelope-o"></i> someone#company.com
<hr />
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-rss"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Categories</h4>
<ul>
<li>Condimentum - Condimentum gravida</li>
<li>Etiam at - Condimentum gravida</li>
<li>Fusce vel - Condimentum gravida</li>
<li>Vivamus - Condimentum gravida</li>
<li>Pellentesque - Condimentum gravida</li>
<li>Fusce vel - Condimentum gravida</li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Subscribe</h4>
<p>Duis leo risus, condimentum ut posuere ac, vehicula luctus nunc. Quisque rhoncus, a sodales enim arcu quis turpis.</p>
<p>Enter you email to Subscribe</p>
<form class="form-inline" role="form">
<div class="input-group">
<input type="text" class="form-control" id="subscribe" placeholder="Subscribe...">
<span class="input-group-btn">
<button type="submit" class="btn btn-danger">Subscribe</button>
</span>
</div>
</form>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Recent Posts</h4>
<ul>
<li>Sed eu leo orci, condimentum gravida metus</li>
<li>Etiam at nulla ipsum, in rhoncus purus</li>
<li>Fusce vel magna faucibus felis dapibus facilisis</li>
<li>Vivamus scelerisque dui in massa</li>
<li>Pellentesque eget adipiscing dui semper</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copy">
<p>Copyright © Your Site - Home | About Us | FAQ | Contact Us</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</footer>
<!-- Scroll to top -->
<span class="totop"><i class="fa fa-angle-up"></i></span>
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<!-- prettyPhoto -->
<script src="js/jquery.prettyPhoto.js"></script>
<!-- isotope -->
<script src="js/jquery.isotope.js"></script>
<!-- Navigation menu -->
<script src="js/ddlevelsmenu.js"></script>
<!-- jQuery cSlider / Extra script for cslider -->
<script src="js/jquery.cslider.js"></script>
<script src="js/modernizr.custom.28468.js"></script>
<!-- Support -->
<script src="js/filter.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
<!-- This page JS -->
<script>
/* JS for SLIDER REVOLUTION */
jQuery(document).ready(function () {
jQuery('.tp-banner').revolution(
{
delay: 9000,
startheight: 500,
hideThumbs: 10,
navigationType: "none",
hideArrowsOnMobile: "on",
touchenabled: "on",
onHoverStop: "on",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
stopAtSlide: -1,
stopAfterLoops: -1,
shadow: 0,
fullWidth: "on",
fullScreen: "off"
});
});
</script>
</body>
</html>
The _Layout.cshtml seems to require CSS links that the browser cant find while the website is running.
Add the required files to the scripts folder, and create a style bundle. More on Bundles here: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
You can now render the Bundle in the _Layout.cshtml
Create a script bundle and render it in _Layout.cshtml if required.
When a web site shows like your broken example image, it is because no CSS is loading. This is almost certainly because the path to your CSS files is incorrect.
To easily assess this:
Load the page in Firefox/Chrome, and View Source.
Click the highlighted links in the source to each of the CSS files and see if they actually load. Most likely they will return a 404 Not Found.
Looking at your code the most likely solution is that you will need to change:
<link href="css/bootstrap.min.css" rel="stylesheet">
to
<link href="/css/bootstrap.min.css" rel="stylesheet">
or
<link href="/MyApplication/css/bootstrap.min.css" rel="stylesheet">
I have modal that opens up and in that modal i want to show tabbed navigation. i have the following code
<div id="TaskListDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
<h3>Task List</h3>
</div>
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Data 1
</div>
<div class="tab-pane" id="tab2">
<p>Data 2.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Close
</div>
</div>
the problem i have is that modal launches with the first tab but on clicking the second tab nothing happens.
what have i missed that it's not loading the second tab.
any help highly appreciated.