SHASHANGKA SHEKHAR'S BLOG

Hi, I am Shashangka Shekhar, Working with Microsoft Technologies. This is my personal blog where I share some of my experiences.

ASP.NET MVC-5 with AngularJS Part – 2

In this topic we will overview on AngularJS, after getting an overview we will create a ASP.Net MVC application with implementing AngularJS(v1.4.8).

If you miss the previous article in this series please go and have an overview before get into this part.

ASP.NET MVC-5 with AngularJS Part – 1

Introduction

In our previous article we have an overview on AngularJS. Now we know what AngularJS capable for, what is it, how to start with? Now it’s time to make a sample application which can perform CRUD operations using database.

Ok let’s get started.

AngularJS with Visual Studio:

Let’s open Visual Studio 2015(IDE) click : [File > New > Project] the new window will appear like below image

Fig: 1.0

ang-1

Click on ASP.Net Web Application,rename the application and hit “ok” button at bottom right. Choose empty template in next window and click on “ok” button. It will take a while to load a sample empty project.

Now the first thing we need to do is register AngularJS.Core in this application. We need to getting reference from NuGet.

To do that right click on project name and click on “Manage NuGet Packages” like below image

Fig: 1.1

ang-2

and in next window browse searching “Angular” and install the updated version of AngularJS.Core like below image

Fig: 1.2

ang-3

Or click on [ Tools > NuGet Package Manager > Package Manager Console ] and write

also we need to add jQuery library in our project like below.

Fig: 1.3

ang-4

Our Installation process is done. Now test it with our previous AngularJS code in comparing with jQuery section.

Data Layer:

Interfaces:

Code Explanation:

If you are new to this design pattern overview here for more.

Middle Layer:

Our Data Layer and Service layer is ready. For creating database, please download the database script and execute it using MS SQL Server.

Lets create a MVC HomeController and generate empty view.

Fig: 1.4

ang-p2-1.

MVC HomeController:

Let’s just put this code in your home controller i’ll explain it later.

Code Explanation:

Let’s get explained the code part by part.

Get All Records: Below code sample is to get all records from database by using our middle layer/service layer. We are returning JSON data here. The format of JSON data is easy to read, follow attribute-value pairs.

Initially we are getting ten(10) records, this is plan for paging in view page.

While we are returning the list data we have set “JsonRequestBehavior.AllowGet”. if we miss that, this error message will appear:

Why use it? If you read that message carefully the answer is there.This is for security reason.

Get Single Record Details: Below code sample will retrieve a single selected record details from database, which also returning JSON data format.

Insert Records: Below code sample will Insert/Save record details to database, which is returning a JSON result of boolean data type.

If it’s true then it indicate that data inserted to database successfully.

Update Records: Below code sample will update existing record details to database that is selected to update, which is also returning a JSON result of boolean data type.

If it’s true then it indicate that data updated to database successfully.

Delete Records: Below code sample will delete existing record details to database that is selected to delete, which is also returning a JSON result of boolean data type.

If it’s true then it indicate that data deleted from database successfully.

We are done with our MVC Controller to perform CRUD operations on database. Now let’s move on to next part, the AngularJS part.

AngularJS(JavaScript) Controller:

Code Explanation:

$http is core AngularJS service that can communicate with the remote HTTP servers. HTTP methods that participate used to communicate:

  • $http.get: get data
  • $http.post: post new data
  • $http.put: update existing data
  • $http.delete: delete existing data

Know more about $http service here

Get All Record: Using $http.get method we are retrieving all records from database.

Get Single Record: Here we are retriving existing customer records from database.The $scope.getCustomer methos is getting called while edit button is getting hit/click.

Using $http.get method we are retrieving selected customer record from database by passing the Customer ID to MVC Controller update method.

In return we are getting the query data and AngularJS $scope.custModel is binding the data to input model using ng-model, we know AngularJS support Two-way Data Binding.

Know more about Two-way Data Binding here

Save Record: Here we are saving customer records.The $scope.saveCustomer methos is getting called from UI when we submitting the form with customer information by clicking the submit button.

Using $http.post we are passing the customer object to our MVC controller.

The controller is doing the rest with a retun status of saved? or Not. After successful insertion we have reload(calling getallData() method again) the data table.

Edit Record: Here we are Updating existing customer records to database.The $scope.updateCustomer methos is getting called while update button is getting hit/click.

Like save record, same thing also happening here. The main different in saving and updating is the Cutomer ID. This time we are passing Customer ID with customer object which is getting from a hidden input field.

Using $http.post we are passing the customer object to our MVC controller.

The controller is doing the rest with a retun status of updated? or Not. After successful updating we have reload(calling getallData() method again) the data table.

Delete Record: Here we are Deleting existing customer records from database.The $scope.deleteCustomer methos is getting called while delete button is getting hit/click.

Let’s get into UI/View section. Here’s the Index view where we perform CRUD operations graphically.

Html View:

Code Explanation:

Below code sample is a table with repeating table row(<tr>). Here ng-repeat is diplaying single record(custModel ) with it’s template once per record from ListCustomer, or simply working as a repeater of table row.

Know more about ng-repeat here

We are almost done. Let’s style our UI with CSS, below is css that we used to style the UI.

Form Style:

Hide Directive Flash(ng-cloak):

While loading our page you may noticed that Angular html template are visible/flash. It is happen while the browser in its compilation process of Angular html template, usually it flash while the page is loading. Which can hide using “ng-cloak/data-ng-cloak” directive.

Know more about ng-cloak here

We also need to add css class in our application start point.

below is the css class of using ng-cloak.

Let’s put a breakpoint on Updater() method in HomeController and run it, after submitting the form it’ll hits the breakpoint.

Fig: 1.5

ang-p2-2

In debug mode we can see the model is populated with form data. We can also debug using browser by putting debugger in our script.

 

Fig: 1.6

ang-p2-3

In debug mode in our browser we can see the $scope.custModel is populated with form data,which is going to update the selected record in database.

Finally Output:

ang-p2-op

[Browser: Inspect > Console]

ang-p2-opc

[Browser: Inspect > Network]

ang-p2-opn

Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂

One Comment

Post a comment