Click here to Skip to main content
12,635,246 members (24,672 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

44.7K views
16 bookmarked
Posted

Building Your First ASP.NET MVC5 Application in 4 Simple Steps

, 24 Feb 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
How to build your first ASP.NET MVC5 application in 4 simple steps

Model-View-Controller is a software pattern for achieving isolation between different application components. It's always desirable for software applications (especially web-based applications) that there must be clear separation between business logic and the user interface. We can achieve this requirement by using MVC (Model View Controller) design that makes our application more flexible to change.

ASP.NET MVC is a framework based on MVC (Model View Controller) design pattern for building web applications. Microsoft has released the latest version of this framework as MVC 5 now, with new features and enhancing existing features as well. For an overview of New Features in ASP.NET MVC5 and a good comparison with earlier versions, please click here.

Let's understand a bit about MVC, i.e., Model, View and Controller here but in order to get an understanding of pre-requisite concepts in more detail, please read through ASP.NET MVC FAQs.

  • Model: A representation of our data structure in a data source, e.g., database
  • View: A user interface for model that is presented to end-user
  • Controller: Translating input from a user to an action on model and preparing appropriate view in response.

For the purpose of implementation, I am going to use Visual Studio Express 2013 for Web. You can easily download it from Microsoft at the following URL:

We will follow the below steps to build a simple ASP.NET MVC5 application:

  1. Creating MVC5 project in VS 2013
  2. Preparing a Model
  3. Add a Controller
  4. Add simple View

1. Creating MVC5 Project in Visual Studio 2013

  • Open Visual Studio Express 2013 for Web and create "New Project" as "File --> New Project.
  • Choose "ASP.NET Web Application" template as shown in the following figure. Name the project as "MyFirstMVC5App", choose location and press "OK" button.

  • In next dialog, choose "MVC" as template and again press "OK" button.

  • A new ASP.NET MVC 5 project will be created as follows. You can easily find the "Controllers", "Models" and "Views" folder in solution explorer.

2. Preparing a Model

  • In order to prepare a model, right click on "Models" folder and choose "Add", then "Class".
  • Name the class as "Employee.cs".

    public class Employee
    {
        public string EmpID { get; set; }
        public string EmpFirstName { get; set; }
        public string EmpLastName { get; set; }
    }
  • As we discussed earlier that "Model" is the representation of data structure in our Data Source, so you can assume this "Employee" class represents an Employee table in our database with columns as "EmpID", "EmpFirstName", "EmpLastName" and so on.

    Note: In order to keep this ASP.NET MVC5 tutorial simple and straight forward, I am not going to perform any CRUD operation. We will use this Employees.cs class in later articles on this blog.

3. Add a Controller

  • To add a controller to our project, right click on "Controllers" folder, choose "Add", then "Controller".
  • From "Add Scaffold" dialog, choose "MVC 5 Controller - Empty" and press "Add" button as follows:

  • Name the controller as "EmployeeController" in next dialog and press "Add". A new controller will be added to "Controllers" folder. Controller code generated will be as follows:
    namespace MyFirstMVC5App.Controllers
    {
        public class EmployeeController : Controller
        {
            // GET: /Employee/
            public ActionResult Index()
            {
                return View();
            }
        }
    }

There are few important things you need to understand here:

  1. EmployeeController inheriting from base Controller class has a method named Index(). This Index() method will be the default method called when accessing this controller as (http://localhost:xxxx/Employee/).
  2. In order to generate HTML response, the above Index() method uses a view template, i.e., represented in code as "return View();"
  3. As we create a controller, a new folder will be created under "Views" named as "Employee".

4. Add a View

  • Finally for adding a view, right click on newly created "Employee" folder under views, choose "Add", then "MVC 5 View Page (Razor)". Specify the name for the view "Index" as follows:

  • A new file with the name "Index.cshtml" will be added under "Views->Employee" folder. I have added some meaningful text to this page as shown in the below figure:

Now, we are done with creating a simple ASP.NET MVC 5 application. To run the application, click CTRL + F5. Result will be as follows:

Now change the URL in browser from above to http://localhost:11517/Employee/ and press enter, still the output remains the same.

It will now be clear that request actually comes to controller, i.e., EmployeeController in our case and controller renders a view (Index.cshtml we created under Views->Employee folder) for us in browser.

In later web development articles, we will try to explore interaction between Model, Controller and Views in more details.

Related Web Application Development Tutorials

License

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

Share

About the Author

Imran Abdul Ghani
Software Developer (Senior) Emaratech
United Arab Emirates United Arab Emirates
Imran Abdul Ghani has more than 10 years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET(MCSD.NET) since 2005. You can reach his blogging at WCF Tutorials, Web Development, SharePoint for Dummies.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 117350011-Jun-15 23:21
memberMember 117350011-Jun-15 23:21 
GeneralRe: My vote of 5 Pin
Imran Abdul Ghani1-Jun-15 23:42
memberImran Abdul Ghani1-Jun-15 23:42 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161208.2 | Last Updated 25 Feb 2014
Article Copyright 2014 by Imran Abdul Ghani
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid