ASP.NET MVC 5 с угловой 7;как внедрить виртуальный путь веб-приложения в угловые маршруты? - PullRequest
Новая
       36

ASP.NET MVC 5 с угловой 7;как внедрить виртуальный путь веб-приложения в угловые маршруты?

0 голосов
/ 12 декабря 2018

Извините за длину, мой первый вопрос здесь о переполнении стека.Я потратил немного времени, чтобы познакомить вас с границами моей проблемы.

У меня есть веб-приложение ASP.NET, которое начиналось как приложение, использующее исключительно веб-формы.Чтобы воспользоваться возможностями, предоставляемыми такими современными веб-технологиями, как Angular, я добавил ASP.NET MVC в это приложение.Веб-формы и страницы бритвы MVC теперь работают бок о бок.Замечательно!

Я добавил MVC к миксу, потому что обнаружил, что Angular легче использовать на странице бритвы MVC, чем на веб-формах.В любом случае, это мой опыт.

Идея состоит в том, чтобы создать в моем приложении один маршрут, который запускает бритвенную веб-страницу, на которой Angular вступает во владение.Естественно, двум технологиям было суждено вмешиваться друг в друга в отношении маршрутизации внутри приложения.

Итак, в моем приложении теперь есть контроллер MVC, который я назвал SpaController.Метод действия внутри этого называется Index.До сих пор довольно стандартно.

После долгих исследований и метода проб и ошибок я нашел решение, которое работает: всякий раз, когда я перехожу к этому URI: "/ spa" или "/spa / index ", MVC отображает страницу бритвы под названием" ~ / Views / Spa / Index.vbhtml ".Вот мои маршруты MVC: 

routes.IgnoreRoute("{resource}.axd/{*pathInfo}")

    routes.MapRoute(
        name := "SpaRoute",
        url := "Spa",
        defaults := New With {.Controller = "Spa", .Action = "Index", .Id = UrlParameter.Optional})

    routes.MapRoute(
        name := "SpaIndexRoute",
        url := "Spa/Index",
        defaults := New With {.Controller = "Spa", .Action = "Index", .Id = UrlParameter.Optional})

    routes.MapRoute(
        name := "AppRoute",
        url := "app/dashboard",
        defaults := New With {.Controller = "Spa", .Action = "Index", .Id = UrlParameter.Optional})

    routes.MapRoute(
        name := "AngularAnyRoute",
        url := "*{url}",
        defaults := New With {.Controller = "Spa", .Action = "Index", .Id = UrlParameter.Optional})

Я определил отдельный маршрут для использования с или без имени метода действия, как вы можете видеть, а также некоторые маршруты MVC для обработки навигации к угловым маршрутам, вконец.

Мне пришлось добавить угловые маршруты, потому что я хочу, чтобы пользователь мог обновлять страницу в браузере после перехода к любому угловому маршруту.Обновление, как вы все знаете, выполняет полное обновление на стороне сервера.Поскольку URL-адрес изменяется с маршрута MVC "/ Spa / Index" на "/ app / dashboard /" после загрузки углового приложения, я должен убедиться, что приложение не ищет контроллер MVC с именем AppController с действиемметод под названием «Панель инструментов» (который не существует).Вместо этого я хочу перенаправить пользователя обратно в SpaController, который снова обслуживает угловое приложение.

В случае, если вам интересно: на странице _Layout.vbhtml я установил базовый URL-адрес "/ VirtualFolder / приложение».Это говорит угловому приложению, что его навигация начинается с этой части URI. 

<head>
<base href="@(Url.Content("~/app"))" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application with MVC and Angular</title>

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

Теперь мы рассмотрим мою проблему: мое угловое приложение имеет маршрут панели мониторинга какего корень.Поэтому я определил маршрут с помощью пути, подобного «приборной панели».Однако, поскольку MVC находится в миксе, мне пришлось добавить несколько маршрутов MVC в угловую маршрутизацию и выполнить действие перенаправления на этих маршрутах, которое перенаправляет любой трафик на маршрут панели мониторинга.

Моя проблемачто эти маршруты должны содержать имя виртуальной папки моего веб-приложения.Мое приложение работает под управлением IIS, и URI выглядит примерно так: 

https://localhost/VirtualFolder/

Поскольку я развертываю свое веб-приложение для разных клиентов, а имя виртуальной папки у каждого клиента разное, я бы хотел избежатьнеобходимость жесткого кодирования угловых маршрутов для каждого клиента.Я хотел бы, чтобы в эти маршруты было введено имя виртуальной папки моего приложения.

Вот мои угловые маршруты.Вы можете увидеть имя виртуальной папки там. 

{
    path: 'dashboard',
    component: DashboardComponent
},
{
    path: 'VirtualFolder/Spa',
    redirectTo: 'dashboard'
},
{
    path: 'VirtualFolder/spa',
    redirectTo: 'dashboard'
},
{
    path: 'VirtualFolder/Spa/Index',
    redirectTo: 'dashboard'
},
{
    path: 'VirtualFolder/spa/index',
    redirectTo: 'dashboard'
},
{
    path: 'VirtualFolder/app',
    redirectTo: 'dashboard'
},
{
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
}

Я нашел статью, описывающую, как можно получить маршруты через службу (возвращаемую как json) и сбросить маршруты углового приложения перед загрузкой AppComponent:

Динамические маршруты

Тем не менее, я хочу знать, если кто-нибудь из вас, ребята, знает решение с меньшим количеством кода.

Я надеялся, что это былоMVC легко внедрить имя виртуальной папки в файл JavaScript во время загрузки страницы бритвы, но это не так просто сделать (пожалуйста, исправьте меня, если я ошибаюсь).

Другому парню удалось передать значение в AppComponent, указав свойство в главном теге приложения, например: 

<app-root virtualFolderPath="VirtualFolder"><app-root>

Однако, хотя такое значение действительно передается в конструкторкомпонент, который загружается с помощью angular (обычно это AppComponent), мне нужно изменить значения массива маршрутов внутри app-routing.module.ts, и, насколько я понимаю, модуль маршрутизации уже инициализирован, когда код внутри AppComponentможет быть выполненЕсли бы я только мог передать значение в модуль маршрутизации аналогичным образом ...

Надеюсь, что у кого-то есть совет относительно того, что, по его мнению, является лучшим решением для этого.Я был бы очень признателен.Надеюсь, кто-то столкнулся с такой же проблемой, как и я.

...