I've created a layout with all the styling etc. I have a menu and sub menu here, also a 3 column layout for content.
The left column will be used as a filter for reports most of the time, center for main content and the right column for help tips depending on the view you're at.
Can I define what the links in the sub menu are?
What is populated in the Left and Right columns, depending on the current view?
If you're looking to add new content in those areas, you want to be looking at sections.
You can see an example of this in the default project, just do a file-new-project to check out the layout page. You'll want something like this in your layout:
#RenderSection("SideBar", false)
The false here lets you opt-out of putting sidebar content on a view.
Your view would then have something like this:
#section SideBar {
// your sidebar stuff
}
As always, the Gu knows best: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
Cheers.
Related
This might be a weird question, but I have two layout files in my project and I have a single view I'd like to render separately in each layout file (depending on URL).
So the issue I have is when I define the sections in the view. Both layout pages have similarly functioning sections, but they are named different. For example, if I wanted to use layout1 it would be #section main1 and for layout2 it would be #section main2.
The view will render the same content within these sections, so can I dynamically set the section name rather than making two copies of the same content with just the section name changed?
You can easily change the layout page by setting the layout you want to use, but you can't dynamically set the name to my knowledge. If you really can't change the section names of one of them, what you could do is create a nested layout of the one, and in that nested layout define section names that match in the nested one.
Basically you define:
#section a
{
#RenderSection("namethatmatchesotherlayout")
}
And through this you can get something that matches.
I would like to share content (essentially blocks of html) between templates.
For example, suppose I have a common footer section with a graphic or two, text and links to 'about us', 'contact us' and so on.
I have different templates for different page layouts, but they all require this footer.
So far I can think of three ways :
Nesting templates : ie have a master one which has the footer content, then a child one for each layout, then the actual page template, but this could get tricky if some pages need a different footer
Using a Partial View to hold the footer content and using #Html.Partial() to pull in the partial view on the various templates
Create a settings document with the footer content and use Umbraco.Content() to fetch the footer property
Is any of these the recommended process (and are there any pitfalls?) or is there a better way?
I would normally do one of the following:
Have properties on the homepage for the footer links etc (in a separate tab) and pull in the values into the footer partial, this way you only have to set it once, rather than having it on every page
Have a Site Settings node at the same level as the home page and pull the values from there into the footer partial
That seems to be fairly standard from most of the Umbraco sites that I've worked on. I wouldn't have all of the properties on each page, unless you need a unique footer each page for some reason.
For example, lets say you add a tab called "Footer Settings" to the Home Page DocType with a single string property with the alias "copyRightNotice" and then you want to display that in a partial, your partial might look something like:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var rootPage = Model.Content.AncestorOrSelf(1);
<h3>#rootPage.GetPropertyValue("copyRightNotice")</h3>
}
I'm developing a ASP.NET MVC5 razor project and I have a cshtml divided into two parts, left part has a div with a treeview with options like a menu and the right part is a div that I would like to load cshtml that correspond to the option selected in treeview, ¿how can I do to achieve this?
Thanks
I am making the assumption that this is a simple navigation that is consistent amongst all pages, for which you can put the common navigation in the _Layout.cshtml. This file contains all the common , , tags used for each page. If you put your navigation in here then it will also be displayed on each page.
The navigation options can then link to your normal actions which display the corresponding views within the layout page.
In this tutorial the author discusses adding a simple navigation (in the section "Using a Layout for common site elements") in the _Layout with the difference that the navigation is at the top and not at the side. You can use css to style the page differently.
I know there are a few questions that have been answered but I didn't find something specific to my case.
I'm using the mobile capabilities of MVC4. So I created a _layout.mobile.cshtml and the corresponding views.
The error above happens when I go in with a mobile device. As you can see, it is trying to display the regular _layout.cshtml instead of the _layout.mobile.cshtml. So I'm assuming it is also trying to display the view (say Index.mobile.cshtm) which doesn't have the section in question. Basically it is mixing the regular layout with the mobile views.
This doesn't happen all the time. If I recycle the pool it works again for a while and then all of the sudden it goes back to having the error and it will continue until I recycle the pool again.
Has anyone seen this problem before that can shed some light?
Thanks
John
In the _ViewStart.cshtml available under the Views folder, change the Layout value to your custom layout. I think this may help.. (Make sure that you are returning View instead of partial view)
for example
#{
Layout = "~/Views/Shared/_layout.mobile.cshtml";
}
In case if you want to change the layout for a specific page you can explicitly define it at the top of the page as a page directive.
in the index.cshtml there is a section being called defined in the original layout file "_LayoutHome.cshtml" that is not defined in the new bootstrap layout.
specifically: #RenderSection("featured", required: false)
So the solution is to either add this section to the new layout (look for it in the original layout and paste it) or simply delete it from the index.cshtml.
I had also face the same problem I removed
#section featured {
From View
Another way to do this is to use a conditional block in your _ViewStart.cshtml page. For example, you may have two layouts depending on the device regular user. Using pseudo-code for the reading of the device/browser type bit, it would look something like this:
#{
if(userIsMobile)
{
Layout = "~/Views/Shared/_MobileLayout.cshtml";
}
else
{
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
I have used this to display or hide sections or menu items as needed for different classes of user; it should work as well for device-specific layouts.
Joey Morgan
In my ASP.NET MVC 3 project I have a master layout with a section defined. This section is responsible for displaying content in a sidebar, when it has any content assigned to it.
The problem I've encountered is the following:
I have some edit views, where both the sidebar and the main area is used for editing data. In this case the sidebar and the main body should be wrapped into one single form with a single submit button.
What is the best solution for this? The solution I came up with is that when the functionality I mentioned is necessary, I set a boolean property in my ViewBag. If this property is true, the master layout is rendered with the sidebar and the main content area wrapped in a form.
Is there a better way to this? The solution I described is a bit 'hackish' for me.
I would have two layouts. One with a seperate side-bar, and one without. Then, in the pages you need a sidebar with editable fields, you include the sidebar in your content page, not in the master.
The boolean you are using in the ViewBag can be better represented in the Model for the view of the master page. You can then include the side bar using a partial view. It would look somehting like this...
master.cshtml:
#using (Html.BeginForm("ActionName", "Controller", "POST")){
//
// Master form elements go here
//
//Side bar
#if(Model.ShowSideBar){
#Html.Partial("MySideBarPartialView" [, Model.SideBarModel ] )
#}
#}
You model (if any) should have a property that is set with the model for the side bar.