In this tutorial, I will develop a simple application that will perform complete AngularJs CRUD operations using ASP.NET MVC 5. Actually, CRUD (Create, Read, Update, Delete ) operations are the basics of any application. So, AngularJs provides us great atmosphere to develop these CRUD operations. It’s very easy to implement. After this tutorial, you will understand how easy to implement CRUD (Create, Read, Update, Delete ) operations in AngularJs with ASP.NET MVC 5.

In previous tutorials, I have covered the setup of AngularJs with ASP.NET MVC 5, Fetch record from Database, Create a form with validations and the introduction of AngularJS. But now it’s time to go ahead one step.

So, I will explain this AngularJs Crud Operations application in step by step. After creating a project, I will make a Database with one table Named as Employee, then I will add Entity Data Model, then make setup of AngularJs with ASP.NET MVC 5, then add a controller in our project named as Employee, then add a new js file named as Emp.js, add some validations to model class, and then add Create, Edit, Details and Index views to our application. And finally, will run our project. Then you will see the following output in your browser.

Previous Tutorials.

Complete AngularJs CRUD Operations using ASP.NET MVC 5

Let’s start to develop a very simple AngularJs CRUD Operations application using ASP.NET MVC 5. Follow the following steps.

Step # 1 – Create a New Project.

First of all Go to File => New => Project. This will show a new Project popup.

Then select ASP.NET Web application(from middle pane) => Enter the name of Application (E.g. AngularJsCrudOperations) => click Ok button. This will show a new ASP.NET Project popup.

Select MVC option => Check the checkbox under the “Add folder and core references for:” => then click Ok button.

Step # 2 – Add New Database.

Go to solution explorer => right click on the App_Data folder => Add => New Item => Chose “SQL Server Database” (under the Data option) => enter the database name (E.g. Company) in the name field => click Add button.

Step # 3 – Add Database.

Now after creating Database, add a table into your database.

Go to Database (from left pane) => right click on the ‘Table’ option => Add new table => Add columns => Enter the table name => Update => Ok.

I have used this below table in this tutorial.

Step # 4 – Add an Entity model.

Now in this step add an entity model into your project.

Go to solution explorer => right click on the project name => Add => new item => Select ADO.NET Entity Data Model (under data option) => Enter name => click Add button. It will show a new popup window named as Entity Data Model Wizard => Choose “Generate from database” => Next => and then choose your database connection under the “Which data connection should your application use to connect to the database” => Next => check the table checkbox (under the table checkbox also) => Finish.

Step # 5 – Add AngularJs library.

So now add AngularJs library into your project from NuGet package manager.

Go to solution explorer => right click on project name => Chose Mange NuGet Packages (It will show a new tab) => Enter AngularJs in the search box => then select AngularJs option => Click on install. It will add all the libraries into your project scripts folder.

After after completed installation of AngularJs. Now again enter “AngularJS.Route” in the search box => select angularjs.route => click on install button.

Note: – You can also install libraries from package manager console.

Step # 6 – Add Angular bundle to the project.

Now Go to solution explorer from right pane => click on App_Start folder => Double click on BundleConfig.cs file => Add the below code to this BundleConfig.cs file.

Step # 7 – Add a new js file.

Now in this step add a new js file to your project.

Go to solution explorer => then right click on the scripts folder => select Add => New Folder (named as “Angular”).

Then right click on the AngularData Folder (Under scripts folder) => Add => New Item => choose JavaScript file (under the Web option) => enter the name (E.g. Emp.js) => and click Add button.

Right the following code in “Emp.js” file.

Module, Controller, $scope, $http, Factory, ngRoute, $watch, $q, and $q.defer are already discussed in pervious tutorials.

Step # 8 – Add server side validations to Model class

Now in this step, we will add validation to our model class.

Go to solution explorer => then open dropdown EmployeeModel.tt under EmployeeModel.edmx dropdown list => open Employee.cs class. You will see model properties in model class.

Add the following validations to your model class.

Note: – don’t forget to add System.ComponenetModel.DataAnnotations library in the model class.

Step # 9 – Modify _Layout.cshtml file.

In this step modify _Layout.cshtml file. Add ng-app=”MyApp” in <body> tag, and also add an angular bundle and add a path of Emp.js file. So, write the following code.

Step # 10 – Create Controller.

In this step add a new controller in your project under the Controller folder.

Go to solution explorer => right click on the Controller folder => Add => Controller. It will show a new “Add Scaffold” popup.

Select MVC 5 Controller – Empty => then click Add button

Enter the name of controller (E.g. EmployeeController) => click Ok. Then it will add a new file “EmployeeController.cs” under the Controllers folder with Index() action method.

Step # 11 – Add some action methods into Employee Controller Class.

Now in this step add some action methods that will perform the functionality of adding, deleting, updating, and getting the record from the database using AngularJs. So, Write the following code into EmployeeController.cs file.

Step # 12 – Add some views into our application.

In this step, I will add some view pages into our application.

Add Index View.

First of all, add the index view page into our application. This view will show all the Employees record in a table form with some actions such as Edit, Delete, and Details button.

Go to EmployeeController class => right click on the Index action method => Add View… => Enter the view name in the name field same as the action method name => enter this path (~/Views/Shared/_Layout.cshtml) in the “use a Layout Page” field => then click add button.

Note: – Don’t forget to add the shared page path in all the views.

Add the following code to this file.

Add Details View.

Now add the Details view Page. This view will show all the details of a single Employee.

Go to EmployeeController class => right click on the Detail action method => Add view … => Enter the view name in the name field same as the action method name => then enter this path (~/Views/Shared/_Layout.cshtml) in the “use a Layout Page” field => then click add button.

Add the following code to Details view page.

Add Edit View.

Go to EmployeeController class => right click on the Edit action method => Add view … => Enter the view name in the name field same as the action method name => then enter this path (~/Views/Shared/_Layout.cshtml) in the “use a Layout Page” field => then click add button.

Add the following code into the Edit View Page.

Add Create View.

Go to EmployeeController class => right click on the Create(that have without parameters) action method => Add view … => Enter the view name in the name field same as the action method name => then enter this path (~/Views/Shared/_Layout.cshtml) in the “use a Layout Page” field => then click add button.

Add the following code in to the Create View Page.

Step # 13 – Run your application.

Now run your application with this URL (localhost:50884/Employee/Index). Then you will see the following output.

Get any Angular and .net course with just $10

Share this: Facebook

LinkedIn

Reddit

Google

Pinterest

Twitter

Tumblr

Email

More

Telegram

WhatsApp



Skype

Pocket



Print



Like this: Like Loading...