[英]Mixed SPA and ASP.NET MVC Routing
I'm working on a mixed routing Angular 2 and ASP.NET Core 2 (razor) project.我正在研究混合路由 Angular 2 和 ASP.NET Core 2(razor)项目。 How would you jump out of angular routing and get razor pages?
您将如何跳出角度路由并获得剃刀页面? I tried catching all unknown route with angular routing and reloading the unknown route but if there is a route ASP.NET and angular doesn't recognize it goes into a loop.
我尝试使用 angular 路由捕获所有未知路由并重新加载未知路由,但是如果有路由 ASP.NET 并且 angular 无法识别它进入循环。 The
Configure
method of the Startup
class contains this. Startup
类的Configure
方法包含此内容。
public void Configure(IApplicationBuilder app)
{
app.UseMvc(routes =>
{
routes.MapRoute(
name: "Index",
defaults: new { controller = "controller", action = "Index" },
template: "{controller}");
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapRoute(
name: "Login",
defaults: new { controller = "Sessions", action = "New" },
template: "Login");
});
app.UseSpa(spa =>
{
// To learn more about options for serving an Angular SPA from ASP.NET Core,
// see https://go.microsoft.com/fwlink/?linkid=864501
spa.Options.SourcePath = "ClientApp";
});
}
Some examples:一些例子:
Mysite.com/documents/view/
Mysite.com/documents/view/
Mysite.com/PendingTransactions
Mysite.com/PendingTransactions
Solution works for MVC 4.解决方案适用于 MVC 4。
NOTE: You should place your default route after all your other routes, but before your catch all route.注意:您应该将默认路由放在所有其他路由之后,但在捕获所有路由之前。
Exclude Angular app from MVC routing (You will notice something funny with the true/false evaluation, this is because the app routing is handled by MVC unless we are in the /app angular application. You can see the opposite implantation here ):从 MVC 路由中排除 Angular 应用程序(您会注意到真/假评估有些有趣,这是因为应用程序路由是由 MVC 处理的,除非我们在 /app Angular 应用程序中。您可以在这里看到相反的植入):
routes.MapRouteLowercase(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
constraints: new
{
serverRoute = new ServerRouteConstraint(url =>
{
var isAngularApp = false;
if (url.PathAndQuery.StartsWith("/app",
StringComparison.InvariantCultureIgnoreCase))
{
isAngularApp = true;
}
return !isAngularApp;
})
}
);
The ServerRouteConstraint class: ServerRouteConstraint 类:
public class ServerRouteConstraint : IRouteConstraint
{
private readonly Func<Uri, bool> _predicate;
public ServerRouteConstraint(Func<Uri, bool> predicate)
{
this._predicate = predicate;
}
public bool Match(HttpContextBase httpContext, Route route, string parameterName,
RouteValueDictionary values, RouteDirection routeDirection)
{
return this._predicate(httpContext.Request.Url);
}
}
This is a catch-all for when no other routes matched.当没有其他路由匹配时,这是一个包罗万象的方法。 Let the Angular router take care of it
让 Angular 路由器来处理它
routes.MapRouteLowercase(
name: "angular",
url: "{*url}",
defaults: new { controller = "App", action = "Index" } // The view that bootstraps Angular 5
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.