title: Calling Asp.net MVC 5 controller using Angular 2 Http
body: <p>I'm new to angular 2 and trying to call MVC controller from Angular on button click but whenever I click on button my page refreshes . Please help .Thanks In advance</p>
  
  <p>My LoginComponent code </p>
  
  <pre><code>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: `
  &lt;md-card&gt;
    &lt;div class="container"&gt;
      &lt;section id="content"&gt;
          &lt;form [formGroup]='loginForm' action="" (ngSubmit)='onsubmit()'&gt;
              &lt;h1&gt;Login&lt;/h1&gt;
              &lt;div&gt;
               &lt;md-input placeholder='Email' class="md-input" formControlName='email'&gt;&lt;/md-input&gt;
                  &lt;div *ngIf="loginForm.controls.email.errors?.required &amp;&amp; loginForm.controls.email.dirty"
                   class="alert alert-danger"&gt;
                               Email is required
                  &lt;/div&gt;
           &lt;/div&gt;
              &lt;div&gt;
                   &lt;md-input placeholder='Password' class="md-input" type='password' formControlName='password'&gt;&lt;/md-input&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="submit" value="Log in" /&gt;
                  &lt;a href="#"&gt;Lost your password?&lt;/a&gt;
                  &lt;a href="#" [routerLink]="['/Signup']"&gt;Register&lt;/a&gt;
              &lt;/div&gt;
          &lt;/form&gt;&lt;!-- form --&gt;
  
      &lt;/section&gt;&lt;!-- content --&gt;
  &lt;/div&gt;&lt;/md-card&gt;`,
      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('', [&lt;any&gt;Validators.required]),
              password: new FormControl('', [&lt;any&gt;Validators.required]),
          });
      }
      onsubmit() {
  
          this.loading = true;
          this.authenticationService.login("xyz","abc").subscribe(data =&gt; {
             // this.router.navigate([this.returnUrl]);
          },
              error =&gt; {
                  this.loading = false;
              }
          )
          console.log(this.loginForm.value);
      }
  }
  </code></pre>
  
  <p>Authentication Service </p>
  
  <pre><code>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) =&gt; {
                  // login successful if there's a jwt token in the response
                  let user = response.json();
                  if (user &amp;&amp; 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');
      }
  }
  </code></pre>
  
  <p>My MVC Routing configuration is :</p>
  
  <pre><code>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 =&gt;
                       {
                           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
      );
  
          }
      }
  }
  </code></pre>