Database Driven Web App Tutorial with ASP.NET MVC using Model First Approach

Data Driven Web Application

Generally, Website generally consist of either static or dynamic website

Static (Non-dynamic) web pages

Typical static web pages do not change every time the page is loaded by the browser, nor do they change if a user clicks on a button. The only change that you will see in static web pages is to see them load and unload, like what happens when you click on a hyperlink.

Static web pages always look the same and the content never changes unless you load a new page or you change the page yourself and upload the new version of the page to the web server.

Dynamic Web Pages

Dynamic pages do the opposite, they can change every time they are loaded (without you having to make those changes) and they can change their content based on what users do, like clicking on some text or an image.

Database Driven Web Pages

One of the most common types of dynamic web pages is the database driven type. This means that you have a web page that grabs information from a database (the web page is connected to the database by programming,) and inserts that information into the web page each time it is loaded.

If the information stored in the database changes, the web page connected to the database will also change accordingly (and automatically,) without human intervention.

This is commonly seen on online banking sites where you can log in (by entering your user name and password) and check out your bank account balance. Your bank account information is stored in a database and has been connected to the web page with programming thus enabling you to see your banking information.

Imagine if the web page holding your banking information had to be built traditionally (that is by hand,) every time your bank balance changed.

In this article is going to be focusing on database driven web pages using a technology called Asp.net MVC (.net Framework)

We will be using model first approach to build our application

What is Model First approach?

In asp.net mvc Model First approach in entity framework is used to create Entities, relationships, and inheritance hierarchies directly on the design surface of EDMX and then it will generate database from it.

Let go there!

Recommended Prerequisites

• Visual Studio 2017 or higher
• ASP.NET MVC
• SQL Server

We will build Guest Information Management System in this tutorial.

The system will have a model like Guest which has the properties of a guest such as;

Name, Address, Date Visited, time of visit, whom to see, purpose of the visit, time departed and sex or gender of the visitor.

A model is a class with its respective properties eg Car with color, make, year properties.

The Guest model as created in visual studio is shown below

public class Guest

    {

        [Key]

        public Guid Guest_Id { get; set; }

        public string GuestName { get; set; }

        public DateTime ArrivalDate { get; set; }

        public DateTime ArrivalTime { get; set; }

        public string GuestAddress { get; set; }

        public string PhoneNumber { get; set; }

        public string PurposeOfVisit { get; set; }

        public string WhomToSee { get; set; }

        public DateTime DepartureTime { get; set; }

        public string Signature { get; set; }

        public string Sex { get; set; }

    }

Let’s get our hands dirty

Start Visual Studio and create a new project name it GuestInfoSystem

Click on Create a new project and select Asp.net Web Application (.Net Framework) as shown below

Click on next button to Enter the Project Name, Location, solution name and Framework type as shown below

Click on Create to select the project type either empty, Web Form, MVC, Web Api and single Page Application, in our case, we are selecting  MVC as shown below

Click on change label, to change authentication from no authentication to Individual User Accounts as shown below

Click on Create and wait for the application to be created

A New Application Solution Window we be displayed as shown below

The above window shows the structure of Asp.net MVC application, by the right, it’s the solution explorer that show the structure of Projects, number of projects in a solution and some default folders and files to kickstart asp.net mvc web Application

The Image below shows the project structure of MVC Project

From the above image, we can see that there are eight (8) folders created by default which include App_Data for storing application’s data such as Database file and other related files, App_Start for startup files such BundleConfig, FilterConfig, IdentityConfig, RouteConfig and Startup.auth.cs as shown below

The Content Folder contains CSS files such as boostrap css and site.css as shown below, we used this folder for css related files to style our application

The Controller Folder contains Project controllers, that is, the project business logics where the user of our site will use to communicate with our application.

Some default controllers are AccountController, HomeController, and ManageController.

The Font folder contains application fonts

Models Folder is the folder where we create our application models i.e. the classes we will use in the application. Such as the Guest model described above.

The Scripts Folder this folder contains all the JavaScript related files such as the bootstrap javascripts and the Jquery file

The Views Folder is the folder that contains all the Views of the application that is, the web pages of our projects. The naming convention help us maintain the view for each controller, example, the HomeController has a view folder called Home with views for each controller action methods.

The Shared folder inside the Views folder contains the view that is related to all views in the application such as the _Layout view

The rest of the files in the Solution Explorer such as Global.asax, package.config, Startup.cs and Web.config are for application setup such as database connection, startup program. 

Let’s now create our model which is Guest. A model is just a class.

In this Tutorial we shall use a name Guest to represent our model. This model will have the following properties

Id

Name

Address

Date of Visit

Time of Visit

Purpose of Visit

Whom to see

Time left

Phone Number

Sex

Now Right click on the Model Folder and select add new item, select Class and name it Guest

public class Guest

    {

        public int Id { get; set; }

        public string GuestName { get; set; }

        public DateTime ArrivalDate { get; set; }

        public DateTime ArrivalTime { get; set; }

        public string GuestAddress { get; set; }

        public string PhoneNumber { get; set; }

        public string PurposeOfVisit { get; set; }

        public string WhomToSee { get; set; }

        public DateTime DepartureTime { get; set; }

        public string Sex { get; set; }

    }

Add DataAnnotation to the properties to provide proper description and datatype to the properties.

Let us create a database for our application

Launch Sql Server Management Studio if installed, else install Sql server and its management studio

To Create a Database

Right click Databases folder select and click New Database

Enter the Database name as GuestTutorial in Database name textbox and click on Ok as shown above.

A Database with the above named with appear among the list of databases in the Object Explorer

Now that our database is created, let us establish a connection to it from our Application.

Double click on the web.config file in our Project to open it in the code window

Find the connectionstring element in the file to change the connectionstring to point to our database.

Here we are changing both the connectionstring’s attribute values and that of initial catalog as follows;

Connectionstring is the name of the server where our database is hosted, and initial catalog is the name our database, and set the Integrated Security to true if you are using windows authentication to login to the database server.

Now build the application by clicking on the build solution from Build menu in the menu bar

Now let us create a Guest Controller by scaffording

Right on the Controller’s folder in the solution explorer, select Add and click on Controller as shown below.

Click on MVC 5 Controller with views, using Entity framework from the list of options and click on Add

From the dialog box that appears, select the model you want to use from Model class dropdown menu, select the Data Context Class, the controller name will entered automatically, but you can change it if you want, then click on Add

A Controller will be created automatically with some action methods such as Index, Details, Create, Edit and Delete.

The corresponding Views will be created in the views folder with the same name as the controller (Guest).

Right now our application is 90% ready to run

The next to do is to enable migration and update our database so that our database table will be created.

To enable migration for our application, click on Tools from the menu bar, select NuGet Package Manager, select and click on Package Manager Console as shown below

The Package Manager displayed below the code window with console liked background

Then type Enable-Migration and press enter key after PM>

Migration is now enabled for our project

Let us now add an initial migration by typing add-migration init, the init can be anything else.

The initial migration is added, now update the database by PM>update-database

Finally, let us update the _layout file in Views folder under Shared Folder to create a menu for Guest.

Open the _Layout.cshtml

In the nav navbar-nav class of ul element add an li item that point to the Guest controller and Index action method

Now Save and run the application now

Hurray! we have succeeded in creating a web application that can manipulate database