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
Related
I have a _Navigation.cshtml view, to which I am trying to add some conditional <ul> </ul> tags using the Razor IsSectionDefined() and #RenderSection() directives.
However, I'm getting the following exception:
The file "~/Views/Shared/_Navigation.cshtml" cannot be requested directly because it calls the "RenderSection" method.
As you can see in my below HTML snippet, I can add #RenderSection("bobtest") very easily into my _Layout.cshtml view, but NOT in the _Navigation view :
Snippet from ..\Views\Home\Index.cshtml :
#section bobtest{
<ul class="nav nav-second-level collapse #Html.IsSelected(controller: "Dashboards", cssClass: "in")">
<li class="#Html.IsSelected(action: "Dashboard_1")">Dashboard v.1</li>
<li class="#Html.IsSelected(action: "Dashboard_2")">Dashboard v.2</li>
<li class="#Html.IsSelected(action: "Dashboard_3")">Dashboard v.3</li>
</ul>
Here is my _Layout.cshtml, which pulls in "_Navigation", "_TopNavbar", and "_Footer"
<div id="wrapper">
<!-- Navigation -->
#Html.Partial("_Navigation")
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Top Navbar -->
#Html.Partial("_TopNavbar")
<!-- Main view -->
#RenderBody()
#RenderSection("bobtest", required: true) <!-- THIS WORKS... -->
<!-- Footer -->
#Html.Partial("_Footer")
</div>
<!-- End page wrapper-->
</div>
and here is a snippet from the _Navigation view:
<nav class="navbar-default navbar-static-side" role="navigation">
<div id="sidebar-collapse" class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="nav-header">
<li class="#Html.IsSelected(controller: "Whatif")">
<i class="fa fa-th-large"></i> <span class="nav-label" data-i18n="nav.dashboard">Current Portfolios</span> <span class="fa arrow"></span>
#if (IsSectionDefined("bobtest"))
{
#RenderSection("bobtest", required: false)
}
</li>
</ul>
</div>
</nav>
It will only cause an exception here, so I need some clarity on how to add conditional tags to my _Navigation view.
thanks,
Bob
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.
I am searching a plugin in jQuery mobile for tab implementation. tabs must be in content of the page. This is wat I have...
<div data-role="page" id="nav">
<div data-role="page" id="nav">
<div data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
</ul>
</div>
<div data-role="page" id="one" data-transition="slide">
<div data-role="content" style="background-color:#ff0;">
<h1>One</h1>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h3>
Footer
</h3>
</div>
</div>
When i click on page id "one". it is not displaying its respective content.
Can anyone pls help me.
Or you can use my tabview plugin. Based on JQM collapsbile set, you just need to replace JQMs collapsible and collapsible set widget with my versions. Old collapsibles will continue working as normal. When you add data-type="horizontal" to a collapsible set, it becomes ... tabs...
Demo here, Repo on Github.
I like the other solution, too.
I modified jQuery.mobile-tabs to allow the tab bar to be placed anywhere within the page. Is this what you had in mind?
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>