Basic ASP.NET MVC Web Application Implementation

What is MVC?

  • Model View Controller (MVC) is a framework, a Programming architecture where you designed your code in 3 different modules. Model, it is where all your logical properties or data are declared. View, it is where you designed or creates your Client user interface and lastly Controller, it is where you process data and connect model to view.

MVC Diagram:

To illustrate how MVC work in ASP.NET lets create a sample project.

To be guided with the sample Project. Below are the names I used for the function.

Note:  I’m using visual studio 2013 for this tutorial

  • MVCBasicModel.cs => Name of the Model Class(Located under Models Folder)
  • HomeController.cs => Default controller generated by Visual studio after Creation of new     MVC Application Project(Located under Controller folder)
  • Index.cshtml => Default view for HomeController(Located under Views/Home Folder)

Goal: 

  • Generate data from database
  • Save in a list with model binding
  • Pass to view and display in a table

Output Preview:

To begin let’s create a new Project in Visual studio. You can also refer to my blog how to start with ASP.NET MVC Web application for detailed instructions on how to start a project.

  1. First open your Visual Studio. Navigate to File/New and then Choose Project right on top of your Visual Studio IDE.
  • IDE => Integrated Development environment
  1. New Project options will popup. Select Visual C# from the left side panel and Search for ASP.NET Web Application from the right side panel, then Click OK.
  2. After that select a template, which is MVC then click ok to proceed
  3. Congratulation!! You have successfully created your MVC project.

Now let’s create a Database and table. There are two ways in creating a database; you can use a SQL management studio or via Visual Studio. Here I’m going to use Visual Studio.

Note:  You need to have SQL Server installed on your machine to proceed with these steps

  1. To open SQL Server Explorer in Visual Studio Navigate to View from the menu bar and then click on SQL Server Object Explorer. SQL Server Object Explorer will show on left side of your visual studio IDE.
  2. Navigate to your local SQL Server. Right click on the Database folder and then click Add New Database. You can name it whatever you like, for me I name it as sad_db.
  3. After that navigate to your local SQL server again and under that you can see you’re newly created Database. Open your newly created database and go to Table Right Click on it to see add new Table option.
  4. Then add columns to your table.
  • Id => int
  • Employee_Name => varchar(100)
  • EmpCode => varchar(100)
  • Position => varchar(100)
  • Location => varchar(100)
  1. To manually insert sample data. Right click on your table again and choose view data.
  • Id => 1
  • Employee_Name => John
  • EmpCode => j-123
  • Position => Cashier
  • Location => Place

And now let’s proceed with the coding part. Let’s add our model class. From your solution explorer located on the right side panel of your Visual Studio IDE, navigate to the Model folder, then right click on it and select add option, then select the class. Name it as MVCBasicModel. This model will be used to bind with a list in our controller.

Declare these properties from your MVCBasicModel class:

In our HomeController.cs (Located under Controller folder from the solution explorer) create a separate function/method that will fetch data from our database and return data as a list. Name it as GetData ();

Note: To view Database Connection String navigate to SQL Server Object Explorer, right click on your database and then click properties. Under properties go down to Connection string then copy and replace SQL Connection string from the code below.

Passing data to the View

In your HomeController Index call our function GetData() to get the data we fetch from our database and return it  into our view, which is index.cshtml located under view/Home Folder

Index.cshtml

  • @model IEnumerable<MVCBasic.Models.MVCBasicModel> => to gain access the list we pass from our HomeController
  • Use foreach loop to manually fill our data to our table

and we’re done.. Thank you for reading. Happy coding!!

 

Code Summary:

MVCBasicModel.cs

 HomeController.cs

Index.cshtml


Related Post:

 

How to create custom 404 error handler in ASP.NET MVC

Custom 404 error handler - 404 Error refer to a not found resource/URL . Here’s how a default 404 Error ...
Read More

AngularJS CRUD Operation using ASP.NET MVC

I am a .NET Developer and I’m new in AngularJS. I started using AngularJS in about a week ago and ...
Read More
SignalR Chat App With ASP.NET

SignalR Chat Application with ASP.NET MVC

SignalR Chat App With ASP.NET - This article will show you an actual application using SignalR in ASP.NET MVC. The ...
Read More
AgularJS

Submit Forms using AgularJS with ASP.NET MVC

Ways on how to submit forms using AngularJS: I’m new to AngularJS and I was trying to create a CRUD application ...
Read More
Self Signed Certificate

How: Creating Self Signed Certificate

As defined in sslshopper.com. A self-signed certificate is a certificate that is signed by the person creating it rather than a trusted ...
Read More
AngularJS

AngularJS with Asp.Net MVC

What is Angular? AngularJS is a JavaScript framework that extends HTML attribute to help develop a dynamic Web application. AngularJS ...
Read More

Importing Excel with ASP.NET MVC

Importing excel, In my previous article, I demonstrated how to perform simple way of downloading data into excels. Now, this ...
Read More

Export Data to Excel with ASP.NET MVC

In creating a system there are times that we need to export data to excel, it could either be for ...
Read More

Easy Steps to Implement Partial View in Asp.Net MVC

One of the best ways to implement a dynamic table without loading the whole page is by using Jquery Ajax ...
Read More

Creating ASP.NET Web Service

ASP.NET Web Service - Web service is a software that is used to exchange XML-based information that uses the internet ...
Read More

Leave a Reply

Your email address will not be published. Required fields are marked *