A mini SPA with ASP.NET MVC and AngularJS

SPA stands for Single Page Application; I think you already have little idea on it. Here I will demonstrate a mini SPA with ASP.NET MVC and AngularJS. So, let’s start.

Step 1: Create a ASP.NET MVC application with empty template

Open visual studio, Got to File->New->Project
Select Template -> Visual C# -> Web -> ASP.NET MVC 4 Web application and click OK
Select Empty Template and Razor as view engine

Step 2: Install required packages
Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package. Make sure your internet connection is enabled.

PM> Install-Package jQuery
PM> Install-Package angularjs -Version 1.0.7
PM> Install-Package Newtonsoft.Json

Step 3: Create View model
In this application I will try to demonstrate two pages for Trainer and Training. For this purpose, create TrainerVM, TrainingVM, RegistrationVm view model in Model folder. JSONBuilder is a class in Model folder which make model as json serialized.

    public class TrainingVm
    {
        public string TrainingCode { get; set; }
        public string Title { get; set; }
        public string Trainer { get; set; }
    }



    public class TrainerVm
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Venue { get; set; }
    }



    public class RegistrationVm
    {
        public string Trainings { get; set; }
        public string Trainers { get; set; }
    }




public class JSONBuilder
    {
        public RegistrationVm BuildRegistrationVm()
        {
            var registrationVm = new RegistrationVm
            {
                Trainings = GetSerializedTraining(),
                Trainers = GetSerializedTrainers()
            };

            return registrationVm;
        }

        public string GetSerializedTraining()
        {
            var trainings = new[]
                {
                    new TrainingVm {TrainingCode = "TRA001", Title = "ASP.NET MVC 4", Trainer="Mahedee Hasan"},
                    new TrainingVm {TrainingCode = "TRA002", Title = "ASP.NET Web Form", Trainer="Asrafuzzaman"},
                    new TrainingVm {TrainingCode = "TRA003", Title = "AngularJs Fundamental", Trainer="Foysal Alam"},
                    new TrainingVm {TrainingCode = "TRA004", Title = "ASP.NET MVC 5 with web API", Trainer="Asfaquzzaman"},
                };
            var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
            var serializeCourses = JsonConvert.SerializeObject(trainings, Formatting.None, settings);
            return serializeCourses;
        }


        public string GetSerializedTrainers()
        {
            var trainers = new[]
                {
                    new TrainerVm {Name = "Mahedee Hasan", Email = "mahedee.hasan@gmail.com", Venue="Leadsoft Bangladesh Ltd"},
                    new TrainerVm {Name = "Asrafuzzaman", Email = "asraf@gmail.com", Venue="Leadsoft Bangladesh Ltd"},
                    new TrainerVm {Name = "Foysal Alam", Email = "foysal@gmail.com", Venue="Leadsoft Bangladesh Ltd"},
                    new TrainerVm {Name = "Asfaquzzaman", Email = "asfaq@gmail.com", Venue="Leadsoft Bangladesh Ltd"},
                };
            var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
            var serializedInstructors = JsonConvert.SerializeObject(trainers, Formatting.None, settings);
            return serializedInstructors;
        }
    }

Step 4: Create a RegistrationController in controller folder

 
public class RegistrationController : Controller
    {
        private JSONBuilder jsonBuilder = new JSONBuilder();

        public ActionResult Index()
        {
            return View(jsonBuilder.BuildRegistrationVm());
        }

    }

Step 5: Create TrainingController and TrainerController
Create TrainingsController.js and TrainersController.js in Scripts->Application->Controllers folder

TrainersController.js

'use strict';

registrationModule.controller("TrainersController", function ($scope, registrationData) {
    $scope.trainers = registrationData.trainers;
});

TrainingsController.js

'use strict';

registrationModule.controller("TrainingsController", function ($scope, registrationData) {
    $scope.trainings = registrationData.trainings;
});

I will define registrationModule and registrationData in next steps.

Step 6: Create registrationModule
Create registrationModule.js in Scripts->Application. This is the configuration file for angular routing in client side.

var registrationModule = angular.module("registrationModule", [])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/Registration/Trainings', {
            templateUrl: '/templates/Trainings.html',
            controller: 'TrainingsController'
        });

        $routeProvider.when('/Registration/Trainers', {
            templateUrl: '/templates/trainers.html',
            controller: 'TrainersController'
        });

        $locationProvider.html5Mode(true);
    });

Here you might see that I map template and controller on corresponding routing. But I didn’t declare template yet. I will declare template in next steps.

Step 7: Create a layout page
Create a layout page in Views-> Shared ->_Layout.cshtml and add reference of angularjs, jquery and registration module.


    
        
        
        

        Training Registration
        @RenderSection("JavascriptInHead", required:false)
    
    
        @RenderBody()
    

Step 8: Create Index view
Right click on Index action of Registration controller and add a view. Modify the view as following.

@model MiniSPA.Models.RegistrationVm

@{
    ViewBag.Title = "Training Regirstration";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section JavascriptInHead
{
    
    
    
}

  • Training Registration

Step 9: Create template
Create training.html and trainer.html in templates folder as follows

Trainer.html

 
   

Instructors

Trainer Name Email Venue
{{trainer.name}} {{trainer.email}} {{trainer.venue}}

Training.html

Training Details

Training Code Training Title Trainer Name
{{training.trainingCode}} {{training.title}} {{training.trainer}}

Step 10: Modify RouteConfig.cs
Modify the RouteConfig.cs as follows for routing Registration controller default and catching all other parameter.

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
            name: "Mini SPA",
            url: "Registration/{*catchall}",
            defaults: new { controller = "Registration", action = "Index", id = UrlParameter.Optional }
            );


            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Registration", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

This structure is not best. So it is not recommended for large application. For large application use service. Hope, I will publish a complete SPA soon. Thanks for your patient!

Please share, if it is helpfulShare on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someonePrint this page

2 thoughts on “A mini SPA with ASP.NET MVC and AngularJS

  1. Rashid says:

    Kudos Mahedee, great article to get a quick hand experience on MVC with angularjs. But it is incomplete I think. So when r u going to publish the second half of the article? I want to see it working.

    Thanks and congratulations for such a nice write up. Keep it going.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>