How to Create a Registration Form with validations using AngularJs and ASP.NET MVC 5

In this tutorial, I will show you how to create a form with validation using AngularJs and ASP.NET MVC 5. In the previous tutorial, I have shown how to fetch record from the database using AngularJs in ASP.NET MVC 5 Application. But now in this tutorial, we are going to next step in our series. First, I will make a database with one table, then add Entity Data Model in the project. Second, then I will add AngularJs library and add another js file with some coding in our project. Third, I will add a controller with two action methods. And finally, I will add a view to a specific action method.

Previous tutorials

• Introduction to AngularJs
• How to setup AngularJs in ASP.NET MVC 5
• How to fetch record from database using AngularJs

How to Create a form with validations using AngularJs?

Let’s see how to create a form with validations using AngularJs in step by step.

Step # 1 – Create a Project.

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. FormValidtionsDemo) =>   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 AngularJs library.

So, 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 searchbox => then select AngularJs option => Click on install. It will add all the libraries into your project scripts folder.

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

Step # 3 – 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 # 4 – Add Database.

So, Now in this step add a database to your project.

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. University) in the name field => click Add button.

Now in this step add a table to your project database.

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

I have used this below table in this tutorial.

Now add some record to the table. Right click on the table => show table data => enter record.

Step # 6 – Add an Entity model.

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

Go to solution explorer => right click on the project name => Add => new item => Select ADO.NET Entity Data Model from 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 # 7 – Add a new js file.

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

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

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. UniStudent.js) => and click Add button.

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

I have already discussed a little bit about Module, Controller, $scope, $http, Factory in previous tutorials.

ngroute: ngroute is an AngularJs module that helps you to make your application a Single Page Application. If you want to navigate to different pages in your application, you can do it easily without page reloading.

$watch: $watch is nothing but keeping track of (or watching) scope variables and the changes of their values. Simply it moniter your scope variables and their values. E.g. here we are watching our form variables and their values.

$q: $q is the service of AngularJs. It helps us to run asynchronous functions and use that functions return values when they are done processing.

$q.deffer(): $q.deffer() is used for signaling the successful completion or unsuccessful completion of a task. Simply it shows the status of task.

Step # 8 – Add server side validation to Model class

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

Go to solution explorer => open dropdown UniversityModel.tt under UniversityModel.edmx dropdown list => open student.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 model class.

Step # 9 – Modify _Layout.cshtml file.

In this step modify _Layout.cshtml file. Add ng-app=”MyApp” in <body> tag, add angular bundle and add a path of FetchData.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. StudentDataController) => click Ok. It will add a new file “StudentDataController.cs” under the controller folder with Index() action method.

Step # 11 – Add AddStudentData() action method.

Now in this step add a new action method named as AddStudentData() to get data from database using AngularJs. Write the following code into StudentDataController.cs file.

Step # 12 – Add view to Index Action Method.

Now in this step add a view to Index action method.

Now right click on the Index action method => Add View … => Enter View name in the name field (Same as Action Method) => Click Add button.

Note: – Add this path (~/Views/Shared/_Layout.cshtml) in the “use a layout page” field.

Add the following code to this file.

Step # 13 – Run your application.

Run your application with this URL (http://localhost:50120/StudentData/Index). You will get your required output.

Summary:

Congratulation you have successfully Created a registration form with validation using AngularJs and ASP.NET MVC 5. I hope this will be useful for. Please like and share if you like.

[download id=”1068″]