I am new to ASP MVC.
Im trying to build a website with a header, footer, menu and a place to the main content.
What is the best approach for that?
Partial views, areas?
Thanks
Use layout.chtml file, This will work as Master page to your site and will be available for all your views.
For MVC3 you may see: ASP.NET MVC 3: Layouts and Sections with Razor
What are Layouts?
You typically want to maintain a consistent look and feel across all of the pages within your web-site/application.
ASP.NET 2.0 introduced the concept of “master pages” which helps
enable this when using .aspx based pages or templates. Razor also
supports this concept with a feature called “layouts” – which allow
you to define a common site template, and then inherit its look and
feel across all the views/pages on your site.
You can use partial views for Header and Footer. For most of my Asp.Net MVC Projects, I use partial Views in master page. You can add your menu in the header partial view.
<body>
<div class="contentdiv">
<% Html.RenderPartial("Header"); %>
<div class="row-fluid">
<div class="container containerbg" >
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<% Html.RenderPartial("Footer"); %>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</div>
</body>
Related
I am being told to re-design MasterPage. My company uses AbleCommerce system and let me tell you its very tricky. I have a different layouts templates created in HTML by AbleCommerece long time ago and now i need to re-design my masterpage.
ex:
OneColumn.html
<div id="wrapper">
[[layout:header]]
<div id="Content">
<div id="MainContent">
[[layout:content]]
</div>
</div>
[[layout:footer]]
</div>
RightSidebar.html
[[layout:header]]
<div id="outerContentWrapper">
<div id="innerContentWrapper">
[[layout:content]]
[[layout:rightsidebar]]
</div>
</div>
<div id="footerbar">[[layout:footer]]</div>
MasterPage:
only one ContentPlaceHolder in MasterPage
<asp:ContentPlaceHolder ID="PageContent" runat="server">
</asp:ContentPlaceHolder>
ContentPage
<cb:ScriptletPart ID="ShowProduct" runat="server" Layout="One Column" Header="Standard Header" Content="Show Product Page" Footer="Standard Footer" Title="Show Product" AllowClose="False" AllowMinimize="false" />
Now, Content Page looks for One Coulmn.html and loads the html then One Column Loads the Standered Header.html page which reference header webuser control and layout loads Show Product Page.html page which reference another set of webuser controls and so on..
Issue: by following this design we now have over 100 html files which references Asp.Net UserControls. So whenever we want to create new page on our website, we have to create .aspx and then include **<cb:ScriptletPart>**, create new set of HTML files and then USerControls.
I want to get rid of this system and Load userControls directly inside the .aspx page, that's easy BUT then i dont know how can i inform masterpage to use One Column Layout OR anyother Layout.
Is there way to tell masterpage from content page to use the layout sepcified by public property in content page. OR anyother suggestion to deal this kind of situation.
To access controls within the master page, there are two approaches:
By means of public properties and methods
If you observed, the content page doesn’t have the header and title tags.
So if we want to modify the title of the content page –and this is obligatory- we need to access the title tag.
Primarily we need to change the title tag so it is accessible from the code page.
Simple, we need to add id and runat attributes as follows:
<title id="sometitle" runat="server"></title>
Then, in the master page, add this property:
public string SomeTitle
{
set
{
sometitle.Text = value;
}
}
And finally within the content page, we add this snippet on the Load event.
MasterPage masterPage = MasterPage)this.Master;
masterPage.mainTitle = "Hello World";
Please Note:
Because the Master property returns a reference of type MasterPage, we need to cast it to MasterPage type. We can avoid this by adding the #MasterType directive in the content page as follows:
<%# MasterType TypeName=" MasterPage " %>
MasterPage myMaster =this.Master;
I hope that helps.
So, using the aspx rendering engine for the MVC3 framework, it is easy to define a section in the master layout page and insert html or asp code inside those sections that will appear on every page, like so:
On the master layout
<!-- Secondary content -->
<div id="content-secondary">
<asp:ContentPlaceHolder ID="NavigationSecondary" runat="server">
<% Html.RenderAction("Menu", "Navigation", new { #id = "nav-secondary"}); %>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="cphSecondary" runat="server" />
</div>
<!-- /Secondary content -->
You can see that a Menu is rendered inside the ContentPlaceHolder called NavigationSecondary. So on every page that I create, the menu is displayed by default and any other extra content is displayed below that.
Now, how would I interpret this in the Razor engine? I couldn't find much info online. I did find something that shows how to use default content. But would that default content be erased when inserted with content from another page?
Razor view engine allows checking (in _Layout.cshtml) if layout section has been implemented by views so with this you could mimic putting code inside ContentPlaceHolder.
<div id="content-secondary">
#if (IsSectionDefined("NavigationSecondary"))
{
Html.RenderAction("Menu", "Navigation", new {#id = "nav-secondary"});
#RenderSection("NavigationSecondary")
}
</div>
Hope this is what you are looking for.
As per my layout one form(all forms with runat=server) should be in header right top and
the other one I want to place in section's article. So I will have no problem in positioning of contents. How do I solve it?
My design: Login & logout are contained in form at header top-right;
article:Embedding AJAX4 accordian & tab container
but this requires it to be placed in form as <asp:scriptManager should be in form having runat=server.
(article has aside_left & aside_right near to it seperated and header at top seperated which contains the form)
So any Solution for this?
Do I have to change the logic?
I am working with visual studio 2010 asp.net 4 IIS v6 of windows7 x86
If I understand your problem correctly, you can do what you are looking for with Master pages: http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
Create a master page with a content section for the header and another for the rest of the page. The create pages for both of those content sections.
This sounds like you need a MasterPage containing your login and logout buttons, and then a content page containing your 'article'.
Master page (.master)
<form id="form1" runat="server">
<!-- login / logout controls here -->
<asp:ContentPlaceHolder ID="Article" runat="server">
</asp:ContentPlaceHolder>
</form>
Content page (.aspx):
<asp:Content ID="ArticleContent" ContentPlaceHolderID="Article" runat="server">
<!-- Accordion and things here -->
</asp:Content>
If that's not what you're after, then this link provides details on how to implement multiple forms on a page in ASP.NET.
I am building a hybrid MVC/Webforms application where my MVC views are using an asp.net webforms 2 MasterPage. Everything has been working perfectly until I decided to put a form in my MVC view. Since ASP.NET Webforms wraps the entire page in a form element and you can't have a form within a form, I'm a little bit stuck.
There are a load of legacy controls in the master page which rely on the post back so I can't just disable it. The one thought I have at the moment is that all of the controls which rely on the aspnetForm form are above of the MVC page so was wondering if there is anyway to control when asp.net closes the aspnetForm form tag? Or does anyone have any other thoughts about how I could solve this problem?
I've been here before, and ended up plumping for separate master pages, however:
Maybe you haven't looked too closely, but you do have control over where and how that form is wrapped around your entire container
[Edit]: More complete example:
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="LegacyContentHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<asp:ContentPlaceHolder ID="MvcContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</body>
Surely you can just move that around the appropriate placeholders for the Webforms stuff, and leave the other placeholders outside the scope of it?
This generates the following markup if used on a page
<body>
<form name="aspnetForm" method="post" action="Test.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDMyNDU0NjAzZGT01Ocz+ON8w56SI8x7nj2/h8B/4g==" />
</div>
<div>
Web forms behaviour has been generated here, boo
</div>
</form>
MVC content has been generated here, yay
</body>
[Edit]
Note: I've checked our code now, had to go back a few versions - what we also did is had three master pages, one for the skeleton described above, one with the specific ASP.NET Webforms stuff, and one inheriting from that for just the MVC stuff.
Kept things kinda clean, and ready for migrating it away from Webforms in the future.
You shouldn't have a problem, you control where the form tag is in your masterpage. Are you saying to need to close the masterpage's form tag early when using it for MVC, and leave it where it is for WebForms?
You'll probably need to mess about with the control tree, when I've done this before I've used two masters, although you might be able to get away with abstracting a common base.master, then have mvc.master and webforms.master
I am working on a web application that has a single master page and several content pages. Each page will have a small sidebar to the right of the main content with some brief content. However, that brief content is specific to the page you are on. I can't decide whether to put that on each individual page, or in the master page in a MultiView with some logic in code-behind to specify which view is shown based on which page you are on.
Which seems more elegant? I'm still fairly new with ASP.NET and I'm trying to get a good feel for proper architecture, etc.
You can create multiple content placeholders in a single masterpage. So in your case I would create two. One for the article's content and one for the sidebar like:
<!-- some html-->
<asp:contentplaceholder id="ArticleContents" runat="server">
</asp:contentplaceholder>
<!-- some more html-->
<asp:contentplaceholder id="ArticleSidebar" runat="server">
</asp:contentplaceholder>
<!-- even more html-->
then you could have the article contents and the sidebar contents both in the same page and place it in the correct spot using something like
<asp:Content ID="article" ContentPlaceHolderID="ArticleContents" Runat="Server">
Your article
</asp:Content>
<asp:Content ID="sidebar" ContentPlaceHolderID="ArticleSidebar" Runat="Server">
Your sidebar
</asp:Content>
If you want some manageability in the case of your site getting larger and needing more of these custom sidebars then I would not put anything beyond standard layout in the master page.
What is wrong with having an additional ContentPlaceHolder in the side bar and just adding the content into Content controls on each content page?
Your approach seems overly complex to me.
You could also put that additional code into a user control (or two). The content page would then include the user control appropriate to that page for the right sidebar.