. Định tuyến MVC NetNet: Đặt MapSpaFallbackRoute Điều kiện Mỗi Bộ điều khiển

Tôi đang phát triển một dự án liên quan đến nhiều Ứng dụng Trang Đơn được lưu trữ trên một ứng dụng web .Net Core 1.0 đơn lẻ.. Định tuyến MVC NetNet: Đặt MapSpaFallbackRoute Điều kiện Mỗi Bộ điều khiển

Mục đích là phân vùng mỗi SPA sao cho tất cả chúng đều tồn tại riêng biệt, mỗi mục có Chế độ xem và Bộ điều khiển riêng.

Trong Startup.cs, đang sử dụng Microsoft.AspNetCore.SpaServices MapSpaFallbackRoute để bỏ qua các liên kết sâu tới SPA (trong trường hợp này là Angular 2), vì vậy MVC không bị lẫn lộn và ném 404 khi làm mới trang.

Tôi có nó hoạt động cho một SPA tại một thời điểm khi tôi đặt Bộ điều khiển theo cách thủ công trong MapSpaFallbackRoute, nhưng tôi không thể tìm ra cách thiết lập điều kiện cho mỗi Bộ điều khiển SPA.

Tôi giả định rằng sự kết hợp giữa Mapwhen() và Run() sẽ giúp tôi có được vị trí cần thiết, nhưng dường như tôi không thể nhận được cú pháp chính xác.

Giả sử SPAs được đặt tên 'Dash1', 'Dash2', vv Các tuyến đường dự phòng sau hoạt động hoàn hảo cho Dash1:

app.UseMvc(routes => 
     { 
      routes.MapRoute(
       name: "default", 
       template: "{controller=Home}/{action=Index}/{id?}"); 

      routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Dash1", action = "Index" }); 
     });

Tôi đã thử điều này:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
    { 

     app.UseMvc(routes => 
     { 
      routes.MapRoute(
       name: "default", 
       template: "{controller=Home}/{action=Index}/{id?}"); 
     }); 
     app.Map("/Dash1", HandleDash1); 

    } 

    private static void HandleDash1(IApplicationBuilder app) 
    { 
     app.UseMvc(routes => 
     { 
      routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Dash1", action = "Index" }); 
     }); 
    } 
}

.. Nhưng sau đó khi tôi điều hướng đến Dash1 và cố gắng làm mới trang, trình duyệt sẽ thêm '/ Dash1 /' vào tất cả các yêu cầu http và phá vỡ mọi thứ.

Nguồn

2016-10-04 David

Hoàn toàn đoán ở đây, nhưng bạn đã thử 'routes.MapSpaFallbackRoute (" {controller}/spa-fallback ", mới {action =" Index "});' trong phương pháp tiếp cận đầu tiên của bạn? –

Tôi đã thử nhưng vẫn nhận được 404 khi làm mới trang.Tham số chuỗi đầu tiên chỉ là tên của tuyến đường, nhưng có vẻ như nó có thể thực hiện theo cách đó; chỉ cần đăng ký Bộ điều khiển hiện tại làm dự phòng. – David

Tôi đã làm cho nó hoạt động với MapWhen(), nhưng mỗi SPA sẽ phải được đăng ký theo cách này.

app.MapWhen(context => context.Request.Path.Value.StartsWith("/Dash1"), builder => 
{ 
    builder.UseMvc(routes => 
    { 
     routes.MapSpaFallbackRoute("dash1-fallback", new { controller = "Dash1", action = "Index" }); 
    }); 
}); 

app.UseMvc(routes => 
{ 
    routes.MapRoute(
     name: "default", 
     template: "{controller=Home}/{action=Index}/{id?}"); 
});

Tôi đang sử dụng phương pháp này để lưu trữ ứng dụng Angular (2+). Ban đầu tôi đã sử dụng SystemJS và giữ tất cả các ứng dụng trong một dự án, nhưng tôi đã chuyển sang Angular CLI khi phiên bản 4 được phát hành.

Cách tốt nhất tôi tìm được để quản lý ứng dụng là tạo một dự án riêng trong giải pháp cho từng ứng dụng và sử dụng tập lệnh NPM để sao chép các tệp được nhóm vào thư mục bên trong wwwroot của dự án "chính".

Thay vì trả lại Chế độ xem, tôi chỉ phục vụ tệp html tĩnh được tạo bởi CLI nhưng Chế độ xem cũng hoạt động tốt.

public IActionResult Index() 
{ 
    return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/dash1", "index.html"), "text/HTML"); 
}

Phần khó khăn là quản lý bộ định tuyến. Bạn phải đặt base href và chuyển hướng định tuyến sang bộ định tuyến Angular bằng cách đặt cửa sổ ['_ app_base'] tương ứng với tuyến đường của bộ điều khiển hiện tại.

Bao gồm những điều sau đây trong index.html:

<head> 
    // Set base href. 
    // You need to include the path if serving the static file from wwwroot 
    // Use '/' if using a View (I think, I had to change this when I switched to static files). 

    <base href="/dash1/"> 

    <script> 
     (function() { 
      // You could type the controller path here again but this will infer it. 

      window['_app_base'] = '/' + window.location.pathname.split('/')[1]; 

     })(); 
    </script> 
</head>

Sau đó, router góc có để có được nó là vòng bi từ cửa sổ [ '_ app_base']. Trong app.module.ts, hãy bao gồm:

import { NgModule, Provider } from '@angular/core'; 
import { APP_BASE_HREF, Location } from '@angular/common'; 
const baseHref: Provider = { 
    provide: APP_BASE_HREF, 
    useValue: window['_app_base'] || '/' 
};

Cuối cùng, bao gồm baseHref trong mảng nhà cung cấp của @NgModule.

Nguồn

2016-10-12 14:51:49 David

David, tôi đang đấu tranh để hiểu làm thế nào để tạo ra các ứng dụng Angular 2 riêng biệt trong một ứng dụng ASP.Net Core MVC. Bạn có sẵn sàng cung cấp một số thông tin chi tiết xin vui lòng? – TDC

Xin chào TDC. Tôi đã cập nhật bài đăng với nhiều thông tin hơn một chút. Tôi đang sử dụng SystemJS thay vì Webpack, và có rất nhiều tính năng xây dựng mới có sẵn mà tôi chưa học được. Tôi đã thấy câu hỏi của bạn về mẫu Angular mới có sẵn trên Nuget, nhưng phương pháp này không tương thích với Webpack, vì vậy tôi đã cập nhật câu trả lời này ở đây. Hy vọng nó giúp. – David

Cảm ơn bạn David đã làm rõ, được đánh giá cao nhất. Tôi cần dành một chút thời gian để hiểu được điều này phù hợp với nhau như thế nào. Tôi không thể quyết định nếu tích hợp Angular trong ASP.Net Core là thuận lợi hoặc hoàn toàn mất tập trung (cụm từ lịch sự). – TDC

. Định tuyến MVC NetNet: Đặt MapSpaFallbackRoute Điều kiện Mỗi Bộ điều khiển

Trả lời

Các vấn đề liên quan