AngularJS with Asp.Net MVC

What is Angular?

AngularJS is a JavaScript framework that extends HTML attribute to help develop a dynamic Web application.

AngularJS with Asp.Net MVC

Definition of Angular JS from its Official Page:

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

To help us understand how this framework works I create a simple asp.net MVC application that uses Angular JS framework to populate HTML table.

Output Preview:

AngularJS with Asp.Net MVC

Let’s Start:
Sample Angular JS project with asp.net MVC

First, create a fresh copy of asp.net MVC Application using Visual Studio. If this is first time creating one visit this blog post  How To Start with ASP.NET MVC Web Application.

AngularJS with Asp.Net MVC

AngularJS with Asp.Net MVC

Second, include AngularJS file inside your view (index.cshtml) to use Angular Framework

  • https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js

AngularJS with Asp.Net MVC

Third, create your HTML table view. If you are using default MVC template of ASP.NET MVC your default controller is HomeController and your default view is located at Home > index.cshtml. Open index file and replace code inside the file using the code below.

Code:

Third,  Create new action result in your controller. This will be used for the sample JSON data use to populate to our HTML table.  Refer to the code below. I used model binding for my sample JSON data.

Model – NameModel
  • Create class inside Model folder this will serve as our model properties for our sample data.

From your HomeController copy and paste code below.

Sample JSON

Fourth, From your view(Index.cshtml) create a script to call this action result (sample_JSON).

Code:

For a successful request your call response will look like this:

To get the value of the actual data we pass, you can call it using response.data  and stringtify( ex. JSON.stringtify(response.data  ))  to convert into string and output “[{\”Name\”:\”Regie\”,\”LastName\”:\”Baquero\”}]”.

And we’re done. Thank you for reading! Happy Coding!!

You can review your code using the Full Code summary below.

Model:

Home Controller

Index.cshmtl

 

Leave a Reply

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