I am building an MVC application and am trying to use twitter bootstrap to build a responsive ui. I have setup my navigation as follows:
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="active">Dashboard</li>
<li>Sell</li>
<li>Products</li>
<li>Customers</li>
<li>Settings</li>
<li>Help</li>
</ul>
</div>
<div>
<div class="tab-content">
<div id="panel1" class="tab-pane">
page 1
</div>
</div>
<!--Panels 2-6 are omitted to save space -->
</div>
</div>
My question is what is optimal solution.
1) To find a way, to put this in a Razor Layout and load the individual panes as RenderSections
2) To scrap the Razor Layout and just apply the navigation to all content pages
In this case I would Probably recommend using RenderPage vs RenderSection as it would appear that you will always have the same content rendered in each panel. So most of your work will be done in your _Layout.cshtml. Your body is going to look like this:
<body>
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="active">Dashboard</li>
<li>Sell</li>
<li>Products</li>
<li>Customers</li>
<li>Settings</li>
<li>Help</li>
</ul>
</div>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Then you are going to have an Index.cshtml which will act as your landing page and it will look something like this:
<div>
#Html.Partial("ViewName")
// Reapeat for each tab
</div>
Then is each tab partial you will have your content for the tab:
<div class="tab-content">
<div id="panel1" class="tab-pane">
page 1
</div>
</div>
This can be done using layouts. Here are the basic steps:
Create a layout that includes your navbar. Put the layout in the /Views/Shared folder. (e.g. _LayoutMain.cshtml)
<body>
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="active">Dashboard</li>
<li>Sell</li>
<li>Products</li>
<li>Customers</li>
<li>Settings</li>
<li>Help</li>
</ul>
</div>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Create a template (optionally with a controller action) for each nav bar item (Sell, Products, Customers, etc.)
In each template, reference your layout like so:
#{
Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
Then add the following javascript code to the main layout page. This code actively selects which nav bar item you've currently clicked:
<script>
$(document).ready(function () {
var pathname = $(location).attr('pathname');
$('a[href="' + pathname + '"]').parent().addClass('active');
});
</script>
The nice thing about this approach is that you can nest as many layouts as you want. So for example, you could have a main navbar and within one of those pages you could have another navbar (such as tabs/pills) using the same approach.
This might be helpful too:
http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor.
Related
I am working on this ASP.NET MVC Core project where I want to a View to be rendered on the screen with the PartialView already rendered in the View. In other words,
I have the following View:
View: Index.cshtml
...
...
<div class="card">
<div id="divPageLoad"></div>
</div>
PartialView: Details.cshtml
...
...
// Some code
...
...
I want to render Details.cshtml in divPageLoad of Index.cshtml when Index.cshtml loads on the screen. In other words, it should seem as if the contents of Index.cshtml and Details.cshtml exist on one page, where in reality, they are two different Views.
I am presently making it work in the following way:
<div class="card">
<div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id="lnk_InventoryDetails" onClick="GetInventoryDetails()">Details</a></li>
<li><a data-toggle="tab" href="/Inventory/Locate">Locate</a></li>
</ul>
</div>
<div id="pageLoadId"></div>
JavaScript Code:
<script type="text/javascript">
function GetInventoryDetails() {
$('#divPageLoad').load("/Constructor/Action");
};
</script>
I have used onClick(). But I know that in this way, the page will load only after thatButton is clicked. Else it won't run. I basically want to replace onClick() with something else, or take a different approach.
Here is an answer as requested:
<div class="card">
<div id="divPageLoad"></div>
</div>
#Html.Partial("PartialViewName")
OR
#Html.Partial("PartialViewName", Model) //If you need to pass a model object to partial
I have been working with MVC for a few months and its going well, but I can't figure out how to create a Sidebar menu all the way to the utmost left of the screen.
This is a standard MVC 5 web application.
What I think the problem is, is that in _Layout View, the
#RenderBody()
falls within the div tag:
<div class="container body-content">
So all code in any of my created Views is contained in that container.
Is this even the reason?
My View:
<h2>TestSideBar</h2>
<div class="container" id="sidebar" style="margin-left: 0px">
<div id="wrapper" class="wrapper">
<!-- Sidebar -->
<div class="nav navbar-left">
<div class="sidebar-wrapper">
<div class="logo">
<a href="#" class="simple-text">
Placeholder
</a>
</div>
<ul class="nav">
<li>
<a href="#Url.Action("Item1", "Controller")">
<span class="glyphicon glyphicon-off "> Item 1</span>
</a>
<a href="#Url.Action("Item2", "Controller")">
<span class="glyphicon glyphicon-star "> Item 2</span>
</a>
</li>
</ul>
</div>
</div><!-- end navbar-left -->
</div><!-- end sidebar container -->
<div class="main-panel">
Main Content Stuff Here
</div><!-- end main-panel -->
</div><!-- end wrapper-->
I have attached 2 images, how it looks now and how I want it to look
I have tried using the #section RenderLeft as well.
I just can't get it to look the way I want.
Thanks.
Well I have found two ways to do this so far. There could be better ones out there.
Firstly I was correct in my assumption that the container div in _Layout View was causing the problem.
Option 1
In the _Layout View, before the container div and RenderBody, use #RenderSection code
#RenderSection("LeftMenu", required: false)
<div class="container body-content">
#RenderBody()
Then in the View you want the menu, enclose the menu code in:
#section LeftMenu{
<!-- Content Here -->
}
The "LeftMenu" is just a name, any name can be used here.
This causes the code in the #section to be "run" before the RenderBody.
This works, but has a drawback in that since I possible want to use the menu in more than one View, I have to add the #section LeftMenu {} code in each View I want it because you cannot use #section {} in a partial view.
Option 2:
In _Layout View, remove the container div that encloses #RenderBody
In each View enclose the code in a container div. Create the menu in a partial view and render it (#Html.Partial) in each view you need it, before the content code.
Neill
You can use Html.RenderPartial
Create a view, e.g: _LeftMenu.csthml and put it in the "Views/Shared" folder.
Put the left menu html in that view, example(this can of course be done with Divs and a Model if you prefer)
<ul class="list-group">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="NextController" asp-action="Index">another menu link</a>
</li>
</ul>
Then divide the content area in your Layout page into two, one for your left menu and the second for the render body area that will contain the child pages:
<body>
<header>
</header
<div class="row col-md-12 FullContent">
<div class="col-md-2 CustomLeftnavbar">
#{Html.RenderPartial("~/Views/Shared/_LeftMenu.cshtml");}
</div>
<div class="container col-md-10">
<main role="main" class="CustomBody">
#RenderBody()
</main>
</div>
</div>
</body>
This way you will not need to go against the DRY principle as it will be shared with any and all other pages that uses the same layout page
I am working on a site that uses Bootstrap for desktop and jQuery Mobile for mobile devices. I am running into a problem with the HTML structure for tabs in Bootstrap vs. pages in jQuery Mobile. Essentially the jQuery Mobile pages end up being nested if I use Bootstrap's HTML (as seen below). When the jQuery Mobile data-role="page" tags are nested it does not seem to work. Any ideas?
<div class="tabbable" data-role="page"> <!-- 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-role="page">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2" data-role="page">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
The solution I used to solve this problem was a jquery mobile plugin called subpage.
I changed the nested pages to subpages and it worked.
My application has a button (on app.html) that leads to a new page with a navbar (app2.html). The Navigation has an internal link (Toolbar 2) that should show the internal div "page2".
When coming from the button with changePage() it is not able to display the content when clicking on the navigation. It seems like the reloadPage is not working.
app.html looks like this:
<body>
<!-- Home -->
<div data-role="page" id="page3">
<div data-role="content">
<a id="asdf" data-role="button" name="asdf">
Button
</a>
</div>
</div>
<script>
$('#asdf').click(function(){
$.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });
});
</script>
</body>
This is my app2.html:
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div id="navigation" data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar1
</a>
</li>
<li>
<a href="#page2" data-theme="" data-icon="check">
toolbar 2
</a>
</li>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="header">
<h3>asdfasd</h3>
</div>
</div>
</div>
</body>
Where's the problem? I'm using jQuerymobile 1.1.1 with jQuery 1.7.1.
Here are the files:
app.html
app2.html
You cannot have two jQuery Mobile pages in the second page. When you click on the link in app.html, it will do an ajax request to app2.html to get the data-role="page" and it expects only in the html file. You should read up on the difference between a single page template and a multi-page template.
You can find more in the docs, look for "Linking within a multi-page document".
tl;dr: You either need to put all the pages in one HTML file and link to the id or put all the pages in separate HTML files and link to the file.
I'm new to jquery mobile and need some help to move further in my application
I used NAVBAR with two buttons view and two buttons are navigating fine and displaying different list views & when I click on list view item the page is navigating to another HTML page and displaying related data but the problem is I'm not able to view navbar in next page...
I want the navbar to be constant for all pages like tabgroup activity in android.
anyone please help me with good example and application or show me some good links to achieve this...
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar" id="nav1">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
<div class="ui-grid-but" id="list">
<div class="ui-block-a">
<a href="#lv1" data-role="button" id="button1" >
<img src="task.png" alt="Tasks" /></a>
</div>
<div class="ui-block-b">
<a href="#lv2" data-role="button" id="button2">
<img src="reminder.png" alt="Reminders" /></a>
</div>
</div>
<div class="def_content_div" id="dashboard">
<ul data-role="listview" data-inset="true">
<li>List View 1 </li>
<li><a href="#lv2" >List View 2</a> </li>
<li><a href="#lv3" >List View 3</a> </li>
<li><a href="#lv4" >List View 4</a> </li>
</ul>
</div>
<div class="content_div" id="deals">
<ul data-role="listview"data-inset="true">
<li> List View 5</li>
<li> List View 6</li>
<li>List View 7</li>
<li>List View 8</li>
</ul>
</div>
</div>
The best way to achieve this is to put your navbar inside a JQM header and use the same data-id for every header. i.e.
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
You have to include the above code snippet in every listview page. That will give the appearance of a constant fixed nav menu.
Here is an example as requested http://jsfiddle.net/codaniel/z5VYF/1/
I got the solution from http://jquerymobile.com/demos
According to codaniel's answer, we need to include the code snippet in every listview page.
And then, we need to add the following class to the "current" nav-button of every page.
class="ui-btn-active ui-state-persist"
For the first front page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
And the second page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>