MVC Application for Beginners

• Download sample - 6 MB

Introduction

If you're new to the world of web development and eager to take your first steps into the realm of Model-View-Controller (MVC) architecture, you're in the right place. This article is tailored specifically for absolute beginners, serving as your inaugural journey into the exciting world of MVC.

In the next few minutes, we'll embark on a hands-on exploration of MVC, as I guide you through the creation of a simple project. Our goal is to demystify how control flows seamlessly between the Model, Controller, and View components, laying a strong foundation for you to venture into more complex MVC applications with confidence.

So, whether you're a curious coding novice or simply looking for a refresher, let's dive in and unlock the fundamental principles of building MVC applications.

Topics we are going to cover:

In this article, we'll explore fundamental concepts in MVC (Model-View-Controller) web development. We'll cover the following key topics:

1. Understanding the Folder Structure - We'll start by discussing the essential folder structure of an MVC project. 
2. How MVC Works: Navigating the Control Flow - Next, we'll delve into the core of MVC - the control flow. We'll break down how requests from users are handled, providing you with a clear understanding of how Models, Views, and Controllers work together to create a seamless user experience.
3. Building Blocks of MVC: Controllers, Models, and Views - Finally, we'll introduce you to the key components of MVC - Controllers, Models, and Views. We'll explain their roles and guide you through the process of creating them, ensuring you have a strong foundation for developing your own MVC applications.

So let us start by creating a simple project. The description of working of our project is given below.

Functionality of our Application

1. Upon launching our application, the home page will prominently feature a hyperlink labeled "click." When users click this hyperlink, a message will be instantly displayed, presenting a warm and welcoming "Hello World!!"
2. Taking a significant step forward, our application will transition from displaying a simple message to showcasing a list of individual names. This list, consisting of person names, will be prominently presented, offering a more engaging and interactive user experience.

Understanding the folders

When you create a project a folder structure gets created by default under the name of your project which can be seen in solution explorer. These folders and their respective contents play crucial roles in organizing, structuring, and functioning of a typical MVC application. Understanding their purposes is a fundamental step in working with the Model-View-Controller pattern in web development.

Model

The Model folder is where you define classes that represent your application's data. These classes can interact with a database to retrieve and manipulate data, or they can hold data entered by users via forms for later updates to the database. In other words, the Model handles the data-related logic of your application.

Controllers

Controllers are classes that handle user interactions and perform actions based on those interactions. Each controller contains methods called Actions that respond to user requests and determine what to do with those requests. These actions dictate how the application behaves in response to user input.

Views

The Views folder contains the user interface components of your application. Views are responsible for presenting data from the Model to the end user. They use the data from the Model to populate HTML controls and generate the content that is rendered in the client's web browser. Essentially, Views handle the presentation and user interface aspects of your application.

App_Start

The App_Start folder contains configuration classes for various application settings and behaviors. In the context you've mentioned, it includes classes like FilterConfig, RoutesConfig, and WebApiConfig. The RouteConfig class is particularly important for defining the URL structure used to navigate between different pages or actions within your application.

Such as:

public class RouteConfig
   {
       public static void RegisterRoutes(RouteCollection routes)
       {
           routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

           routes.MapRoute(
               name: "Default",
               url: "{controller}/{action}/{id}",
               defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
           );
       }
   }

Certainly, here's a revised version of the text with a more professional tone and simplified language:

In this context, MapRoute is an extension method. Its url property is employed to define the structure of the URL. By default, the specified format is in the following order: {controller's name}/{action's name}/{optional parameter}.

You have the flexibility to modify this format according to your specific requirements. However, it's important to note that this is the standardized format, and the third section of the URL, represented by {id}, is optional. We'll delve into how this id is utilized in greater detail later in this article.

Control Flow

To facilitate a fundamental understanding of the control flow in Model-View-Controller (MVC), we'll begin with a simplified diagram. 

1. Controller: The journey commences in the controller. Here, user requests are received and actions are initiated based on those requests. The controller acts as the orchestrator, deciding what specific actions to take.
2. Model (if required): Depending on the nature of the request, the controller may need to interact with the model. The model is responsible for handling data-related operations, which can include retrieving, updating, or processing data. This interaction occurs when the request necessitates data manipulation.
3. Back to Controller: After interacting with the model, control returns to the controller. This phase involves making decisions based on the results obtained from the model, or for further processing, possibly leading to additional actions.
4. View: The final destination of the control flow is the view. The view is responsible for presenting the data processed by the controller and model in a user-friendly manner. It generates the visual components, such as HTML, that are sent to the user's browser for display.

