A Step-by-Step Guide in Creating an ASP.NET MVC Application

ASP.NET MVC (Model-View-Controller) is a popular framework for building robust, scalable, and maintainable web applications. It provides a powerful set of tools and features that enable developers to create dynamic and interactive websites. In this article, we will walk you through the process of creating an ASP.NET MVC application from scratch. Let’s get started!

What is ASP.NET MVC?

ASP.NET MVC is an open-source web development framework from Microsoft that provides a Model View Controller architecture. This free web framework is designed to build websites and web applications on .NET Framework using HTML, CSS, and JavaScript.

Before we start please make sure to have this following application installed on your machine.

  • Visual Studio » Download and install the latest version of Visual Studio, which includes the necessary templates and libraries for ASP.NET MVC development.
  • .NET Framework » Ensure that you have the required version of the .NET Framework installed.

I. Create ASP.NET MVC Project

1. Open Visual Studio and select “Create a new project.”

Create New Project

2. In the project template selection window, choose “ASP.NET Web Application.”

ASP.NET Web Application

3. Provide a name for your project and choose a location to save it. Click “Create” to generate the project structure.

Name your Project

4. Now, we have two options to start a project we can use the MVC template, or we can start from an empty project. We will use the empty MVC template then click the “Create” button.

Creating an ASP.NET MVC Application

5. This is how your project solution will look like. See the image below.

Empty MVC Project solution

II. Understanding the Project Structure

MVC is an architectural pattern known as Model-View-Controller. This architecture separates your application into three logical components.

  • Models – Contains classes representing the data model and business logic of your application.
  • Views – Contains the HTML templates and user interface elements for rendering the application’s output.
  • Controllers – Contains classes that handle user requests, process data, and interact with models and views.

III. Creating Models

1. Right-click on the “Models” folder in your project and select “Add” > “Class.”

Add Model class

2. Define your model classes, including properties and methods that represent your application’s data. In this case, I’ll create an Authors class.

3. Then I’ll create Name and Address for the model properties.

Model Author

IV. Creating Controllers

Now, that we are done setting properties lets add the Controller class. Follow the steps below.

1. Right-clicking on the “Controllers” folder then select “Add” » “Controller.”

MVC Controller

2. Choose the appropriate template for your controller, such as “Empty,” “MVC Controller – Empty”.

MVC 5 Controller

3. Assign name to your controller class then click the “Add” button.

Name Controller

4. This will create a new controller with a default Index method.

Home Controller

V. Creating Views

1. Now, all we need to do is to create a View. We will create a view for this index method. To do that, right-click on the Index method from HomeController.cs.

Add View

2. Choose a template for your view such as “Empty,” “List,” “Details,” etc. In my case, I’ll choose List for this demo and select the Authors on the Model class.

Creating an ASP.NET MVC Application

3. This action will create an Index.cshtml file under “Views” » “Home” folder. Open the index.cshtml and modify the html design as required for your application.

Create ASP NET MVC Application

4. Leverage the Razor syntax (default view engine) to dynamically render data from the models within your views. This is the default view generated.

 @model IEnumerable<MVCWebApp.Models.Authors>

    @Html.ActionLink("Create New", "Create")
<table class="table">
            @Html.DisplayNameFor(model => model.Name)
            @Html.DisplayNameFor(model => model.Address)

@foreach (var item in Model) {
            @Html.DisplayFor(modelItem => item.Name)
            @Html.DisplayFor(modelItem => item.Address)
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })


VI. Configuring Routes

Routing is a crucial aspect of ASP.NET MVC. It determines how URLs are mapped to controllers and actions.

1. Open the “RouteConfig.cs” file located in the “App_Start” folder.

Creating an ASP.NET MVC Application

2. Define custom routes using the MapRoute method, specifying the URL pattern and controller/action to be invoked. Which, by default it is set to Home/Index. The full URL now should be in this format “https://localhost:{port}/Home/Index”

VII. Running and Testing the Application

Now, It’s time to test our application. To be able to see a sample display of list of Authors on our View, use the code snippet below and replace the code on your HomeController.cs.

public ActionResult Index()
            var authors = new List<Authors>() { 
             new Authors{ Name = "Author 1", Address="missing st."},
             new Authors{ Name = "Author 2", Address="missing st."},
             new Authors{ Name = "Author 3", Address="missing st."},
            return View(authors);

If you use an empty template of MVC, make sure that the following library are installed.

  • Bootstrap 3.3.7
  • JQuery 1.10.2
  • Modernizr 2.6.2

If not, you can download it using NuGet Package Manager.

You may also visit this blog post to guide you on installing NuGet package.

Now, you are ready to test your first ASP.NET web application.

1. Press F5 or click the “Run” button in Visual Studio to start the application.

2. Verify that your application launches in the browser, and you are able to see the list of dummy authors that we added on index action inside HomeController.cs.

3. You can also Use breakpoints and debugging tools to identify and resolve any issues.

If you follow along with this tutorial you should be able to see this on your browser.

Creating an ASP.NET MVC Application

If you observe, we have three hyperlink function on the view, “Edit”, “Details” and Delete. You can continue this project by creating their functionality, we only covered display list function on this tutorial.

ASP NET MVC Folder Structure

Detailed ASP.NET MVC folder structure.

Source Code

If you encounter an error on your source code and you already did your best in debugging and still no result, you may download the source code used from GitHub @coderbugzz.


Creating an ASP.NET MVC application allows you to build powerful, flexible, and scalable web applications. By following the steps outlined in this guide, you can get started on your ASP.NET MVC journey. Remember to continuously enhance your knowledge by exploring additional features, frameworks, and best practices to build high-quality applications. Hopefully, you have learn something on this tutorial. Keep coding!