We are still using asp.net mvc WebForms (legacy code) with a lot of our own frameworks.
one of our features is gathering the static content on run time and creating the min and optimize versions. (we found out it was faster).
Yet Razor rendering pipeline is different then WebForms, so the content is rendered out of order.
For example we have a view to render lets call it Home, Home has several calls to X.Css("css_x");
we gather them into a 'list' Home has partial view to render which inside also has X.Css invocation.
After Home is rendered into the output buffer stack the _Layout is rendered again with X.Css being called. assume that now we need to render all of the css files but the order is wrong.
How is it possible to synchronize view and layout with the order i need (first layout then views and partials)
Any one got an idea.
(if i am not understood please let me know and i'll try to elaborate more)
Related
I have a question regarding an order of operations and to get some feedback on feasibility.
This involves MVC Razor, Javascript and the HTML preload property.
I have a partial view that runs some Javascript. It requires an external JS library to run but I don't want it to run on every page to save load times.
I know I can use MVC "Sections" to have blocks of code render within sections of a page by using the RenderSection function. However, I have a partial view that is part of many templates.
So the structure of my template system (and this is because this is an off the shelf product), that the View structure is as below.
Root.cshtml (is the main layout wrapper)
< Root.Head.cshtml > (Partial view contained within Root.cshtml that has the HTML Head markup)
THEN,
OneColumn.cshtml, TwoColumn.cshtml (Inherit Root.cshtml as their "master" template)
THEN
ProductTemplate1.cshtml,ProductTemplate1.cshtml,ProductTemplate1.cshtml,ProductTemplate1.cshtml (these inherit EITHER "OneColumn" or "TwoColumn" as their "master" template).
THEN each of those "Product" templates can have a partial view of "Calendar.cshtml".
The 'Calendar.cshtml' is the one that requires the external JS library to run some of its functions. I would like to have the external JS library only load if the Calendar.cshtml partial is included in a product template, BUT I want the library to not end up in the body of the HTML layout but instead, like any good formatted HTML, either in the HTML Head OR just before the closing tag of the HTML body.
Since the Calendar.cshtml file 'lives' in the Product template, the product template is actually already two levels deep in its inheritance of layouts.
My thought would be to put in the Calendar.cshtml file this code, BUT I don't know if it would load fast enough to allow the code that calls the external JS file to actually run.
Hence my question about the 'preload' property.
This is what I am thinking of putting in the 'calendar.cshtml' file.
function loadJQUERYUI(){
var importJQUERYUI= document.createElement('script');
importJQUERYUI.src = 'https://code.jquery.com/ui/1.13.0/jquery-ui.min.js';
importJQUERYUI.async = 'true';
importJQUERYUI.rel= 'preload';
document.head.appendChild(importJQUERYUI);
}
loadJQUERYUI();
<!--Code called in the Calendar.csthml partial-->
$('#datepicker').datepicker();
The thing is, would jQuery UI even load before the .datepicker() function fires?
I had looked at wrapping the $('#datepicker').datepicker(); call in a timeout so it gives the external script time to load, but I don't know how long an external responding server will take to respond to the request. That is super hacky, and don't really want to do that.
I tested it without a timeout and the $('#datepicker').datepicker(); function fired before the call to the jQuery UI library loaded. I tried it with a 1 second timeout and the datepicker loaded, but that is not ideal, because I don't know when the external library will respond in what timeframe.
If I were to use the MVC Razor "RenderSection", I have done it where it each section calls a sub section all the way down the line four levels deep, but since I have multiple templates that require this, isolating it so the Calendar.cshtml partial injects the external jQueryUI library is desired without having to next "RenderSections" all throughout my templates.
Is there another way?
Considering both containing same static content, what is the difference between rendering a view VS a HTML file from an action in ASP.NET MVC?
Background: I have some static content such as about page which I'm rendering as ActionResult view. I can also keep them in some HTML files.
Question: Does it make any sense to port the static content from view files to HTML files? I believe it will save server from processing View engine tasks - which is the reason for port (correct me, if I'm wrong).
One more important question: How do I handle Viewbag.Title thing? This is passed to _Layout from view file only?
You're right, it won't be passed through the MVC pipeline if it's static html. But the real question is: what performance savings are you looking for? I'd imagine the differences to be trivial: low single digit ms to sub-ms.
I had used both the Partial View and also the Layout Concept in my Project i cannot able to differentiate. But what i am feeling is both doing the same work. Can anyone tell the brief idea about the Partial View and Layout and difference with example?
In addition to Josh's answer, my aweeeesomeee paint skills would like to draw you a picture that should explain all..
Admit it... you're in awe...
You see the header and footer... you could even have partial view's there too.
EDIT...
Layout
To give you a different example of why you use each component (layout / view / partial view), imagine that you own a website that has 100 pages in total, and lets say you want to update the design of your website, how are you going to do it?
Updating each page individually would drive me insane, because your replicating your code constantly for every single page, just to update your design.
This is what the Layout view helps you solve, you use the Layout view to create a template for all of your pages.
View
Using our existing scenario of 100 page website, each page is going to have content that is unique, the View allows us to display this content whilst using our template from the Layout.
Partial View
Now lets imagine that we allow our visitors to comment on our pages, each comment must look consistent, and behave exactly the same as all the other comments throughout our website... To achieve this, you would use a Partial View which would act as a template for the comments that you receive on your website.
The benefits of doing this is that you don't have to repeat your code everywhere, you only have to create one Partial View to render any comment.
Layouts allow you to generate a consistent look across your entire site. Think of them like Master pages of ASP.net.
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. - http://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts
Partial views allow you to construct a view and render it inside of a parent view. For instance, say have a site that allows you to comment on an article. The section in which displays and allows a user to add a comment is a piece of reusable code that is inserted into all of the pages you wish the functionality to exist. What makes this important is that you can then modify that single partial view file to update every view that renders that partial instead of tracking down each page that implements that code individually.
Here is a Youtube Vid that helped me understand partial views rather well. https://www.youtube.com/watch?v=SABg7RyjX-4
edit: Additionally, the guy who created the linked vid has an entire library of playlists that may help a new MVC coders. He walks through a great deal of the MVC features with decent examples. https://www.youtube.com/user/kudvenkat
Non-technical explanation:
Layout is a foundation of the house, View is a single room in that house and PartialViews are windows in that room or sockets with electricity in walls.
To make it simple Here is my answer:
1)
A layout is something that we can include once in a single page
and we can use the same layout to any number of pages.
2)
A partial view is something that we can include the same content
any number of times in a single page(where it is required) and can
be used in any number of pages.
How to use certain view engine for certain controller?
Now my project using MVC2 + Spark view engine. I want to migrate to Razor view engine. Project so big, and I want to do this step-by-step.
It's perfectly possible to run both view engines simultaneously. Since you're currently using Spark you probably have an entry in your global.asax that clears the current view engines and adds in the Spark engine. Something like:
ViewEngines.Engines.Clear();
ViewEngines.Engines.Add(new ...);
MVC is designed to use FindView and FindPartial (part of the ViewEngine interface) to find the correct view for an action, and if it can't find one for the first view engine in the list, it moves on to the next viewengine and looks for its appropriate views, until there aren't any other view engines to try.
It's up to you whether it looks for Razor Views first and then falls back to Spark, or the other way round, so make sure you place the ViewEngines in the correct order. Or to have the default engines, you can delete the ViewEngines.EnginesClear() line and make Spark first by using ViewEngines.Engines.Insert(0, ...)
If that's not clear then paste in the global.asax code around the Spark bit and I can try to help you more.
I am working on moving an application from MVC2 ASPX to MVC3 Razor, and is quite stuck moving a baseclass for more MasterPages in old MVC2 application.
The baseclass is used for automate include of css and js on pages in order to ease quickfix and debugging when developing application in local environment, but when running application in production environment it has to update and include single minimized css and js files delivered from a external CDN.
The code needs to know about the View file eg. "~/views/home/index.chtml" and/or the Layout file eg. "~/Views/DefaultNoLogon.Master" in order to include and handle css and js files correct.
I tried to implement own baseclass using the pageBaseType in Razor part of web.config, but it seems like it is executed both for View and Layout file, and I could not find a execution point where information about both View and Layout file is present. I also tried to implement the file logic using a HtmlHelper, but I can only access information about the View file and miss information for Layout file for View.
I don't want this kind of code to be implemented in Route, Controller or ViewModel since it should be related directly to generation of Views.
Any ideas how to get information about View and Layout files in MVC3 Razor app?
Well, never mind my question.
I redesigned my logic for automatic rendering of js and css files, which actually is more simple and works better. My Mvc3 Razor app is now capable to take all js and css files for a view (including css and js for all layoutpages) and render them into single minified files.
Works like a charm, and I guess it's more future proof than my old solution, unless Guthrie make fundamental changes in layoutpages and Html helpers in Mvc4 or later.