Learn MVC Using Angular Wizard


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.


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!

Related Posts

  • 64
    Introduction In this article, we will learn MVC using Angular data binding for dynamic control in DataTables from a server side Web API using Visual…
    Tags: set, database, test, alter, td, /td, create, angularjs
  • 55
    In this blog, I will demonstrate input textbox, set comma separator, using AngularJS and most useful for quantity and countable input text. HTML code I…
    Tags: angularjs, div, /div, create, set
  • 53
    Introduction In this article, we will learn how to use MVC, using Angular's data binding functionality to create a datatable from the server side with…
    Tags: set, database, test, alter, create, td, /td, angularjs
  • 47
    In this blog, I will demonstrate how to allow only numeric values in input textbox, using AngularJS. This technique is most useful for quantity and…
    Tags: angularjs, div, /div, create
  • 39
    Introduction This article demonstrates how to learn MVC using Angular Summernote in Visual Studio 2017. Following are the steps you can use to create an…
    Tags: angularjs
Show Buttons
Hide Buttons