As we progress through the article, you will gain a more in-depth comprehension of the intricate dynamics between controllers, views, and models within the MVC architectural pattern. This fundamental understanding serves as a solid foundation for navigating the complexities of MVC-based web development.

Now, to begin building our application, we need a home page that will be displayed when the application is launched. This home page features a hyperlink labeled "click." At this stage, we'll implement this functionality.

As you may recall from the control flow diagram, the initial step is for control to be directed to the controller. To ensure our application runs as intended, the presence of a controller is essential.

Creating MVC Application

I have used Visual Studio 2013 but you can also work with Visual Studio 2012. In Visual Studio create a new project named Sample.

1. Launch Visual Studio.
2. Go to "File" and select "New" followed by "Project."
3. In the left-hand panel, under the "Web" section, choose "MVC 4 Web Application" under the .NET Framework 4.5. Name your project "Sample" and click "OK."
4. In the templates window, select the "Empty Application" template. While the "Internet Application" template is an option, we'll choose the "Empty Application" for simplicity.
5. Select the "Razor" engine as your View Engine. You might wonder what a view engine is?
   • A view engine, in ASP.NET MVC, acts as an intermediary between your view and the browser. It ensures that the output from your view is rendered as valid HTML in the browser.
   • The .NET Framework offers two View Engines: "Razor" and "ASPX." They have differences in namespaces, file extensions, and syntax:
     • Razor uses .cshtml (in C#) and .vbhtml (in VB) extensions.
     • ASPX uses .aspx for views, .ascx for UserControls, and .master for Master Pages.
6. Click "OK," and your application will be created.

Now, we'll take it step by step according to the "Functionality of our application" heading. Let's begin with the first step:

When we run our application, it should contain a hyperlink on the home page named click. On clicking the hyperlink, a message should be displayed, i.e., "Hello World!!"

For this initial step, we'll focus on creating a homepage. To determine which of the three components (Model, View, Controller) to use, consider that a homepage presents content to users using HTML elements. In this case, the correct component to create our homepage is the "View."

Creating View

1. Inside the Views folder, create a new folder named Person.
2. Right-click on the Person folder, select "Add," and then click on "View" from the expanded options. Name the view "Home" and click "OK." This action will add a view named Home.cshtml within the Person folder, and it's important to note that the extension for Razor view engine views is .cshtml.
3. In the Home.cshtml view, you'll find default code generated by the .NET Framework. Replace the content within the <h2></h2> HTML element with the following code:

@Html.ActionLink("click","Message","Person")

This line of code creates a hyperlink named click . Take note of the @ symbol; in the Razor view engine, it's used to include code. Html is a helper class used for creating HTML controls like textboxes, labels, hyperlinks, and more. To create a hyperlink, we use the ActionLink method of the Html helper class.

• There are multiple overloads of the ActionLink method, but in this case, we're using the 4th overload: Html.ActionLink(string linkText, string actionName, string controllerName).
• linkText is set as click.
• actionName is the name of the action method that should be executed when the link is clicked; let's name it Message.
• controllerName is the name of the controller that contains the Message action method; we'll name it Person.

Important Note: It's possible for multiple controllers to contain action methods with the same name.

This HTML component (ActionLink) will be rendered but won't function as expected when clicked because we haven't yet created the controller and action specified in the ActionLink method (i.e., Person and Message).

As you might recall, controllers contain actions. Therefore, for our application, the Person controller will contain the Message action. To resolve this, let's start by creating the controller.

Creating Controller

1. In Solution Explorer, right-click on the Controller folder. Select "Add" and then choose "Controller" from the expanded options. Name the controller "Person."
2. Remember to include the word 'Controller' at the end of the name, so the controller's name should be PersonController. Click "OK."
3. Inside the PersonController, you'll find some default code, including an Index action. Delete this method, as our PersonController should have a Message action. Let's create it.
4. An action in an MVC controller is a method. Within the PersonController class, create an empty method named Message. For now, keep the return type of this method as void.
5. We'll define the functionality of the Message action. Our goal is to have this action display the message "Hello World!!" for users. To display this message, we need a view. Therefore, we will return a view from the Message action. Since we are returning something from the Message action, its return type should not be void.
6. A view is represented by the ViewResult class, which inherits from the ActionResult class. Thus, the return type of the Message action will be ActionResult.
7. Our PersonController with the Message action will look like this:

class PersonController
{
     public ActionResult Message()
     {
          return view();
     }
}

The return type of the action may vary depending on the specific requirements. For instance, when returning JSON-formatted content, the return type would be "JsonResult." To return a view, we use ActionResult. The Message action will return a view named Message, which will contain the message "Hello World!!"

To achieve this, you must create another view with the same name as the action returning it, which is "Message." Add this view to the same folder where you added the "Home" view, namely, the Person folder.

Important Note: The name of the folder created in the Views folder should match the controller name for which these views are added.

To display the "Hello World" message, you can use an HTML heading element like this:

<h2>Hello World!!</h2>

Apart from the Message action, we'll also need another action, let's call it "Home." This action is intended to display the homepage.

Remember, as per the control flow, the first point of contact is the controller, which executes the actions. So, to open our view with the homepage when our application runs, we need an action that can be implemented using the controller's actions.

Create the Home action in a similar manner as the Message action. It will have the same definition as of Message action. Only the difference is their name.

Adjusting Route Configuration

Now run your application press Ctrl + F5. You will see the following page: 

The reason behind the control not displaying our homepage is related to the RouteConfig class. When you open the RouteConfig class in the App_Start folder, you'll notice that the default URL specifies the controller as "Home" and the action as "Index." However, in our project, we don't have a controller named Home or an action named Index. This default URL is executed when our application runs, but we want our custom homepage to be displayed.

To achieve this, we need to make some minor changes in our RouteConfig class. Specifically, set the controller to Person and the action to Home.

Note: In the controller parameter, you don't need to provide PersonController in its entirety. The .NET framework automatically appends the word Controller after the controller name you provide. So, when you run the application, it understands Person as PersonController.

This URL now directs control to PersonController and, within it, to the Home action, which contains a return statement.

You might wonder how the control knows which view to return since we haven't explicitly provided the view's name in the return statement. Well, it determines the view to return based on the action name. That's why it's crucial for the action and view names to match, within a folder whose name corresponds to the controller that contains those actions.

This is why we organize views within a folder named Person (matching the controller's name). If there were other controllers with different views, we would create separate folders for those views, each named after the respective controller.

With these adjustments, execute the application, and it will work as expected.

The application's flow is as follows: PersonController -> Home action -> Home view -> Click hyperlink -> PersonController -> Message action -> Message view.

This basic flow can be enhanced by parameter passing to the action and using the id part of the URL defined in the RouteConfig class.

Avoid hardcoded message in the view

To make the message in the view more flexible and avoid hardcoding it, you have a few options:

1. Pass the Message as an Argument

You can pass the message as an argument directly to the Message action:

public ActionResult Message()
{
   return view("Hello World!!");
}

This approach provides a straightforward way to customize the message displayed in the view.

2. Pass the message as an id in the URL

Alternatively, you can pass the message as an id in the URL. In the Home view, use the ActionLink method to pass the message as a parameter:

@Html.ActionLink("click","Message","Person", new { id = "Hello World!!"});

In the Person controller's Message action, receive the passed parameter from the ActionLink method as an argument to the Message action:

public ActionResult Message(string id)
{
   return view(id); //pass the received message to view
}

and in the view, you can use the model to display the message:

@model string

<h2>@Model</h2>

This method allows you to dynamically change the message by altering the URL.

3. Directly Load the Page Using URL

You can also load the page directly using the URL structure: {controller}/{action}/{id}. In your case, it would be Person/Message/Hello World!!

If you want to use a parameter name other than id (e.g., message), you need to change the name in the RouteConfig class:

defaults: new { controller = "Person", action = "Home", message = UrlParameter.Optional }

Here, the message parameter is set as optional. You can also provide a default value if you don't want it to be optional. This change allows you to use a different parameter name while maintaining the desired functionality.

Moving Further

Instead of displaying a message, let's now focus on showing a list of person names. The procedure remains similar to what we've done before. The only difference is that instead of passing a message to the view, we'll be passing a list of names to be displayed.

Let's add another hyperlink to the homepage for displaying the list of persons. You already know how to create a hyperlink using the ActionLink method. Name this hyperlink List_of_Person.

For the actionName parameter of the ActionLink method, specify the name of the action that will handle this task when the hyperlink is clicked. Let's create a separate action specifically for displaying the list of persons and name it ShowPerson.

@Html.ActionLink( "List_of_Person", "ShowPerson" , "Person" )

In order to display a list of person names when the List_of_Person link is clicked, we'll adhere to object-oriented principles. For this purpose, we need a class that will provide the necessary data. In the MVC architecture, these classes are known as Models. Therefore, we'll create a model class named Person to serve as our data source.

The sequence of data flow follows this path: Controller -> Model (if needed) -> Controller (again) -> View -> Controller.

Unlike earlier scenarios where Models were not required, here, a Model is essential to supply the list of person names to the View. Our Person model class will consist of two properties: FirstName and LastName.

This Model will enable us to provide the data needed to display the list of person names effectively.

Creating a Model

Great, let's proceed with creating the model and the associated view for displaying a list of persons:

1. In the Solution Explorer, right-click on the Models folder and select "Add" -> "Class."
2. Name the class file Person.cs and click the "Add" button.
3. Inside the Person class file, define two automated properties for first name and last name:

public class Person
{
	public string FirstName { get; set; }
	public string LastName { get; set; }
}

This Person class will represent individual persons and their names.

Now, let's create an action named ShowPerson in the PersonController to display a list of persons. This action will populate a list of Person objects and pass it to the view.

public ActionResult ShowPerson()
{
	List<person> persons = new List<person>() 
	{ 
		new Person { FirstName = "Sherlock", LastName = "Holmes" }, 
	    new Person { FirstName = "James", LastName = "Watson" } 
	};
	return view(persons);
}</person></person>

In the ShowPerson action, we create a list of Person objects, each representing an individual with a first name and a last name. This list represents the list of persons to be displayed in the view.

Now, let's create a view that will display the list of persons. This view will receive the list of persons as its model.

1. Right-click on the Person folder inside the Views folder.
2. Select "Add" -> "View."
3. Check the checkbox for creating a strongly typed view.
4. From the "Model class" dropdown, select "Person (UrlMapping.Models)."
5. From the "Scaffold template" dropdown, select "List."
6. Click the "Add" button.

With these steps, a view named "ShowPerson" will be added to the Person folder in the Views folder. This view is strongly typed to receive a list of Person objects as its model.

You have now successfully created the model and the associated view for displaying a list of persons. When you execute the ShowPerson action, it will display the list of persons using the ShowPerson view.

Now modify the ShowPerson view as

@model IEnumerable<CodeProject.Models.Person>   

@{ 
    ViewBag.Title = "ShowPerson"; 
} 

<h2>ShowPerson</h2> 

<table> 
    <tr> 
        <th> 
            @Html.DisplayNameFor(model => model.FirstName) 
        </th> 
        <th> 
            @Html.DisplayNameFor(model => model.LastName) 
        </th> 
        <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
        <td> 
            @Html.DisplayFor(modelItem => item.FirstName) 
        </td> 
        <td> 
            @Html.DisplayFor(modelItem => item.LastName) 
        </td> 
   
    </tr> 
} 

</table>

Now, run your application by pressing Ctrl+F5, and it should work as expected. When you navigate to the ShowPerson action by clicking the List_of_Person hyperlink on the homepage, it will display the list of persons using the ShowPerson view.

If you encounter any issues or have further questions, feel free to ask for assistance. Good job on creating your MVC application!

Points of Interest

This article marks my initial contribution to the CodeProject community. As a newcomer to MVC architecture, I faced challenges when building my first application due to the scarcity of beginner-friendly resources, especially since MVC was relatively new in the market at the time. Motivated by this, I decided to share my learning experience and insights. My hope is that this article will serve as a valuable resource for fellow beginners who are venturing into the world of MVC development. If you have any feedback or questions, please feel free to reach out; I'm here to assist you on your learning journey.