i'm trying to integrate angularjs html5mode with my asp.net mvc application. i've done numerous searches and they pretty much all say add the following to your web.config
<modules runAllManagedModulesForAllRequests="true"/>
<rewrite>
<rules>
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="api/" ignoreCase="true" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
For the most part everything is working as expected except now i notice that some file requests are triggering my controller action method to fire. for example, if i do a view source and click on any of the .css links my controller action gets executed. i'm sure there are more as well because when i add a break point it is being called multiple times.
here is my route config:
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "App", action = "Index", id = UrlParameter.Optional }
);
here is an example of a url that calls my controller action
http://localhost:63952/app/assets/css/style.css
any help would be great!
Related
I have an Empty mvc template with Angular client (plain html/js/css) with the following structure.
To achieve bundling and minification, I did the steps from this article.
My RegisterBundles method has the following rules:
public static void RegisterBundles(BundleCollection bundles)
{
//bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
// "/App/","*.js", true));
bundles.Add(new StyleBundle("~/bundles/styles.css").Include(
"/Content/*.css"));
bundles.Add(new ScriptBundle("~/bundles/app.js").Include(
"~/App/app.modules.js")
.IncludeDirectory("~/App/Components/", "*Module.js", true)
.IncludeDirectory("~/App/Components/", "*Service.js", true)
.IncludeDirectory("~/App/Components/", "*Controller.js", true));
}
To link these bundles, I put this into Index.html:
<link href="/bundles/styles.css" rel="stylesheet"/>
<script src="/bundles/app.js" type="text/javascript" language="text/javascript"></script>
Update
I updated the Rewrite rule in the web.config file
<system.webServer>
<httpErrors errorMode="Detailed" />
<asp scriptErrorSentToBrowser="true"/>
<rewrite>
<rules>
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
<add input="{REQUEST_URI}" negate="true" pattern="^/bundles/styles$" ignoreCase="true"/>
<add input="{REQUEST_URI}" negate="true" pattern="^/bundles/app$" ignoreCase="true"/>
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
And I still don't get the bundle. I get 404 not found and this
It appeared that I didn't have the "Bundle module" in IIS (IIS => Your website => Modules), and ALSO the issue with WebGrease package in angular project. So the solution was:
1. In Package manager console execute: Update-package webgrease
2. In web.config make sure to have section:
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule"/>
<add name="BundleModule" type="System.Web.Optimization.BundleModule"/>
</modules>
</system.webServer>
I enabled Html5 mode in angular for my project witch convert my URl from
A: qwe.com/#/products
to
B: qwe.com/products
But the problem is in this case if user trying to directly go to B, server (web api) catch the Url and return not found error so I need a way to catch all not found in server add a # sign to that and redirect to new Url but how should I do it?
Update:
Thanks to #Travis Collins
In Global.asax
private const string ROOT_DOCUMENT = "/index.html";
protected void Application_BeginRequest( Object sender, EventArgs e )
{
string url = Request.Url.LocalPath;
if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
Context.RewritePath( ROOT_DOCUMENT );
}
You need to do the rewrite on your server end for this. This will make the web server still serve your index.html file even when a request comes in for /products or anything else. In IIS for example, you would do this in web.config:
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
Lots of other servers are explained here:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Alright, so I am hosting an angularjs inside asp.net mvc 5 and are using the html5mode(true) in my angular app to get rid of all hash signs in the url.
Everything works great, however, with my current setup that looks like this:
RouteConfig.cs:
routes.MapRoute(
name: "Default",
url: "app/{angular}",
defaults: new { controller = "Ng", action = "Index", angular= UrlParameter.Optional }
);
So that when I navigate to http://url/app/myangularroute my Ng/Index action returns the view which contains the ng-view container and the angular app is now active and working with the route provided
Now, my problem here is, when I navigate to http://url/app/ it returns a dir listning not allowed error which I cannot understand. Shouldn't my index action be returned as the angular parameter is set to optional?
And can I somehow avoid the "app" completely and still get my angular app to work? I have tried some rewrite rules but that gives me alot of errors because I am making use of the mvc bundling and minification functionality.
I could live with the url being the format it currently is but without the need to provide the optional parameter, like http://url/app/
Also, it's only an angular app, no other mvc view than the index.cshtml wrapper.
This guy seems to get it to work, but I can't see his mvc routes
Try adding this in your web.config sytem.webserver settings.
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
<system.webServer>
EDIT:
Try changing your RouteConfig.cs, like this:
routes.MapRoute(
name: "Default",
url: "app/{*.}",
defaults: new { controller = "Ng", action = "Index" }
);
EDIT2:
I had completely forgoten about this question, but now I just realized that maybe the problem is that you haven't configured your IIS Server to work with Html5Mode, have a look at this: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Concretelly this part:
Azure IIS Rewrites:
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
I hope that this helps.
This is my solution. I am using ASP.NET MVC + Web API.
ASP.NET MVC always returns the same HTML page for any URL, so AngularJS can take over in $locationProvider.html5Mode(true);
RouteConfig.cs
routes.MapRoute(
name: "Default",
url: "{*anything}",
defaults: new
{
controller = "Home",
action = "Index",
}
);
WebApiConfig.cs
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}/{id1}",
defaults: new
{
action = RouteParameter.Optional,
id = RouteParameter.Optional,
id1 = RouteParameter.Optional,
}
);
HomeController.cs
public ActionResult Index()
{
return File("~/index.html", "text/html");
}
Alright, I got it to work.
By doing this:
Remove the "app" route completely, and use the standard route.
Add the rewrite rule
Remove the base href from the layout
Ohh wow, I turned off the bundling and minification, that was actually what made it work in the end. When I turn it on I get an angular error.
I honestly thought I tried this like 10 times without success. It started to show signs of working when I removed the base href.
Old question but still valid, this is my solution :
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*"/>
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<!--for local dev enviroment-->
<add input="{REQUEST_URI}" pattern="^/(__browserLink)" negate="true" />
<!--if the url does not match a valid file we don't want it to be redirected to the index page-->
<add input="{REQUEST_URI}" pattern="\.(png|jpg|gif|css|js|html)$" negate="true" />
<!--web api route-->
<add input="{REQUEST_URI}" pattern="^/api/" negate="true" />
<!--ASP.NET Web API Help Page-->
<add input="{REQUEST_URI}" pattern="^/Help" negate="true" />
<!--Swagger-->
<add input="{REQUEST_URI}" pattern="^/apimap" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
With my ASP.NET 5 RC site - has WebAPI but not MVC - the solution was to up a default rewrite rule in wwwroot\web.config's system.webserver tag:
<rewrite>
<rules>
<clear />
<rule name="API" stopProcessing="true">
<match url="^(api)(.*)$" />
<action type="None" />
</rule>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
I am facing the same problem, i have set the base href in layout.cshtml ,put the webconfig rewrite rule, when loading the app,In bundle config i have set the all the scripts and css when launch the app ,its not get loaded . unexpected syntax error < is displayed in console.
when i remove the rule and base href and location provider is false , it working fine .
Angular Js Strange issue Ui Router Html5mode enabled page refresh issue in mvc 500 error
I have started using ASP.NET Routing for my site. I have been registering routes via the Application_Start() in my Global.asax file.
i.e.
routes.MapPageRoute("ROUTE-ABOUT", "about", "~/About.aspx");
routes.MapPageRoute("ROUTE-CONTACT", "contact", "~/Contact.aspx");
//etc...
This is working perfectly for the About and Contact pages.
What I Want:
My home page is Home.aspx and what I wanted to do is rewrite anyone that visits
http://localhost/mysite.com/Home.aspx
to
http://localhost/mysite.com/Home
What I've Tried
I have my site running in my local IIS v7.5 on my machine (full
administrator privileges).
I have added the following to my Web.config
Web.config
<rewrite>
<rules>
<rule name="HOMETOSEO" stopProcessing="true">
<match url="Home\.aspx" />
<action type="Redirect" url="home" appendQueryString="false" />
</rule>
</rules>
</rewrite>
Thanks in advance
After hours of trying to get this to work I eventually managed to get it working using the following entry in the Web.config and Application_Start() of the Global.asax file:
Web.config
<rewrite>
<rules>
<rule name="default" enabled="true" patternSyntax="ECMAScript" stopProcessing="false">
<match url="(.*)Home\.aspx" ignoreCase="true" />
<action type="Redirect" url="home" appendQueryString="false" />
</rule>
<rule name="lower" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
<match url="[A-Z]" ignoreCase="false" />
<action type="Redirect" url="{ToLower:{URL}}" />
</rule>
</rules>
</rewrite>
Global.asax
protected void Application_Start(object sender, EventArgs e)
{
//...
BuildStaticRoutes(RouteTable.Routes);
//...
}
public void BuildStaticRoutes(RouteCollection routes)
{
//...
routes.MapPageRoute("ROUTE-HOME", "home", "~/Home.aspx");
//...
}
If you are using IIS v7.5 you can add this in web.config
<system.webServer>
<rewrite>
<rules>
<rule name="HOMETOSEO" stopProcessing="true">
<match url="^Home" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="Home.aspx" />
</rule>
</rules>
</rewrite>
</system.webServer>
When you type http://mysite.com/Home, it will display http://mysite.com/Home.aspx. Is that what you are after or the other way around?
You can do it using a custom route by inheriting from RouteBase - so in your case it would look something like this
public class HomeRoute : RouteBase
{
public override RouteData GetRouteData(HttpContextBase httpContext)
{
if (httpContext.Request.Url.ToString().ToLower().Contains("home.aspx"))
{
httpContext.Response.Status = "301 Moved Permanently"; //Optional 301 redirect
httpContext.Response.RedirectLocation = "Home";
httpContext.Response.End();
}
return null;
}
public override VirtualPathData GetVirtualPath(RequestContext requestContext, RouteValueDictionary values)
{
return null;
}
}
And then in you register routes you would have
routes.Add("HomeUrl", new HomeRoute());
So that any request to /Home.aspx would automatically redirect to /Home - obviously with a bit of extra work you could make this a bit more generic for any .aspx request.
In my IIS 7 configuration, I have created friendly URLs to convert:
http://mysite/restaurant.aspx?Name=SomeName
to
http://mysite/SomeName
To do this, I have the following rules:
<rule name="RedirectUserFriendlyURL1" enabled="true" stopProcessing="true">
<match url="^Restaurant\.aspx$" />
<conditions>
<add input="{REQUEST_METHOD}" pattern="^POST$" negate="true" />
<add input="{QUERY_STRING}" pattern="^Name=([^=&]+)$" />
</conditions>
<action type="Redirect" url="{C:1}" appendQueryString="false" />
</rule>
<rule name="RewriteUserFriendlyURL1" enabled="true" stopProcessing="false">
<match url="^([^/]+)/?$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}" pattern=".aspx" negate="true" />
</conditions>
<action type="Rewrite" url="Restaurant.aspx?Name={R:1}" appendQueryString="false" />
</rule>
Does the above seem correct to achieve what I'm trying?
For some reason, on every postback I get:
http://somesite/SomeName?Name=SomeName
Note that I have set appendQueryString to false.
The form postback action uses the underlying url, not the raw url.
A simple solution (I believe the server side form action property is only available in 3.5+):
protected void Page_Load(object sender, EventArgs e)
{
if ( !String.IsNullOrEmpty(Request.ServerVariables["HTTP_X_ORIGINAL_URL"]) )
{
form1.Action = Request.ServerVariables["HTTP_X_ORIGINAL_URL"];
}
}
http://blogs.iis.net/ruslany/archive/2008/10/23/asp-net-postbacks-and-url-rewriting.aspx