View in CodeBehind Framework
Tags: tutorial, dotnet, beginners, backend
Published: 2024-05-28 23:52:04

In this tutorial, we will introduce you to the Views in CodeBehind.

## What is View

A View is a component (or page) that displays data to the user. It is typically written in HTML, CSS, and possibly JavaScript, and is responsible for presenting the data from the back-end (such as a database or API) in a user-friendly format.

In CodeBehind, a View is a template file that is used to display the output to the user. Views typically contain HTML markup along with C# code to display dynamic content such as variables and data retrieved from a database. Views help separate the presentation logic from the business logic in an application, making the code easier to maintain and update.

## CodeBehind View extension

![Brilliant Return to ASP.NET Core](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuioijzbbv0gqvkph30u.png)

The extension of View files in CodeBehind is aspx. This extension was previously used by Microsoft in the former web-form in .NET standard. aspx files in the CodeBehind framework are new, dynamic and modern and have no resemblance to Microsoft's former web-form; as a result, they are just the same name and different from each other. Microsoft now supports the cshtml extension for Views in ASP.NET Core; aspx files in the CodeBehind framework have more advantages than cshtml files in Microsoft's default ASP.NET Core frameworks.

## CodeBehind View syntax

Views can be created in CodeBehind with two syntaxes; Razor syntax and standard syntax. Here we will only briefly mention the Razor and standard syntaxes, and in the next tutorials we will fully teach these two syntaxes.

**Razor syntax**

If we want to design the View page with Razor syntax, we must add the following string at the beginning of the page:
`@page`

The example below shows a View page with Razor syntax.
```html
@page
@{
string PageTitle = "Page";
string BodyValue = "This is my page";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@PageTitle</title>
</head>
<body>
    @BodyValue
</body>
</html>
```

In Razor syntax, to add server-side codes, first write the `@` character (At sign) and then the `{` character (Open bracket), then write the server-side codes and finally write the `}` character (Close bracket).

If the `@` symbol is added before a valued object, the value of that object is displayed in the final output.

Example:
According to the example codes above, the `Page` string is replaced with the `@PageTitle` value and the `This is my page` string is replaced with the `@BodyValue` value.

**Standard syntax**

If we want to design the View page with the standard syntax, we must add the following string at the beginning of the page:
`<%@ page %>`

The following example shows a View page with standard syntax.
```html
<%@ page %>
<%
string PageTitle = "Page";
string BodyValue = "This is my page";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title><%=PageTitle%></title>
</head>
<body>
    <%=BodyValue%>
</body>
</html>
```

In the standard syntax, to add server-side codes, first write `<` character (Less than), then `%` (Percent sign) character, then write server-side codes, and finally write `%` character (Percent sign), then We write `>` character (Greater than).

If we add a value object between `<%=` and `%>`, the value of that object will be displayed in the final output.

Example:
According to the example codes above, the `Page` string is replaced with the value `<%=PageTitle%>` and the `This is my page` string is replaced with the value `<%=BodyValue%>`.

## Create only View

As we said in previous tutorials, in the revolutionary architecture of MVC in CodeBehind, all requests reach the View first. Views in CodeBehind are very flexible and you don't need to develop your systems based on the MVC pattern; you can create your application with only View without Controller and Model. So now we want to go back to our project in Visual Studio Code and create a new View without Controller and Model.

In the Explorer section, we delete all the aspx files inside the wwwroot directory, and then by right-clicking on this directory, we select the `New File` option and create a new file called `Default.aspx`.

Then we add the following codes inside the `Default.aspx` file.
```html
@page
@{ string Value1 = "I am learning the CodeBehind Framework"; }

<h1>What's in the Value1 string?</h1>
<p>
    There is an <i>@Value1</i> value in the Value1 string.
</p>
```

We run the project (F5 key). After running the project, you will see the following image in the browser.

Screenshot
![Default.aspx Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjs27jc1sewocbbpq4s1.png)

The response that is sent to the browser is according to the codes below.

HTML result
```html
<h1>What's in the Value1 string?</h1>
<p>
    There is an <i>I am learning the CodeBehind Framework</i> value in the Value1 string.
</p>
```
The physical path of the View file is the same as the URL path.

Example: If you create a directory named `test` in the `wwwroot` directory and insert a View file named `MyView.aspx` in this directory, `MyView.aspx` can be accessed through the following URL path:
`example.com/test/MyView.aspx`

> Note: If you name a View file `Default.aspx`, request for the directory path will cause the `Default.aspx` file to run. In other words, `Default.aspx` are the default path Views in CodeBehind.

Example: If you create a directory named `about` in the `wwwroot` directory and insert a `Default.aspx` file in this directory, it is no longer necessary to request the following path in the URL:
`example.com/about/Default.aspx`

The following request has the same answer as the above request:
`example.com/about`

The naming of aspx files is case sensitive and if you name a View with capital letters, the same naming must be observed in the URL. So, the default directory path is `Default.aspx` and `default.aspx` will not be the default.

You can also enable support for cshtml files in the options file. In the next content, we will teach how to activate support for cshtml files.

## HttpContext in View

You access the `HttpContext` in the View by means of the `context` in the server-side code.

`HttpContext` is an object that is used in ASP.NET applications to store and retrieve information about an individual HTTP request. It provides access to various properties and methods that allow developers to interact with incoming request data and outgoing response data. It also allows for the manipulation of cookies, session state, querystring, form data, and other request-related information.

In the Explorer section, by right-clicking on `wwwroot` directory, we select the `New File` option and create a new file called `CheckQuery.aspx`.

Then we add the following codes inside the `CheckQuery.aspx` file.
```html
@page
@{
    string HasValue = (!string.IsNullOrEmpty(context.Request.Query["value"]))? "Yes" : "No";
}

<div>
    <h1>Exist value in querystring? @HasValue</h1>
    <hr>
    <b>value is: @(context.Request.Query["value"].ToString())</b>
</div>
```

According to the above codes, the existence of the query value is checked first, and then the value of the query value is added between the HTML tags

We run the project (F5 key). After running the project, You need to add the string `/CheckQuery.aspx` to the URL.

> Note: Usually, when you run the web project in Visual Studio Code, a path like the one below is displayed:
> `localhost:####`
> Instead of # characters, numbers are placed
> In this tutorial series, we use `example.com` instead of this path.

**Path without query**
`example.com/CheckQuery.aspx`

If you enter the above path in the browser, you will see the following image in the browser.

Screenshot
![URL Without Querystring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1szv452df7hnwk9j1i5o.png)

The response that is sent to the browser is according to the codes below.

HTML result
```html
<div>
    <h1>Exist value in querystring? No</h1>
    <hr>
    <b>value is: </b>
</div>
```

As it is clear, we did not request the `value` query here, and as a result, no value is displayed.

**Path with query**
`example.com/CheckQuery.aspx?value=CodeBehind Framework`

If you enter the above path in the browser, you will see the following image in the browser.

Screenshot
![URL With Querystring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu7gru1b44y1gwz0gru0.png)

The response that is sent to the browser is according to the codes below.

HTML result
```html
<div>
    <h1>Exist value in querystring? Yes</h1>
    <hr>
    <b>value is: CodeBehind Framework</b>
</div>
```

When we request the `value` query along with a string, the string of the `value` query will be displayed in the sent response.

### Related links

CodeBehind on GitHub:
https://github.com/elanatframework/Code_behind

CodeBehind in NuGet:
https://www.nuget.org/packages/CodeBehind/

CodeBehind page:
https://elanat.net/page_content/code_behind