ASP.NET

Developing Book My Seat Application In AngularJS And ASP.NET - Usage Of Routing And RouteParams

Here, I’ve thought to write my thoughts about hands-on Angular. This is the fourth article of the series which explains how you can manage the database and stored procedures.

This article elaborates about managing routing, and fetches the essential values from URl route using route params. Routing is managed by RouteProvider given by AngularJS and RouteParams.

Main sections of attraction here are _Layout.cshtml and main JavaScript file, where we have managed routing using RouteProvider. Kindly open this file and make the required changes as shown in the code snippet below. Also, refer to the image to locate _layout.cshtml file under solution.



Paste the following code into _Layout.cshtml and remove the existing one, as depicted below.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>@ViewBag.Title - My ASP.NET MVC Application</title>  
  6.     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />  
  7.     <meta name="viewport" content="width=device-width" />  
  8.     @Styles.Render("~/Content/css")  
  9.     @Scripts.Render("~/bundles/modernizr")  
  10.     <script src="~/Scripts/angular.js"></script>  
  11.     <script src="~/Scripts/angular-route.js"></script>  
  12.     <script src="~/Application/Routing.js"></script>  
  13.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  14.     <script data-require="ui-bootstrap" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>  
  15.   
  16.     <style>  
  17.         .color-me  
  18.         {  
  19.             color: blue;  
  20.         }  
  21.     </style>  
  22.   
  23.     }  
  24. </head>  
  25. <body>  
  26.     <header>  
  27.         <div class="content-wrapper">  
  28.             <div class="float-right">  
  29.                 <section id="login">  
  30.                 </section>  
  31.                 <nav>  
  32.                 </nav>  
  33.             </div>  
  34.         </div>  
  35.     </header>  
  36.     <div id="body" ng-app="routingApp" class="float-center">  
  37.         <nav class="navbar  bg-primary navbar-fixed-top">  
  38.             <div class="container-fluid">  
  39.                 <div class="navbar-header">  
  40.                     <a class="navbar-brand" href="http://dotnetpiper.com/">BookYourSeat !! </a>  
  41.                 </div>  
  42.                 <ul class="nav navbar-nav navbar-dark bg-primary">  
  43.                     <li class="color-me"><a href="#/Home"><b>Home</b></a></li>  
  44.                     <li class="color-me"><a href="#/SeatBooking/100PM"><b>Slot 1.00PM</b></a></li>  
  45.                     <li><a href="#/SeatBooking120/120PM"><b>Slot 1.20PM</b></a></li>  
  46.                     <li><a href="#/SeatBooking140/140PM"><b>Slot 1.40PM</b></a></li>  
  47.                     <li><a href="#/SeatBooking200/200PM"><b>Slot 2.00PM</b></a></li>  
  48.                     <li><a href="#/ShowBookSeatDetail"><b>ShowBookSeatDetail</b></a></li>  
  49.                 </ul>  
  50.                 <ul class="nav navbar-nav navbar-right">  
  51.                     <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>  
  52.                     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>  
  53.                 </ul>  
  54.             </div>  
  55.         </nav>  
  56.   
  57.         <ng-view></ng-view>  
  58.         @RenderSection("featured", required: false)  
  59.   
  60.         @RenderBody()  
  61.   
  62.     </div>  
  63.     <footer>  
  64.         <div class="content-wrapper">  
  65.             <div class="float-left">  
  66.                 <b>  
  67.                     <p style="text-align: left">© @DateTime.Now.Year - BookMySeat by www.DotnetPiper.com</p>  
  68.                 </b>  
  69.             </div>  
  70.         </div>  
  71.     </footer>  
  72.   
  73.     @Scripts.Render("~/bundles/jquery")  
  74.     @RenderSection("scripts", required: false)  
  75. </body>  
  76. </html>  
Now, press F5 and run your application. You should get the output of home page as shown below.



Create a JavaScript file with your preferred name like I have created a main JS file with the name routing.js, under the solution. It is always a good practice if you keep your main file under different folder ( like I placed it in Application folder).



Open Routing.js file and paste the following code in that.
  1. routingApp.config(['$routeProvider', function ($routeProvider) {  
  2.     //alert("Route Initiated");  
  3.     $routeProvider.  
  4.        // when('/Home', { templateUrl: '/Application/login.html', controller: 'DotnetPiperController' }).  
  5.         when('/SeatBooking/:slotNumber', { templateUrl: '/Application/booking.html', controller: 'BookingController' }).  
  6.         when('/SeatBooking120/:slotNumber', { templateUrl: '/Application/booking.html', controller: 'BookingController' }).  
  7.          when('/SeatBooking140/:slotNumber', { templateUrl: '/Application/booking.html', controller: 'BookingController' }).  
  8.          when('/SeatBooking200/:slotNumber', { templateUrl: '/Application/booking.html', controller: 'BookingController' }).  
  9.          when('/ShowBookSeatDetail', { templateUrl: '/Application/showBookingData.html', controller: 'ShowBookingDetailController' }).  
  10.         when('/CustomDirective', { templateUrl: '/Application/CustomDirective.html', controller: 'OlympicController' }).  
  11.         otherwise({ redirectTo: '' });  
  12. }]);  
Now, open you Routing.js file and write the below code segment in order to get values from route URL.
  1. var routingApp = angular.module('routingApp', ['ngRoute', 'ui.bootstrap']);  
  2.   
  3. routingApp.controller("BookingController", ['$scope', 'dataService', '$routeParams', '$modal', '$log', function ($scope, dataService, $routeParams, $modal, $log) {  
  4.     $scope.GetIndex = function (Index) {  
  5.         $scope.lastIndex = Index;  
  6.     }  
  7.       
  8.     var slotNum = $routeParams.slotNumber.substring(0, 3);  
  9.       
  10. }]);  

As soon as you run an application and hit the URL, http://localhost:51309/#/SeatBooking/100PM, you should get the route value as 100. Kindly refer to the image below.



I hope you have understood how to retrieve URL values using route Params with the help of Routing in AngularJS.
 
Enjoy Coding !!! 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs