Ok, im probably doing this wrong... But in my main _Layout I have this:
<div id="navigation">
#RenderSection("Navigation")
</div>
which points to this in my Index.cshtml view:
#section Navigation{
<-- Need this to point to Views/Shared/Navigation.cshtml -->
}
But I don't want to have a huge file with all my code in it, so I need to know how to point to a file called "Navigation.cshtml" inside of this section - basically so I have all my sections in separate, independent files.
I tried just doing #RenderPage("Navigation.cshtml") in the _Layout instead of #RenderSection, and that gives errors.
--EDIT--
If I add this instead of #RenderSection()
<div id="navigation">
= #RenderPage("~Views/Shared/Navigation.cshtml")
</div>
I get this:
The file "~/Views/Shared/~Views/Shared/Navigation.cshtml" could not be rendered, because it does not exist or is not a valid page.
--EDIT--
FULL _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"> </script>
</head>
<body>
<div id="wrapper">
<div id="content">
<!-- BANNER -->
<div id="banner">
</div>
<!-- NAVIGATION -->
<div id="navigation">
#RenderPage("Navigation.cshtml")
</div>
<!-- MAIN DISPLAY -->
<div id="main">
#RenderBody()
</div>
<!-- FOOTER -->
<div id="footer">
</div>
</div>
</div>
Try with full path of view or you can use Html.Partial() or #Html.RenderPartial():
<div id="navigation">
#RenderPage("Navigation.cshtml")
</div>
Html.Partial():
<div id="navigation">
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</div>
Html.RenderPartial():
<div id="navigation">
#{ Html.RenderPartial("~/Views/Shared/Navigation.cshtml"); }
</div>
If you want to keep the #RenderSection("Navigation") in your _Layout you can try below code in your view.
#section Navigation{
#Html.Partial("~/Views/Shared/Navigation.cshtml")
}
OR you can change the _Layout as below.
<div id="navigation">
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</div>
Try just to render a page "Views/Shared/Navigation.cshtml" as a partial view like this:
<div id="navigation">
#Html.RenderPartial("Navigation")
</div>
Related
This question already has answers here:
top nav bar blocking top content of the page
(20 answers)
Closed 6 years ago.
I have a problem using Bootstrap's grid system, what's happening is that my nav bar is seemingly covering up the other content, which is intended to be underneath it!
I'm using ASP.NET MVC in this Project, so all I've done is set up a Layout page like this;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>You Hire it Ltd</title>
<script src="~/scripts/jquery-2.2.4.js"></script>
<script src="~/scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-md-8">
<div class="navbar-header">
<a class="navbar-brand" href="#">
You Hire It
</a>
</div>
<ul class="nav nav-pills">
<li class="active">#Html.ActionLink("Home", "Index")</li>
<li>#Html.ActionLink("About", "About")</li>
<li>#Html.ActionLink("T&Cs", "Legal")</li>
<li>#Html.ActionLink("Contact us", "Contact")</li>
</ul>
</div>
<div class="col-md-offset-2"></div>
<div class="col-md-2 pull-right">
<div class="container-fluid">
<div class="ButtonWrapper">
<button class="btn btn-success">Sign up/Login</button>
</div>
</div>
</div>
</nav>
</header>
</div>
</div>
#RenderBody()
</body>
</html>
and the page in question is like this;
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h1>Hello</h1>
</div>
</div>
</div>
I'm not entirely sure what's causing this behavior, any pointers would be greatly appreciated.
Thanks guys :)
You need to add padding to the top. From the Bootstrap docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body.
So in your style.css you need..
body {
padding-top:70px;
}
The below given code is not working even after including all the script files.I cannot see the toggle happen on the panel.
What needs to be added to the code?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row aet-content-fluid">
<div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<h2>
<a role="button" data-parent="#accordion"
data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
class="" aria-expanded="false"><span>Office Information</span>
</a>
</h2>
</div>
</div>
<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body office-detail-panelBody">
This content is straight in the template.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It took me a while but it seems the problem is in scripts you included.
First you need a jquery included.
And the second: Order is important.
When I set the <head> section to:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="example.js"></script>
</head>
It worked! Three first inclusions (link and two scripts) is the order recommended by bootstrap creators.
I am trying to execute a simple jquery mobile code. I just linked two pages. But everytime I am switching from one page to another, it is happening in default mode.Even after mentioning data-transition = 'pop'..
<!DOCTYPE html>
<html>
<head>
<title>This is my first jquery mobile programme</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role = "page" id="first">
<div data-role = "header" >
<h1>hello world !!</h1>
</div>
<div data-role = "content">
<p>This is the content part</p>
<p><a href ="#second" data-tansition = "pop" > Go to second page </a></p>
</div>
<div data-role ="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role = "page" id="second">
<div data-role ="header">
<h1>hello Praveen !!</h1>
</div>
<div data-role ="content">
<p> this is the second page</p>
<p><a href =#first> Go to first page </a></p>
</div>
<div data-role = "footer">
<h4>footer</h4>
</div>
</div>
You simply have a typo in your markup.
Change
data-tansition="pop"
to
data-transition="pop"
I have one template which consist of several pages (data-role="page").
Also I have data which should be generated by script. Generated data depends on page, where script launch.
How I can get page id or another unique info about it in events, connected with changing pages?
I've tried pageshow event, but I cant get where page id.
Thanks.
Here's an working example: http://jsfiddle.net/Gajotres/ecXuk/
Also take a look at my other article on similar question: https://stackoverflow.com/a/14010308/1848600
Here's a code example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
Back
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
And js part:
$('#index').live('pagebeforeshow',function(e,data){
alert('Index Page');
});
$("#second").live('pagebeforeshow', function () {
alert('Second Page');
});
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link