Вызов контроллера Asp.net MVC 5 с использованием Angular 2 Http

Question

Я новичок в угловом 2 и пытаюсь вызвать контроллер MVC с помощью кнопки «Угловая кнопка», но всякий раз, когда я нажимаю кнопку, моя страница обновляется. Пожалуйста, помогите .THANKS Заранее

Мой LoginComponent код

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; 
import { AuthenticationService } from '../services/authentication.service'; 
import { Router } from "@angular/router"; 

@Component({ 
    template: ` 
<md-card> 
    <div class="container"> 
    <section id="content"> 
     <form [formGroup]='loginForm' action="" (ngSubmit)='onsubmit()'> 
      <h1>Login</h1> 
      <div> 
      <md-input placeholder='Email' class="md-input" formControlName='email'></md-input> 
       <div *ngIf="loginForm.controls.email.errors?.required && loginForm.controls.email.dirty" 
       class="alert alert-danger"> 
          Email is required 
       </div> 
     </div> 
      <div> 
       <md-input placeholder='Password' class="md-input" type='password' formControlName='password'></md-input> 
      </div> 
      <div> 
       <input type="submit" value="Log in" /> 
       <a href="#">Lost your password?</a> 
       <a href="#" [routerLink]="['/Signup']">Register</a> 
      </div> 
     </form><!-- form --> 

    </section><!-- content --> 
</div></md-card>`, 
    styleUrls: ['../Content/AppStyles/login.css'] 
}) 

export class LoginComponent implements OnInit { 
    public loginForm: FormGroup; 
    private authenticationService: AuthenticationService; 
    private router: Router; 
    loading = false; 
    returnUrl: string; 
    ngOnInit() { 
     this.loginForm = new FormGroup({ 
      email: new FormControl('', [<any>Validators.required]), 
      password: new FormControl('', [<any>Validators.required]), 
     }); 
    } 
    onsubmit() { 

     this.loading = true; 
     this.authenticationService.login("xyz","abc").subscribe(data => { 
      // this.router.navigate([this.returnUrl]); 
     }, 
      error => { 
       this.loading = false; 
      } 
     ) 
     console.log(this.loginForm.value); 
    } 
} 

Authentication Service

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map' 

@Injectable() 
export class AuthenticationService { 
    constructor(private http: Http) { } 

    login(username: string, password: string) { 
     console.log(username); 
     return this.http.post('/Account/Login', JSON.stringify({ username: username, password: password })) 
      .map((response: Response) => { 
       // login successful if there's a jwt token in the response 
       let user = response.json(); 
       if (user && user.token) { 
        // store user details and jwt token in local storage to keep user logged in between page refreshes 
        localStorage.setItem('currentUser', JSON.stringify(user)); 
       } 
      }); 
    } 

    logout() { 

     localStorage.removeItem('currentUser'); 
    } 
} 

Моя конфигурация MVC Маршрутизация:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.Web.Routing; 

namespace iShopping 
{ 
    public class RouteConfig 
    { 
     public static void RegisterRoutes(RouteCollection routes) 
     { 
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 
      routes.MapMvcAttributeRoutes(); 
      routes.MapRoute(
       name: "Default", 
       url: "{controller}/{action}/{id}", 
       defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }, 
       constraints: new 
       { 
        serverRoute = new ServerRouteConstraint(url => 
        { 
         return url.PathAndQuery.StartsWith("/Account", 
          StringComparison.InvariantCultureIgnoreCase); 
        }) 
       } 

      ); 
     routes.MapRoute(
     name: "angular", 
     url: "{*url}", 
     defaults: new { controller = "Home", action = "Index" } // The view that bootstraps Angular 2 
    ); 

     } 
    } 
} 

Answer 1

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

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

Если это произойдет, и у вас нет углового маршрута, соответствующего /account/login, оно скорее всего вернется к вашему маршруту по умолчанию (если у вас есть?). Если это произойдет, ваша страница не будет действительно обновляться, а загрузит компонент вашего маршрута по умолчанию.

Пожалуйста, перейдите к конфигурациям вашего маршрута, чтобы узнать, не является ли эта проблема. Легкий способ проверить, может ли это быть в случае, это проверить, удалили ли нас вообще /account/login.

Если это проблема, рассмотрите префикс ваших маршрутов MVC, например, /api/..., затем создайте правило маршрута, в котором маршруты api отправятся на ваши контроллеры, а все остальное переходит в угловое.