AngularJS with ASP.Net MVC (Part 2)

A step by step tutorial on how to use AngularJS with ASP.Net MVC

Precap

I have started this as a multi-post tutorial, where in the previous part we have created a minimal project in Visual Studio 2015 using Web Applications Empty template with MVC folders and references. You can read that post here in case you have not gone through that already.

Making the First Impression

In the project till now we have a application which can build and run but there is no content to be shown to the user. If you run the application at this stage, you will end up seeing an error page. It is now time for us to make this application truly running and showing something.

Add a View and Controller

As a MVC application we should now add a View and Controller to the application as a Default Controller and View. To do that, right click on the controllers folder and select Add -> Controller …, where you will be presented with a window similar to one shown below in the image.

P1686_001

We are going to select MVC 5 Controller – Empty from the list and Click Add, which will ask us to name the controller class. I am going to name it HomeController.cs. Here is the default code from the the empty controller template. This file should be present in Controllers folder of the project.

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

namespace AngularJSwithMVC.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}

Now right click on the only method named Index() and select Add View from the Options Menu. The window which opens on this action is similar to the one as show in the image below. Please select all the options as it is showing in the image and Click Add.

P1686_002

At this point a few new files and references are added to your project, you can see that in the image below (don’t worry we are going to remove many of them soon). The only important files for for us where we have to focus are Views -> Home -> Index.cshtml and Views -> Shared -> _Layout.cshtml

P1686_003

Say Hello to World …

You have to open the Index.cshtml and Enter any text you wish, for me, it’s the 2 worlds of love every programmer knows “Hello World!”. Once you are done you can hit your favorite function key (F5) to run the project and see the output. Yups … you have your first page displayed in the default browser (Sorry! Google Chrome) something like this and your message surrounded by the clutter of default template something like this.

P1686_004

Before you start thinking …

What the hack! … why all this efforts and it took 2 posts for you to reach to this point. Man! you might have selected a MVC template in place of Empty one to begin with, but wait, before you get that idea, answer the simple question … Where is the fun in that?

Another point here, as I have told you in my previous post, we want a minimal project and now I am telling you that we are going to even remove the files and references which are required but will be acquired differently. Be patient and follow the lead … In the upcoming posts you will almost acquire the taste of this.

In this video we are building the complete MVC application
description: Series: AngularJs with ASP.Net MVC In this video we will be creating a minimal ASP.Net MVC application so that we can use it for adding the angular dependencies later during the session. references are taken from blog post series: https://www.mindzgrouptech.net/22d0
duration: 00:10:40
views: 728
by: MindzGroupTech
source: YouTube
Get this plugin here.

I am not saying that its all good till here but, remember that, there is a comment box below here, where you can argue whatever your ideas are.

Your feedback is much appreciated and will try to correct and improvise as much as possible. I will post the links for the next post in this series here as soon as they become available.

Series Links

Part 1 Part 3 Part 4 Part 5 Part 6 Part 7 Part 8 Part 9 Part 10 Part 11

AngularJS with ASP.Net MVC (Part 1)

A step by step tutorial on how to use AngularJS with ASP.Net MVC

Introduction

There are numerous articles and tutorials about this on the web and even on YouTube, none of them were complete and as satisfying as I wanted them to be. Using AngularJS with ASP.net MVC is a well talked topic and I have drafted a series of posts which will show you how I have done it myself in many of the projects during my learning of Angular and implementing in the small to large scale web applications.

Getting Started

I am going to use Visual Studio 2015 with a few Extensions for this series. Here is the link for you to download these extensions:

  1. Web Essentials
  2. Productivity Power Tools

Along with that you will require to have node.js and bower package manager installed for getting the required JavaScript libraries. For the starting point here we are going to use a minimal project template, so that I can add the required libraries and components as and when required. This makes the learning easy and the project as lean as possible. The primary language for the project is going to be C#, but you can use VB.Net if you are comfortable with that. I assume that you have a prior knowledge of ASP.Net MVC and JavaScript and also aware of AngularJS in some extent, because I will not be touching all the concepts of these technologies here in this series. Once you have all the required components installed, you are ready to continue on this tutorial.

Create a Web Application Project in Visual Studio

Open Visual Studio and select File -> New Project, where you can Select Visual C# -> Web from the left panel and then select Framework as .Net Framework 4.5.x (in my case I am going with 4.5.2). You have to select ASP.Net Web Application (.Net Framework) template for the project and then Name the project with a project location as shown in the image below. Click OK once you are done with it.

P1531_001

At this point you will be presented with another window, where you have to select project type template. As we are going to build this application from scratch up, we will be selecting Empty from the templates and MVC checkbox for the folders and references as shown in the image below. Click OK once you are done with this.

P1531_002

Visual Studio will create a project and open the same for you. Your Solution Explorer will be showing you a project structure as shown in the image below.

P1531_006

At this point you can build the project (Ctrl + Shift + B) but you are not able to run this project. If you run the project (F5) you will be presented with the page as show below.

P1531_003

In next step you have to update the packages and libraries which were installed by default with this template as there might be new versions available for that. To do that you have to open the NuGet Package Manager by right clicking the solution in the Solution Explorer and selecting Manage NuGet Packages for Solution option (as show in the image below).

P1531_004.png

This will open a new NuGet Package Manager window, where you can find the updates for the installed libraries. In my case I have 2 updates available and I am going to update them by selecting all and clicking the update button at the top of the list (as shown in the image below).

P1531_005

If you have completed the above steps, you have reached to a point where you can start on the next part of this tutorial, where you will be able to add a start page showing a simple message to user by adding a controller and view to the project.

You can watch this video for development environment setup
description: Series: AngularJS with ASP.Net MVC In this video we are going to talk about the prerequisites for the remain of the session Link to blog post: https://www.mindzgrouptech.net/22d0
duration: 00:05:45
views: 1038
by: MindzGroupTech
source: YouTube
Get this plugin here.

In case you have any questions till now you can leave the comments and I will try to answer them as quickly as possible. I will add the links to the next parts of this tutorial below here as soon as they become available. Your feedback will be really appreciated and will be helping me in writing more and accurate tutorials like this. Hope you will enjoy reading this series as much as I did writing it.

Series Links

Part 2 Part 3 Part 4 Part 5 Part 6 Part 7 Part 8 Part 9 Part 10 Part 11