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
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.
@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.
<%@ 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.
@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
The response that is sent to the browser is according to the codes below.
HTML result
<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 theDefault.aspxfile to run. In other words,Default.aspxare 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.
@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 useexample.cominstead 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
The response that is sent to the browser is according to the codes below.
HTML result
<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
The response that is sent to the browser is according to the codes below.
HTML result
<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
Top comments (0)