Learn MVC Using Angular Wizard21 min read

Introduction

In this article, we will learn MVC using Angular Wizard and Datatable from the server side, and work with the stored procedure using Visual Studio 2015.

Why Use Wizard?

Wizard means the process is moved step-by-step. It allows you to logically divide the groups of data. That way, the user can enter valuable data.

In this article, we are going to:

  • Create a database.
  • Create a stored procedure.
  • Create an MVC Application.
  • Do all this using Angular Datatable.

Create a Database

Open SQL Server 2016. Click the “New Query” window and run the query given below.

Create a Table

I will create a new table that is based on the booking information.

After creating the table, add some data, as given below.

Create a Stored Procedure

I have written the stored procedure for my data operations, so run SP as given below. In this procedure, I have used the “Select” and “Insert” operations.

Create an MVC Application

Open Visual Studio 2015.

Go to Menu, click New->New Project ->select Visual C# under templates-> ASP.NET Web Application.

Once you click OK, one more window opens. Select MVC.

HTML Design

Step 1

Here, we are going to get our email input and matching password set up using “ui-validate-watch” and “ui-validate”.

Output 1

Step 1 output given below:

Step 2

Once you click the “Next” button, you have completed Step 1. In Step 2, I have used ng-pattern=”/^[0-9]+$/” and required a keyword used for validation in the HTML form element.

Output 2

If you need go back, click the “Prev” button.

Step 3

After clicking the “Next” button in step 2, it will show as Step 3.

Output 3

If you click the “Finish” button, data should be added into the tables.

Angular Module

Create and design an HTML page with the table. Mention datatable=ng. Now, bind the Server data.

Code Behind

Create a Model folder in the Solution Explorer and create a new class in the Model folder.


 

Write the method given below in the home controller. LoadData displays the data in the Datatable and another table is using data manipulation.

Declare the connection string in Web.config file.

Create an Angular Controller and Service to get the data from the server side.

Angular Controller

Angular Service

Do not forget to refer to the plugin files and JS file also.

Plug In

My Files

Once you are done with the process given above, your datable is ready to load. Thus, run the Application.

Output 5

Here, I have used a simple Angular Wizard method.

Conclusion

In this article, we have learned MVC, using Angular Wizard. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding!

Author Profile

Thiruppathi Rengasamy
I 'm a .Net Developer & Blogger. And also I'm working as senior software engineer in Microsoft Technologies for 5+ Years.I would like to spend my precious time in writing articles, research in .Net technologies and to learn new technologies.