At //Build/2016, Daniel Roth, during ASP.NET Core Deep Dive into MVC talked about TagHelpers and showed Cache TagHelper.
This tag, among other things, allow to cache several portions of the page.
In my project (MVC5) i need to cache some pages, but i can't cache all the page, because in Layout View i have some data about users that can't be cached.
Here is an example of what i need to do:
<html>
<head>
<!--- Head code ---->
<head>
<body>
<div id="page">
<!--- This shouldn't be cached ---->
<div id="top-menu">
<!--- User Data ---->
</div>
<!--- This should be cached ---->
<div id="page-content">
<!--- Page Data ---->
</div>
</div>
</body>
</html>
There's a way to do something like this even in MVC5?
From a quick read through of that, it sounds like you need Donut Caching. This is a method of providing caching for portions of a page rather than all of it.
If you have separated your partials into actions, you can use the outputcache directive to cache these so they aren't executed each time.
Here is a good write up on the technique:
http://www.adamriddick.com/2013/06/asp-net-mvc4-donut-caching-donut-hole-caching/
Quite an old article, however, I believe the technique still holds water.
Related
I have a big SVG file about 50kb, that I can't add as an external image or from the CSS (where the SVG will be cached as an ordinary image), so the SVG is inside the HTML document.
This SVG exists on a lot of pages and loaded a lot of times.
But I am not sure it will make any impact on the performance, as the SVG still will be sent to the user view every time, so there are no traffic savings, and the SVG does not perform any model, database requests or partial rendering.
The question: Is it make any sense to cache such fragment? and if yes why?
Example:
<html>
<head>
...
</head>
<body>
<div class="container">
<svg ...>
... # => a lot of SVG code that can be cached
</svg>
</div>
</body>
<footer>
...
</footer>
</html>
We are using CAS 5.2.3 which uses an upgraded version of Thymeleaf. Thymeleaf has restricted access to certain request features - '#request.getParameters()' being one. Is there any work around for it? I am getting the following error when trying to access it - "Access to request parameters is forbidden in this context. Note some restrictions apply to variable access. For example, direct access to request parameters is forbidden in preprocessing and unescaped expressions, in TEXT template mode, in fragment insertion specifications and in some specific attribute processors."
Good question. I face this problem a few months before, it is solvable.
After looking through their source code, I found that they are limiting the usage of #request.getParameters() only on specific tag, they didn't forbid to use #request.getParameters() in some situation.
In my use case, I am able to use CData to bypass this checking. Not sure whether it applies to your use case since you didn't provide any code example....
Anyway, the below example want to redirect user to another page, based on the parameter url
Here's an sample code that was broken in CAS 5.2.x, but worked in CAS 5.1.x :
<html>
<head>
<title> Deforestation </title>
</head>
<body th:attr="onload='window.location.href=\''+${#request.getParameter('url')}+'\''">
</body>
</html>
Here's a work around code:
<html>
<head>
<title> Deforestation </title>
</head>
<body>
Logging out. Please wait...
<script th:inline="javascript">
/*<![CDATA[*/
location.href = /*[[( ${#request.getParameter('url')} )]]*/ ;
/*]]>*/
</script>
</body>
</html>
If this didn't solve your problem, please provide your source code so we can have a better look at the problem.
Note: There is a security reason why this stuff is now banned, using this workaround might compromise the security standard, do remember to sanitize the user input if neccesary
Edit:
as per comment, although not elegant, maybe something like the following will work?
<html>
<head>
<title> Data attribute </title>
</head>
<body>
<span id="foobarid"> </span>
<script th:inline="javascript">
/*<![CDATA[*/
$('#foobarid').data('foo-bar',/*[[( ${#request.getParameter('foo') == 'bar'} )]]*/);
/*]]>*/
</script>
</body>
</html>
Apparently one can spend hours, even days on this simple requirement, which Thymeleaf introduced as a poorly dcumented annoyance in later versions. I've spent hours upgrading from an older Thymeleaf version from 5 years ago and got stuck on this very same problem. The lack of documentation didn't either. When I finally took a think break, I've realized the solution to this problem is as simple as using the <c:set> core tag with JSP.
Simply use the th:with tag in some higher level html tag where accessing request parameters is allowed, like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns="http://www.w3.org/1999/xhtml"
th:with="action=${param.action != null ?
param.action[0] : 'none'}">
<head>
...
In this example, the request parameter action is stored in a page context local variable named action (the name can be any unique name that you choose). This variable is now accessible anywhere bellow your high level html tag where you've defined it. It can even be used in following th:xx tags in the same html tag after the declaration. So basically, now you can do this:
<th:block th:switch="${action}">
<title th:case="'edit'" th:text="#{page.contacts.edit}"></title>
<title th:case="'delete'" th:text="#{page.contacts.delete}"></title>
<title th:case="*" th:text="#{page.contacts.add}"></title>
</th:block>
and even call a parameterized fragment by simply referring to your variable as ${action}. In this example I have a navbar template fragment, which accepts three parameters. The last of which, is a request parameter that otherwise, is inaccessible due to the newer Thymeleaf request object access restrictions.
<div id="wrapper">
<div class="nav" th:replace="html/fragments/navbar ::
navbar('html/contact','contact-html', ${action})">
</div>
<div class="content">
...
If you need more request params and more local page context variables, just use a comma to separate the declarations in the th:with tag like this:
th:with="action=${param.action == null ? 'none': param.action[0]},
self=${param.self == null ? 'none': param.self[0]}"
I hope this saves you guys some precious time and voids the frustration of refactoring older Thymeleaf html pages. It definitely beats those horrifically unmanageable CDATA scriptlets inside your pages.
I want to open the the .html file from my .js file. So I Used the $.mobile.changePage("file.html"). In the file.html have file.js. But The file.js does not call when the file.html in invoked.
THanks in advance.
first.js
$.mobile.changePage ("file.html");
file.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script src="../Scripts/file.js"/> // Could not imported
<script src="../Scripts/helperArrays.js"/> // Could not imported
<script src="../Scripts/globalVariables.js"/> // Could not imported
</head>
<body>
<div data-role="page">
<div data-role="header" data-nobackbtn="true">
<h1>Vaults</h1>
</div>
<!-- <div data-role="content" data-theme="c" id="contentVault">
Sample Vault
My Vault
</div> -->
<div data-role="content" id="content">
<ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">
<li id="listdiv" data-role="list-divider">List of Items</li>
</ul>
</div><!-- /content -->
</div>
</body>
</html>
Please help me..
When jQM loads another page through AJAX it only pulls in anything within your div[data-role="page"] and nothing else, like the head
So you can if you wanted to, include any JS/CSS within this div, the problem is that if this page is accessed multiple times any CSS will accumulate, but the problem is much worse for JS.
You are basically getting every page appended to the DOM, so the JS runs on the entire DOM (every page you loaded) if you use a global selector like $('div.someClass'), even using an ID isn't a perfect solution because if you can link to the same page twice.
For Smaller Sites
I've solved this by moving all the CSS into one file and for JS code that I want to run each time the page is loaded, I bind to the pageinit and pageshow jQM events:
<script type="text/javascript">
$("div:jqmData(role='page'):last").bind('pageinit', function(){
//your code here - $.mobile.activePage not declared
});
$("div:jqmData(role='page'):last").bind('pageshow', function(){
//your code here - $.mobile.activePage works now
});
</script>
The pageinit event runs when the page is loaded, only ever once (after it's loaded it stays in memory if you navigate back to it, even via a back button this isn't fired again), pageshow on the other hand fires everytime the page is shown, even when you navigate back to it via the back button on the browser for example.
The pageinit runs when the DOM is there, the pageshow event is only if you have some code that depends on the DOM being rendered and you need a quick reference to the active page through $.mobile.activePage or some data changed and you need to refresh this back everytime it's shown. For most purposes I only use the pageinit as a document.ready for jQM and bind my events there. Use bind for static elements, and on instead of live for dynamic elements, because live events listen at the document root, you want to listen at the page div.
For Larger Sites
For larger sites there are advantages to binding a live event to any pages and handling types of pages, this way js code isn't loaded more than once.
If you have external js files with say helper functions that you only need once put that in the head of all your pages (if there aren't too many), if you had a very big site you could probably do better by tracking which JS files have been loaded server side.
All this can be avoided by just not using AJAX to load new pages, so think about whether that transition/loading effect is worthwhile
*Here's how I handle large jQM sites: *
bind a live event to all pages/dialogs pageinit and pageshow events:
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
I reference each page with a name: <div data-role="page" data-mypage="employeelist">
In this live event you can basically have a switch statement for each page "name", and then check event.type for pageinit/pageshow or both and put your code there, then every time a page is created/shown this event will be fired, it knows what page triggered it and then calls the corresponding code
I eventually had too much code, so I built a handler object where each page's js is included in a separate js file and can register handlers with the live event
The drawback is that all your js for your entire site is loaded on the first page the user reaches, but minified even a large site is smaller than jQuery or jQM so this shouldn't be a concern. The advantage is you are no longer loading all your JS for each page through AJAX each time the user navigates to a new page.
*note: now RequireJS can make this even more manageable
Jquery mobile gets pages via AJAX and adds their content to the current page.
I saw some notices about changing the page title to the incoming one, so they are (planning?) accessing the head, but at the moment jquery mobile doesn't seem to load external js when loadin a page.
More importantly - if you use $(document).ready() it will not be triggered, because it was AJAX
How do I inject a script tag such as
<script src="somejsfile"></script>
or
<script type="text/javascript>some javascript</script>
into the head tag of a page from a partial view?
Update: Answer for the old question
This is about ASP.NET MVC. We can use the RenderSection. Here the sample for MVC 3 using Razor view engine:
layout view or master page:
<html>
<head>
<script ...></script>
<link .../>
#RenderSection("head")
</head>
<body>
...
#RenderBody()
...
</body>
</html>
View, e.g. Home:
#section head{
<!-- Here is what you can inject the header -->
<script ...></script>
#MyClass.GenerateMoreScript()
}
<!-- Here is your home html where the #RenderBody() located in the layout. -->
Even if THX's answer works, it's not a good one as MVC's intention is to be stateless by nature. Moreover his solution does not let you place your scripts where they should go - most sites want their script declarations at the very bottom of their page just before the </body> tag as it is best for performance and search engine optimization.
There is an answer, thanks to Darin Dimitrov:
Using sections in Editor/Display templates
His answer allows you to register scripts from a partial view within the layout view.
The caveat is his answer marks items using a GUID in a dictionary object, so there is no guarantee the scripts will be rendered in the master page in the same order they are listed in your partial view.
There are two workarounds for that:
Register only 1 script from a partial view -or-
Change his HTML Helper implementation to support ordering
I'm trying to work on the later myself.
Good luck.
Partial views are UserControls. Can't you use RegisterClientScriptInclude method of ClientScriptManager?
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
Page.ClientScript.RegisterClientScriptInclude("some key", "http://website/javascript.js");
}
I would like to create in my master page a control that depending on the rendered viewpage will change a css file
I was thinking to make a specific controller "CssController" and call this CssController from the src attribute of the css link. This controller will be in charge of choosing the right css and sending it back with text/css header.
question: will this approach break the mvc pattern? Indeed the choose of the design would be in charge of a controller. Is there a better alternative?
What i did in my master page was create a contentplaceholder in the <head> section, as so:
<head runat="server">
<title>Title Here</title>
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript" ></script>
<link href="<%= Url.Content("~/Content/css/site.css") %>" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
then, when you create a view using the master page, you can add the view-specific css you want into that content place holder. That way, it'll put your site.css first, plus the desired css, javascript, <script> blocks, whatever, on that particular view.
If you are using separate css files for separate themes, then those would be in fact the view and controller would work. So it does not seem to violate the pattern. But, it does seem to be a more complicated solution than others.
The common way I have seen to do this is with a Jquery Style Switcher
http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/
With a little bit of code you can determine the default style to show on each page
The basic MVC example sets Page Title via the controller. I'm not sure this is any different. If you were using it (for instance) to have users be able to select different skins for their experience, I'm not sure there is any other way to do it, regardless of whether or not it violates the pattern.