Click here to Skip to main content
15,867,785 members
Articles / Web Development / ASP.NET

Learn ASP.NET MVC Step by Step: Part 1

Rate me:
Please Sign up or sign in to vote.
3.75/5 (4 votes)
27 Feb 2016CPOL7 min read 40.4K   6   3
Learn ASP.NET MVC step by step

Table of Contents

Introduction

This article series is targeted for freshers who want to learn Asp.net MVC step by step. So if you are advanced, then I would suggest to start from this MVC article.

So in this two part article, I will be creating a simple student data entry screen using ASP.NET MVC, ADO.NET and Jquery. I have used the below youtube video for reference purposes. And I would encourage any new ASP.NET MVC learner to first see this video to get a good kick start.

I have broken this tutorial into two parts. In part 1, we will see what we need to start MVC, we will learn the basics of creating controller, models and view and then we would create a simple student data entry screen and see how it works with the HTTP Post and submit.

In the next article, we will learn validations, both client side and server side and also we will look at how to interact with SQL Server using ADO.NET.

Step 1: Download & Install Microsoft Visual Studio 2013 Ultimate

For doing ASP.NET MVC, the first thing we need is Visual Studio. So go ahead and install Visual Studio from the below link:

Image 1

Image 2

Step 2: Creating Project

Visual Studio is an official IDE for doing any kind of Microsoft development work. And to do any Microsoft development, we need to create a project. So click on file – menu and project as shown in the below figure:

Image 3

As said previously, Visual Studio is used to do any kind of development like Windows, mobile, web and so on. So when we say ASP.NET MVC, it is for web application. So select Visual C# -> Web -> ASP.NET Web Application -> Enter File Name -> Press ok as shown in the below figure.

Image 4

Now remember ASP.NET is the main framework on which MVC, WebAPI, Webforms and other web programming technologies work. So once you create the project, you will get lot of options, select MVC from the same as shown below:

Image 5

Also change Authentication to “No Authentication” for now. We will learn more about authentication and authorization later. Let's first get our simple hello world project running and keep complicated things for later.

Image 6

Once you click ok, you should see the MVC project created with all necessary files as shown below. Do not get too confused about the folder and file structure. For now, concentrate on only three folders, “Controller”, “View” and “Model”.

Image 7

Step 3: Add a New Controller

In MVC architecture, the first hits comes to controller, which in turn loads the model data and this model data is then sent to the view. So the first step is to create the controller. If you see the solution, there is a controller folder. So, let us add a new controller by clicking on the Controllers folder -> Add -> Controller.

Image 8

The next thing you will see is lot of readymade controller templates. But because we are learning, let’s not use any readymade templates. Let’s start from scratch and select MVC 5 controller empty.

Image 9

Now when we add a controller, do not delete the word controller from the file name. For example, if you want to create a “Home” controller, then the full name of the file is “HomeController”. The word “Controller” should be present.

Image 10

4.3: Enter the Name Of Controller as Home.

Image 11

Step 4: Add a View

So now that we have added controller, let's add view. To add view, go to views folder and add view as shown below.

Image 12

Give a proper view name and uncheck the “user layout page” box.

Image 13

Finally, you should see controller and views added in the respective folder as shown below:

Image 14

Step 5: Putting Code in the Controller and View

So let’s start putting some code in Hompage.cshtml (HomePage View). In the HomePage.cshtml, we have put a simple hello world text.

Image 15

In the controller, let’s add a simple “ActionResult” method called as “GotoHome” and in that, we are returning the view.

C#
namespaceHelloWorld.Controllers
{
publicclassHomeController : Controller
    {
//
// GET: /Home/
publicActionResult Index()
        {
return View();
        }
publicActionResultGotoHome()
        {
return View("HomePage");
        }sp;      }
	}
}

Step 6: Run the Project

So once you are done with the previous steps, just press control + F5 and run the project. It’s possible you get an error as shown below. Do not get discouraged. This error comes because you have not specified the controller and action name.

Image 16

On the browser URL, type your controller name (without the word controller) followed by action name as shown below. In our case, we have “Home” controller and action name is “GotoHome” and you should be able to see the output.

Image 17

Image 18

Step 7: Creating the Student Model

Till now, we have not added any model. So let us go ahead and create a simple model by the name students. A model is nothing but a class. So right click on models folder and add a class as shown in the below figure:

Image 19

Image 20

In the model, we have created four properties for the class as shown below:

C#
using System;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;

namespaceHelloWorld.Models
{
publicclassStudent
    {
publicstringStudentRollNo{ get; set; } //Student Roll No.
publicstringStudentName{ get; set; } //Student Name.
publicstringStudentStd{ get; set; } //Student Standard.
publicstringStudentDIV { get; set; }//Student Division.

    }
}

Once you write the code, rebuild the solution. I repeat again - do not miss this step - REBUILD THE SOLUTION.

Step 8: Adding the Students Controller

Let’s add a students controller from where we invoke the data entry screen for the students.

Image 21

In the controller, do not forget to import model namespace.

Image 22

Let's add an action “Enter” which will invoke the data entry screen.

Image 23

Step 9: Creating the Students Screen

So we have completed the model and the controller, let us add a view for the same. So right click on the “Enter” Action and click add view as shown in the below figure:

Image 24

Let's give the view name as “EnterStudent” and uncheck the layout page box. Layout pages are like master pages in ASP.NET webforms.

Image 25

In view, let’s put the below code which has four textboxes for the student data and one submit button.

Image 26

So now, the user will enter data and click on Submit button , we need some kind of logic in the controller for handling the submit click.

Step 10: Writing Logic for Submit Click

To handle the submit click, we need to create submit action in the student controller.

Image 27

When this submit action is called, the data sent from the form will be collected and displayed in a view. Let us add a new view with name “Student” to this submit action.

Image 28

Image 29

We will connect this view with the model namespace where we have the customer controller.

Image 30

Below is the view of the student.

Image 31

When the user clicks on submit, we need to send data to the submit action. So on the form, give the action name as “Submit” and method as “Post”. And also ensure that all textboxes are provided with a name as shown in the below code. For now, keep the name of the textbox and the class property name the same.

Image 32

In the submit action, we will use the request object to fetch data and load the student object and this student object is sent to “Student” view which we have created.

C#
publicActionResult Submit()
        {
Studentobj = newStudent();
obj.StudentRollNo=Request.Form["StudentRollno"];
obj.StudentName = Request.Form["StudentName"];
obj.StudentStd = Request.Form["StudentStd"];
obj.StudentDIV = Request.Form["StudentDiv"];
return View("Student",obj);
        }

In this, the student view we are displaying the values by using the “Model” object as shown below.

Image 33

Step 11: Run the Application

So now that all the hard work is done, take a deep breath and press control + F5 and enter the URL in the format of controller name/action name: http://localhost:22144/student/Enter

Image 34

Enter data into the text boxes and press submit.

Image 35

And you should see this screen.

Image 36

For further reading do watch the below interview preparation videos and step by step video series.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect https://www.questpond.com
India India

Comments and Discussions

 
QuestionASP.NET MVC Pin
Member 1406098920-Nov-18 3:05
Member 1406098920-Nov-18 3:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.