Applying a common layout to ascx controls in ASP.NET MVC - asp.net-mvc

What would be the best way to implement visual inheritance for partial ascx views in MVC?
I have the main Site.Master file which provides a header, footer, sidebar and main content area. Then i have an Info.Master which uses Site.Master as it's master page and which provides a common layout for almost identical pages. Then all these similar "info" pages on the site have Info.Master set as their master page.
Now i would like to do the same for the ascx partial views that appear on the side bar, as I have a handful of controls that all "look" the same, with headers, footers etc?

You could use normal ASPX views as partials, and create another master page for them with your common partial layout elements. Check out this post from Jeffrey Palermo for more information on this technique.
Another option would be to put your common partial layout elements in one of your main master pages, and take advantage of the view locations. For example, if you had a partial called "Sidebar" with content that only changes for each controller, you could create a general partial in the Views/Shared directory, and more specific partials in each Views/<controller name> directory, and the partial will be overridden.
<div id="sidebarheader">...</div>
<% Html.RenderPartial("Sidebar"); %>
<div id="sidebarfooter">...</div>

Related

MVC Areas Overlayed Shared Layouts

I'm using Visual Studio to make an MVC App with sub-apps in Areas. In the root _Layout.cshtml I have a navbar-fixed-top that will have navigation to the different areas. I want this perpetuated on every single view. Then I modified the css to create a navbar-fixed-left where I will have navigation within just the particular area and that needs to be unique per area, but used on all views within that area.
So my question is, is there a way to use a shared layout within a shared layout so I don't redundantly copy and eventually screw up the top nav?
You can use the RenderSection('leftNavigation', false) in the html of your _layout page.
from the view that has left navigation you can fill the section
#section leftNavigation
{
<ul>
Some line
</ul>
}
you can use the #section in the _viewStart.cshtml of the area is you have navigation that is valid for the complete area.

Shared content between templates

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>
}

Having a fixed menu for some of my Views in ASP.NET MVC

I am trying to have a fix menu on some of my views. For example I have a view called 'Kitchen' and then I have sub views in there. I need to have a fix menu to each view there.
I have been able to menu to each view file but how do I make a separate file for menu on some particular views. I am using razor as template engine.
You have two options:
Use a different shared template (like ...\Views\Shared\_Layout.cshtml) for the views that need a menu. This template can itself use another (like ...\Views\Shared\_Layout.cshtml) for content common with all pages. So this my setting Layout to the relative path to the template.
Use a partial view: another Razor file that is included into the views are renders the menu:
#Html.Partial("_TheMenu", menuModel)
the model parameter, if no model needed, isn't requited.

ASP.NET MVC loading multiple partial views into a single div using JQuery

I am working on a help page which is composed of a navigation tree, content box, and search box. The navigation tree has links to Frequently Asked Questions and Glossary, each of which are linked to an Action which return partial views.
To the right of the navigation tree I have a single content div that I would like to contain whichever partial view is selected in the navigation tree.
Success case (what I want to accomplish): clicking on one of the FAQ links calls the FAQ() method in my controller, then returns a partial view which is then displayed in my content div to the right of the navigation tree. Clicking on another item would cause another partial view to be loaded.
How do I go about this? I've read a ton of ASP.NET MVC JQuery loading blog posts and tutorials but can't find anyone who's done exactly this.
Many thanks!
You should be able to use the jQuery method .load() to load HTML into your div.
http://api.jquery.com/load/
You can create an action that returns the partial view as HTML.
ASP.NET MVC Returning Partial View as a full View Page
jQuery:
one easy way you can do is load all partial views in "Container Div" at page load in one go (if performance is not a issue)
then assign each partial div with different div id inside "container", than use jquery to control show(); hide(); for each div.
MVC:
however if i were you, "Glossary" and "FAQ" looks same model to me it shouldn't be put in different partial view in first place.
if they did designed in separate model, in this scenario, i would recommend you to create a proxy class as a ViewModel above models you want to display, and then load it with one partial view only

What is the difference between a View and a PartialView in ASP.NET MVC?

What is the difference between a View and a PartialView in ASP.NET MVC?
At first glance the need for both seems non-obvious to me.
In theory, the answer is: A partial view is a "sub-view" that you embed within a main view - something that you might reuse across multiple views, like a sidebar.
In practice, the answer is: Very little.
In theory, partial views are more lightweight than standard views, but it's perfectly OK to pass a "regular" view to RenderPartial and the performance seems to be exactly the same. I frequently use regular .aspx views as "partial" views because you can make them reference a master view in order to provide templated content like what you can do with UserControls in ASP.NET WebForms. See here.
Partial views are more like web parts on a portal - they are completely self-contained objects. Use them if the layout is simple and static, or if you're annoyed by the Intellisense errors when you don't have the <html> and <body> tags in a standard View.
It works like that:
return View() the view content goes in the #RenderBody() of the /Shared/_Layout.cshtml
return PartialView() it returns only the view content
Views are the general result of a page that results in a display. It's the highest level container except the masterpage. While a partial view is for a small piece of content that may be reused on different pages, or multiple times in a page.
If you're coming from webforms, view is similar to a web content form, while a partial view is like a user control.
If you come from a webforms background, think of PartialView as a usercontrol.
Look at StackOverflow.com site:
Main site (View) contains components like:
Tags
Related
Ad
So Tags, related, Ad etc. can be composed as PartialViews. The advantage of this is that
PartialViews can be simply cached by OutputCache instead of recreating all site: performance gain.
Consider a partialview like a control in webforms, the idea is the partial is reusable
View in Core Mvc
View Contains The layout Page(_ViewStart) Or Layout Property.
#{
Layout="_Layout"; }
Before Any View Rendered _ViewStart is Rendered.
View might have markup tags As
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
View isn't Lightwight as Partial View.
View will Render in Layout by used #RenderBody() Method
(Views/Shared/_Layout.cshtml).
Calling by use return View() inside Action.
Partial View
Partial view doesn't Contain Layout Page Layout Property
It does not verify for a viewstart.cshtml. We cannot put common code
for a partial view within the viewStart.cshtml.page.
In MVC Partial view is designed specially to render within the view
We can pass a regular view to the RenderPartial method.
#{await Html.PartialAsync("Partial"); }
Example To Demo Partial View Is Strongly Type
in View
#model List<Student>;
#{
Layout = "_Layout";
}
<div>#await Html.PartialAsync("Partial",Model)</div>
in Partial View
#model List<Student>; <ul>
#foreach (Student student in Model)
{
<li>#student.ID</li>
<li>#student.Name</li>
<li>#student.Age</li>
}
</ul>
SP.NET Core MVC looks for Partial View in the same way like Regular
Views (i.e. in Views/ and Views/Shared folders). This
means you can create controller specific partial views or shared
partial views.
Good Luck

Resources