Umleiten zu Angular2 app innerhalb einer ASP.NET MVC-Controller mit Parametern

Question

Ich versuche von einem MVC-Controller auf eine Winkel 2 App umzuleiten, die innerhalb eines Bereichs des MVC Projekt befindet, ist Struktur wie folgt:

Clients.Web (MVC project) 
| 
+--Areas 
    | 
    +--Legacy 
    | | 
    | +--Controllers 
    |  | 
    |  +--Action1ApiController 
    | 
    +--Web 
     | 
     +--app 
     | | 
     | +--action1 
     | | | 
     | | +--action1.component.ts 
     | | 
     | +--action2 
     | | | 
     | | +--action2.component.ts 
     | | 
     | +--app.component.ts 
     | +--index.html 
     | +--main.ts 
     | 
     +--assets (vendor modules, images etc.) 
     +--Controllers 
     | | 
     | +--AppController.cs 
     | 
     +--node_modules 
     +--typings 
     | 
    ... 

Ich muss in der Lage sein, von einer alten MVC-Seite in die Angular 2 App, z

/Web/App/Action1?param1=10&param2=15 

sollte

/Action1/:param1/:param2 

in Angular verlegt werden. Zur gleichen Zeit muss ich der Lage sein, Aktionen aufzurufen auf

/Areas/Legacy/Controllers/Action1ApiController 

Ich kann nicht, für die Liebe von Cookies, herauszufinden, wie das zu tun. In meinem index.html stelle ich die base href zu

<base href="/Areas/Web/"> 

In derselben Datei ich das Hauptmodul mit SystemJS importiert,

<script> 
    System.config({ 
    baseURL: './', 
    map: { 
     'angular2': '/Areas/Web/node_modules/angular2', 
     'rxjs': '/Areas/Web/node_modules/rxjs' 
    } 
    }); 
    System.defaultJSExtensions=true; 
    System.import('/Areas/Web/app/main') 
    .then(null,console.error.bind(console)); 
</script> 

wo ich die app

import { bootstrap } from 'angular2/platform/browser'; 
import { AppComponent } from './app.component'; 

bootstrap(AppComponent, []) 
    .then(success => console.log('Bootstrap success')) 
    .catch(error => console.log(error)); 

Schließlich dann Bootstrap, in app.component Ich richte

ein

Allerdings, wenn ich dann navigieren

/Areas/Web/app/index.html?param1=10&param2=!5 

ich

param1 = 'app' 
param2 = 'index.html' 

in Action1Component geben, was eindeutig nicht das, was ich wollte. Alle Hinweise würden geschätzt werden.

EDIT:

Routing zielt nur die AppController im Moment

routes.MapRoute("SPA", "Web/{controller}/{action}/{id}", 
    new { controller = "App", action = "Index", area = "Web", id = UrlParameter.Optional }, 
    new[] { "SomeSite.Areas.Web.Controllers" }); 

und der Code für die Aktion ist

public class AppController : Controller 
{ 
    public ActionResult Index(int param1, int param2) 
    { 
     return Redirect($"/Areas/Web/app/index.html?param1={param1}&param2={param2}"); 
    } 
} 

Als ich ein Vermächtnis Web-Migration Seite eine Seite auf einmal, die Idee ist, Aktionen Action1, Action2 etc. auf der AppController an d Verknüpfen Sie diese Aktionen mit Legacy-Seiten.

Answer 1

Die Sache ist, dass Ihr Routing nicht übereinstimmt.

Sie sagen, Sie wollen die Route

/Action1/:param1/:param2

geroutet werden, aber es gibt

index.html?param1={param1}&param2={param2}

, die einfach nicht dasselbe ist. Das Problem wird zu diesem Zeitpunkt in Ihrer MVC-App auftreten, da es Ihren gesamten Verkehr, beginnend mit /Web, auf den Controller umleitet und die SPA-App erstellt. Aber die SPA-App wird nur die URL von dem Punkt nach /Areas/Web/ betrachten und somit mit dem \app als ersten Parameter sehen, weil Sie gesagt haben, dass sie zuerst zwei Parameter in der URL erwarten.

public ActionResult Index(int param1, int param2) 
{ 
    return Redirect($"/Areas/Web/app/index.html?param1={param1}&param2={param2}"); 
} 

sollte

public ActionResult Index(int param1, int param2) 
{ 
    return Redirect($"/Areas/Web/param1/param2"); 
} 

nach Ihrer Angular App sein, aber das wird einen neuen Zyklus zu tun Routing zu tun, eine Umleitung starten, und wird in einer Endlosschleife enden.

Normalerweise habe ich eine Aktion in meiner MVC-Anwendung, die nur die Spa-App erstellt, indem eine HTML-Seite und keine Weiterleitung zurückgegeben wird, um das Routing außerhalb des Abfangens zu vermeiden. Wie so

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return new FilePathResult("~/index.html", "text/html"); 
    } 
} 

In Ihrem Fall, wenn Sie die Parameter fangen müssen, combind vielleicht die zwei, also, wenn es Parameter, einen Controller hat, dass abfängt und umleitet auf die richtige URL (mein improvment des Controllers oben) und dann eine Route, die die neue URL abfängt und die App wie mein letztes Beispiel erstellt, würde funktionieren.

Alternativ verwenden Sie einfach mein Beispiel am Ende, lassen Sie die URL untouchd und behandeln Sie es in Angular, indem Sie dorthin umleiten.