Learn

Now that we have an understanding of how the view page renders C# and HTML, let’s take a look at how we can work with the logic behind it.

In order to add functionality to the view layer, we must add a PageModel class where all the logic will belong. This class is usually found in the cshtml.cs file placed in the same folder as the view page. The class file shares the same file name as the view page, albeit with an additional .cs on the end to denote the fact that it’s actually a C# class file. So if we have a view page at Pages/Index.cshtml, the model page will be available in Pages/Index.cshtml.cs.

Our model for the view page will be responsible for exposing methods, commands, and other properties that help maintain the state of the view, and trigger events in the view itself.

Below are some of the advantages that come when separating the logic from the view page:

  • Smaller and more reusable units of code allow for flexibility to create scalable apps with more ease.

  • View pages will be easier to maintain if the model needs to be updated or requires changes. If the view page and the model weren’t separated, and the model changed frequently, the view would be flooded with update requests leading you to spend extra time fixing and tweaking small changes like method calls or property names.

  • Distinct sections also allow for code to be unit tested — a practice of creating tests to test the written code, which ultimately allows for automated testing — a concept that becomes ever more important as a project grows in size and expands functionality.

Instructions

Looking at the bottom right diagram, we can see how properties are created in the page model — Hello.cshtml.cs, and how they’re used in the view page — Hello.cshtml.

Each file has its own distinct use; whereas the model page takes care of the logic behind the properties and methods, the view page is simply making use of said properties and methods by calling them and/or exposing them to the user.

In the model page, we can see how a property is defined and assigned a value:

Hello.cshtml.cs

public string Title = "Hello";

And in the view page, we’re displaying the value to the user:

Hello.cshtml

<div>@Model.Title</div>

We can also see how a method is created and used.

In the model, we’re defining how the method works. What will the method be named? What will it do when it’s called? What UI elements will change?

Hello.cshtml.cs

public void OnPost() { Title = "Hi!"; }

Here we’re updating the value of the property Title to “Hi!” once the method, OnPost() is called.

In the view page, we’re making use of this method by submitting a form.

Hello.cshtml

<form method="post"> ... </form>

Once the submit button is clicked, the method OnPost() will be called, and the value of Title will be updated from “Hello” to “Hi!”.

Make sure to watch a few loops of the attached gif in order for this to make sense!

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?