I'm a web app developer with ASP.NET MVC 5 in server-side and AngularJS in client-side. The navigation, in client-side, is managed with module UI-Router. In server-side I've configured my custom authentication and authorization. When I excecute the app can see a navigation bar with many links. In particular, I have a link named "Overview" that redirects to controller Overview.
Code client (html):
<a ui-sref="Overview">Overview</a>
Code client to redirect (angular):
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("Home/Index");
$stateProvider
.state("Overview", {
templateUrl: "Home/Overview",
url: "/overview"
})
Controller code:
[OutputCache(Duration=0, NoStore=true)]
[AllowAnonymous]
public ActionResult Overview()
{
return PartialView();
}
With a breakpoint in line "return PartialView()" to controller code, I can see that controller returns partial view when I click over "overview" in menu app. But when I click second time, the breakpoint does not trigger. I think it's a caching issue.
I have read that caching issue can be generated:
* In server-side.
* In client-side.
* Even IIS.
I have tried many solutions: In server side I use attribute [OutputCache].
When i read in my browser the http headers i can see
In client side i could not find a solution to avoid caching, but i think that UI-Router shouldn't cache anything.
As additional measures I put in my web.config:
<system.webServer>
<caching enabled="false" enableKernelCache="false" />
</system.webServer>
even, I created my own custom ActionFilterAttribute but did not work.
i don't know what else to do.
PS: sorry for my english
If there is any other plugin which does caches its templates, then your solution will clean those templates and make those plugins unusable.. hence your solution is not good.
To solve problem of html caching you should add random query string at the end of html filename... the other solutions you mentioned are for non-caching of api responses and not for static content (html/js/css files)
To add random query string to ur html. either you can use modules like grunt-cache-busting or gulp-rev or use query string as param query-string-cache-busting.
Please note that datetime/file-hash are best cache-busting param
Ok, I've found the solution.
Despite avoid caching from server side with attributes like OutputCache, or avoid caching from IIS setting my web.config, the issue persisted.
AngularJS was the guilty. In other post I found the solution.
myApp.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
This solution is provided by Mark Rajcok and Valentyn Shybanov. So thanks to both.
Related
Just want to say I really like prerender.io, but I am currently having an issue with it and I am wondering if maybe I am doing something wrong and people with more experience with the service can help me out.
I am having the same issue with the prerender.io site and also with a Debian Linux box I setup with prerender for local execution.
My new site is a hybrid of ASP.Net MVC and angular, where angular represents workflows (or categories of content) within MVC routes on the server.
An example of a category of content is this:
http://[somesitename]/PublicContent/#!/news
http://[somesitename]/PublicContent/#!/welcome
The MVC server side route is:
http://[somesitename]/PublicContent
and #!/news and #!/welcome are the angular app routes and welcome is also the default route.
When I send my URL to the prerender.io service or my local instance:
http://service.prerender.io/http://[somesitename]/PublicContent/#!/news
The prerender service is only ever rendering:
http://[somesitename]/PublicContent
and is ignoring the client side route after the #!
so for all my pages for each MVC route I am merely getting the default route rendered multiple times...
Is this a bug with prerender.io? Or do I not have something not properly configurered?
I do have the:
<meta name="fragment" content="!">
in the head for all my pages if that would matter.
Talked with the guys over at prerender.io, and it appears that a modification I made to the Asp.Net MVC middleware where it was removing ?_escpaed_fragment_=/ completely was an incorrect modification to this code, which itself was incorrect (the base code removed ?_escpaed_fragment_=/ and replaced it with nothing, I modified the code to remove ?_escpaed_fragment_=/ and replace it with #!).
The prerender.io service expected ?_escpaed_fragment_=/ to exist in the URL and if it finds it it will replace it with #! before calling your website to cache the page. It doesn't expect to find the #!, so it won't properly process the URL if it is there.
So if you are using the Asp.Net MVC middleware you should comment out the following code from PrerenderModule.cs:
// Remove the _escaped_fragment_ from the URL if it exists!
var escapedFull = "?" + _Escaped_Fragment + "=/";
if (url.Contains(escapedFull))
{
url = url.Replace(escapedFull, string.Empty);
}
According to Marc Palmer
Preventing XSS attacks
In a nutshell, to protect your app from code injection XSS exploits
you must:
Set the default grails.views.default.codec in config to "HTML"
OK.
So if I have this below in my Config.groovy
grails.views.default.codec = "none"
And in my Controller, I add:
def afterInterceptor = { model ->
model.headerJs = "alert('bingo for '+[$params.unitId]);"
}
And in my GSP:
<r:script disposition="head">${headerJs}</r:script>
It works. I see the expected javascript alert when I do View Source and I get my alert when the page serves.
But, if in Config.groovy I apply the recommended change:
grails.views.default.codec = "html"
My GSP renders
<script type="text/javascript">alert('halooba for '+[1]);</script>
which I can see is very secure.
My goal with this app is to have custom JS snippets, various properties and other values stored for the customer in the Domain. These values would be entered by our Admins (not the customer). Based on who invokes the page with an HTTP request, such as www.mydomain.com/ThisApp/?customerId=13423 (but an encoded customerId) I'd make calls to Services from my Controller to fetch the associated settings for the customer from the Domain and inject them into the GSP.
I know that I can put JS and CSS into files and then use the Resources Plugin to bring them in properly, but I'm also looking at this method for specific customizations.
So, to follow this security method, I either need to be able to unencode this, or I need to determine another method for including javascript into the GSP that does not encode it.
Any suggestions?
THANKS!
You can suggest Grails not to escape by using raw() available in GSP as:
<r:script disposition="head">${raw(headerJs)}</r:script>
For Grails 2.2.x and below, you can put the recommended encoding in your Config.groovy:
grails.views.default.codec = "html"
and use a Taglib to bring in values that are SAFE and should not be HTML encoded:
<r:script><com_myapp:getJSDeferred unitId="${params.unitId}" /></r:script>
and it will be rendered raw.
FYI: Above solution will not allow for JSON output to assign to javascript variable.
My workaround, say you have model.data defined as hashmap:
var someVar= ${raw(data as JSON).toString())};
I'm in the middle of making this choice right now and I don't know what kinds of questions I should be asking. One that I believe is valid:
Do I need SEO / natively crawlable pages? If so, stick with MVC4.
One question that I'm not sure about is the impact on performance - I think this is valid:
Is initial load time very important? If so, stick with MVC4 (like stackoverflow).
What are some other questions that should be asked that can help point a developer in the right direction here?
PS - if this question is being asked in a way that doesn't meet quality standards, I'd appreciate any help modifying it so that it does.
I have been asked and had to be a part of decision making groups recently that made this same decision. Here is what was important for us -
How many of the devs that will be working are familiar with MVC4 vs Javascript?
How much is performance an issue? (Is single page app really necessary?)
How big is the data we will be working with? (Remember that extremely large data sets don't work well in a spa)
Durandal requires using a lot of different libraries - is it ok to have to learn each of the different usages? Each library is important in its own regard and you must know when and why to use each library.
Angular is very set in its ways and harder for a new javascript dev coming from c# and .net to understand, are you willing to provide time for learning?
Last, which browsers are you targeting? Ie6+ works great with mvc4 and durandal, angular needs some massaging.
Hope this is helpful!
Why not combine the best of both worlds? SPA and straight MVC!
I was also investigating a lot of time in durandal, sammyjs, angular frameworks. I then decided to go with sammy.js for just the routing. This way I could still make use of the easy MVC 4 razor view engine to generate my views at server side. Even though it would be more performant to generate your html and bindings at client side by using knockout, I felt more secure by doing this at the server side.
But then of course you have to deal with those hashbangs? Therefor I started to investigate more time into the history.js (or HTML 5 history API). And then things got clear to me.
My solution
What is the essential part of a SPA? Well, in fact, that your layout.cshtml is only loaded once right. From then on you you only want to load content from the server and display it in the main content div. Does it need to be json? No, in fact it does not.
By default MVC 4 controllers returns an html string. So what if your < a href="">< /a> tags would be intercepted by a simple jQuery script to get the html string from the controller and load it into a div.
I went even further and wrote my own jQuery engine on top of the HTML 5 history api. I just intercept every link that is clicked and load the content from its href attribute and then place it into the desired div. Further I push the URL with history api pushSate. Another big advantage of this approach is that your application is not broken when javascript is disabled or when HTML 5 is not supported.
My views have the following layout page:
#{
Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}
This way when javascript is disabled or html 5 is not supported, the view will render inside the _Layout.cshtml.
This also allows for URL linking. The link will hit the address bar and will be routed to the controller. As this is not an ajax request, the view will render with _Layout.cshtml.
But once your _Layout.cshtml and javascript is loaded correctly and once, all < a href="">< /a> will be intercepted, loaded by AJAX (partial with layout = null) into the content div and the url is pushed on the address bar. So it seems that you are at that location, but in fact you are not. It's just an illusion to make things more responsive and efficient. Et voila, SPA in straight MVC.
The minimum routing code would be something like this
Interception of Links
$('.spalink').click(function () {
$.ajax({
url: this.href,
success: function (content) {
$('body>#content').css({ opacity: 0 });
$('body>#content').html(content);
$('body>#content').animate({ opacity: 1 }, 300, 'swing');
history.pushState({ state : 'spa' }, null, this.href);
}
});
return false;
});
BACK and FORWARD event
window.addEventListener("popstate", function (e) {
if (e.state != null) {
$.ajax({
url: location.href,
success: function(content) {
$('body>#content').css({ opacity: 0 });
$('body>#content').html(content);
$('body>#content').animate({ opacity: 1 }, 300, 'swing');
},
cache: false
});
return false;
}
});
return true;
}
PS: if you don't feel like writing your own SPA engine, take a look at history.js (it does the same out of the box)
Ajaxify on top of History.js on top of HTML 5 history API
I am trying to learn MVC 3, so I am a noob. For now, I just want to make a basic site, that is an HTML page using jQuery and CSS. While I am using MVC, I don't really need a model, since there is not really any data being passed to the application. However, this is creating a problem for me, because I am getting a HTTP 403.14 Forbidden error when I try to publish this site. I think that there is something wrong with the way the application is structured that will not allow it to execute properly when I got to localhost:1081 web site. Here is all I have:
HomeController.cs
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
}
This just returns the view of Index.cshtml.
Index.cshtml:
#{ViewBag.Title = "My Web Site";} <h2>Web Site Title</h2>
All of my HTML code was put into _Layout.cshtml. jQuery and CSS are used. The site works fine when I do the debug option, but when I try to publish it gives me 403.14 forbidden. I have run the inline command aspnet_regiis -i and it seemed to work, but did not allow the project to run.
Global.asax:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
If I move the code in _Layout to Index, it doesn't work. Is there a way I should be linking this to Index.cshtml?
Web.config:
<system.webServer>
<defaultDocument enabled="true">
<files>
<add value="_Layout.cshtml" />
</files>
</defaultDocument>
<validation validateIntegratedModeConfiguration="false"/>
<modules runAllManagedModulesForAllRequests="true"/>
I do not want directory browsing, and I have tried to play with this option as well. If I enable, it allows me to see the contents but does not render the page.
So two questions: 1.) Do I need to have a model, even though I am not passing any data to the application, just trying to render a site? 2.) Is my site set up / structured properly or what exactly am I doing wrong here?
Thanks,
Nick
No, you don't need a model.
First, don't use the default document. MVC overrides the default document handling and uses the route system.
Second, you don't want to try and use the Layout page as your document. Layout is like a master page, and is used to create a wrapper around your real document.
Third, saying "will not publish" means that you are having problems actually publishing the site via the publish mechanism. Your problem is not that you can't publish, because obviously it is doing so, but that your site isn't executing.
Fourth, 403.14 means it's trying to list the contents of directory, but this shouldn't happen if MVC is configured correctly because MVC's routing takes over. This means you have a problem somewhere in the asp.net pipeline.
Where are you publishing to? Did you configure IIS to setup a site at this location? Given that you are trying to access the site from a different port number, It would seem to me that you have not setup IIS to do this and are instead trying to use the same port that's used for debugging.
In order to publish a site, IIS must be configured to use that location.
I have searched the forum, and google for this topic. Most of the articles are talking about using JSON to call the controller/action on the server and do ajax effect on the result.
I am trying to use some very basic JQuery features, like the JQuery UI/Tabs, and JQuery UI/Block for a dialog window. I cannot get these simple samples to work in my MVC project. Any ideas how I should modify these samples? I only need these basic feature now and I can go from here.
Thanks!
Actually I just got it working. The problem is that I need to modify the path to an absolute path to the view page because the relative path doesn't work with the MVC routes {controller}/{action}/{id}.
Thanks!
For info, re the relative path issue - I discussed this here (the same concept applies to any page, not just master pages). The approach I used is like so:
1: declare an extension method for adding scripts:
public static string Script(this HtmlHelper html, string path)
{
var filePath = VirtualPathUtility.ToAbsolute(path);
return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
}
2: when needed (for example in the <head>...</head>) use this method:
<%=Html.Script("~/Scripts/jquery-1.2.6.js")%>
The advantage of this is that it will work even if the web app is hosted in a virtual directory (i.e. you can't use "/Scripts" because you aren't necessarily at the site root) - yet it is a lot clearer (and less messy) than the full script with munged src, i.e.
<script ... src="<%=Url.Foo(...)%>"></script>
I just implemented the jquery autocomplete textbox in one of my asp.net project. I only had to import the js file and drop some code into my aspx page. Could you be more detailled about what sample you are trying to run?
This is quick response!!
I am trying to run this "Simple Tabs" on this page:
http://stilbuero.de/jquery/tabs/
I think it is the same with this one: http://docs.jquery.com/UI/Tabs
I just copied and pasted the whole thing into my MVC view page, with corrected path to the jquery.js and .css files, but the content in the tabs all show up together (two of them are supposed to be hidden). My understanding is that this simple jquery plugin just show and hide content.
I had the exact same problem with the jquery thickbox plugin, that the item marked as "hidden" (the dialog box) will always show up in my MVC view page.
I can understand some of the MVC+Jquery+json articles, but I don't understand why the hide/show doesn't work.
Thanks!
I just made a walkthrough on how to do this:
http://blogs.msdn.com/joecar/archive/2009/01/08/autocomplete-with-asp-net-mvc-and-jquery.aspx