混合 SPA 和 ASP.NET MVC 路由

Posted 2023-03-31

【中文标题】混合 SPA 和 ASP.NET MVC 路由

【英文标题】：Mixed SPA and ASP.NET MVC Routing

【发布时间】：2018-02-14 17:27:46

【问题描述】：

我正在开发一个混合路由 Angular 2 和 ASP.NET Core 2 (razor) 项目。您将如何跳出角度路由并获得剃须刀页面？我尝试使用角度路由捕获所有未知路由并重新加载未知路由，但如果有路由 ASP.NET 并且 angular 无法识别它会进入循环。 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";
    );

一些例子：

Mvc 路由Mysite.com/documents/view/ 角路线Mysite.com/PendingTransactions

【问题讨论】：

如果您对某个问题投反对票，请有礼貌地指出原因。

你有 angular 应用程序和 mvc 应用程序共享一些共同的路由。即 mysite.com/app/angular 和 mysite.com/app/mvc？请提供一些示例，说明您的应用程序中的路由以及您对这些路由的 MVC 和 Angular 配置。

刚刚注意到您使用的是 ASP.Net Core MVC。我已经在 ASP.Net MVC (NOT Core) 中用 angular 5 解决了这个问题。如果你想让我用对我有用的方法来回答这个问题，请告诉我，但你必须自己将它应用到 Core。

我希望你 (Zzz) 回答有关 asp.net mvc 的问题，我会尝试将其移植到核心。

我的回答有帮助吗？

【参考方案1】：

解决方案适用于 MVC 4。

注意：您应该将默认路线放在所有其他路线之后，但在您的全部路线之前。

从 MVC 路由中排除 Angular 应用程序（你会注意到真/假评估的一些有趣之处，这是因为应用程序路由由 MVC 处理，除非我们在 /app 角度应用程序中。你可以看到相反的植入 @987654321 @):

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;
                    )
                
            );

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);
        
    

当没有其他路由匹配时，这是一个包罗万象的方法。让 Angular 路由器来处理它

    routes.MapRouteLowercase(
        name: "angular",
        url: "*url",
        defaults: new  controller = "App", action = "Index"  // The view that bootstraps Angular 5
    );