Introduction to Wep Page Helpers
Introduction to Wep Page Helpers
Introduction to Web Documents
The programs we will create are meant to give instructions to a Web browser. You write these instructions using a combination of regular text, HTML, C#, and other languages (such as JavaScript), including their libraries. You can write your code using a text editor, following some required and optional rules and suggestions. The instructions in your program is also referred to as code.
Practical Learning: Introducing Web Documents
 |
 |
 |
 |
 |
 |
Introduction to Web Pages
The most fundamental document used on the Internet is called a Web page or webpage. A webpage is primarily created as a text-based document containing HTML code. To create this type of document in Microsoft Visual Studio, after starting a project, on the main menu, click Project and click Add New Item... In the left list of the Add New Item dialog box, under C#, expand ASP.NET Core, and expand Web. Then click Content. In the middle list, click HTML Page:
Accept or change the default name of the file. When you create most files using the Add New Item dialog box, you don't need to add an extension to the file. You can just provide a name. HTML files are one of the exceptions. When you are creating an HTML file, if you don't provide an extension, the Add New Item dialog box would apply the defauilt .html. Otherwise, you can specify an alternate extension you want, such as .htm. Once you have finished with the Add New Item dialog box, click Add.
Introduction to Cascading Stype Sheet
Cascading Style Sheet, or CSS, is the most fundamental language used to indicate to the browser how to format the content of a Web page. You can add CSS format in an HTML document. To do that, you can create a style attribute in an HTML tag. Here are two examples:
<html>
<head>
</head>
<body>
<form method="post" name="frmExercise">
<table style="width: 300px">
<tr>
<td style="width: 100px">Number:</td>
<td><input type="text" id="txtOperand1" name="txtOperand1" style="width: 100px" /></td>
</tr>
</table>
</form>
</body>
</html>
You can create a style section in the head section of a webpage or in the top section of a Razor Page, and then apply the style(s) in the start side of an HTML tag. You can create a CSS file in the Add New Item dialog box, and then apply those styles to HTML tags. To help you, Microsoft Visual Studio ships with CSS files you can use. When you have created an ASP.NET project, the available CSS files are in sub-folders in the wwwroot folder. The main CSS file is named Bootstrap. It can be found in the "wwwroot\lib\bootstrap\dist\css" folder and it is named bootstrap.css. You can open the file and see its content. If you see a format you like, you can use it in your project.
If the available CSS files don't have the format you want, you can create your own CSS file. To create a CSS file in a Microsoft Visual Studio project, on the main menu, click Project and click Add New Item... In the left list of the Add New Item dialog box, under C#, expand ASP.NET Core, and expand Web. Then click Content. In the middle list, click Style Sheet. Accept or change the default name of the file. You don't have to add an extension. When you have finished, click Add. You can then populate the CSS document with the formats you want. After creating the CSS document, you can create a reference to it from the documents that will need it.
Practical Learning: Starting a Project
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.w100 { width: 100px; }
.w125 { width: 125px; }
.w150 { width: 150px; }
.ta-right { text-align: right; }
.ta-center { text-align: center; }
.common-font { font-family: Georgia, Garamond, 'Times New Roman', serif; }Introduction to JavaScript Files
If you want to create interactive webpages, one of your options is the JavaScript language. In fact, you can use a combination of JavaScript and one or more of its libraries. To create a JavaScript or related file in a Microsoft Visual Studio project, on the main menu, click Project and click Add New Item... In the left list of the Add New Item dialog box, under C#, expand ASP.NET Core, and expand Web. Then click Scripts. In the middle list, click the desired option. You will choice among JavaScript, TypeScript, and AngularJS. If you want to create a jQuery file, select JavaScript:
After making your choice, accept or change the suggested name of the file. You don't have to add an extension; the dialog box would apply an extension based on the type of file you woud have selected. When you have finished, click Add. You can then write your code in the document. Then create a reference to that file in the other documents will need it.
Using XML Files
A C# project needs some configuration files to which the compiler can refer to perform some behind-the-scenes operations. One type of those files is XML. When you start a project in Microsoft Visual Studio, the studio creates some of those files for you. You too can add an XML file to your project if you judge it necessary.
To create an XML file, display the Add New Item dialog box, select XML file. Accept or change the suggested name of the file. Then click Add. You can then fill the document with the XML elements you need.
Using JSON Files
Another category of files used for project settings or configurations is JSON, which is a document that contains one or more JavaScript arrays. When you start an ASP.NET project in Microsoft Visual Studio, the studio creates the starting necessary JSON files. At any time, you too can add one or more JSON files to your project. To create a JSON file, display the Add New Item dialog box. Select JSON file. Accept of change the suggested name of the file, and click Add or press Enter. Then modify the document as you wish.
Managing the Documents of a Web Project
After, or while, creating the documents of your project in either Microsoft Visual Studio or Visual Studio Code, you can manage the documents as done in a C# project. The Solution Explorer in Microsoft Visual Studio is also used the same way.
Introduction to Tag Helpers
Overview
HTML is the primary language of webpages. That language uses small fragments named tags. Razor Pages is an enhanced way to create and apply tags to a webpage. To address the various aspects of HTML tags, Razor Pages have a concept named Tag Helpers. A tag helper is a built-in .NET Framework class that implements a specific type of HTML tag to a razor page.
The .NET Framework provides various classes to apply HTML tags to a Razor Page. Everyone of those classes is equipped with properties. Everyone of those properties represents an attribute of an HTML tag. Therefore, to apply an HTML tag to a tag helper, access the member of the class and assign the appropriate value to it.
The Head Section of a Web Page
To support the HTML's <head> tag, the .NET Framework provides a (small) class named HeadTagHelper. Normally, you will not use that class. Instead, the layout page contains a HEAD section created with a <head> tag. In that HEAD section, you can put all the routine operations you would perform in that type of section.
One of the types of code you write in the HEAD section of a webpage is a link to a CSS document. You will create some of the CSS files you need but to start, Microsoft Visual Studio ships with the Bootstrap library. You can find its documents in sub-folders of the wwwroot folder of your project. When you create an ASP.NET application in Microsoft Visual Studio, it automatically adds or loads Bootstrap in the project and adds links to it.
Microsoft Visual Studio ships with other languages and libraries you can use in your ASP.NET applications. Some libraries are automatically available. That's the case for the JavaScript language. Microsoft Visual Studio also ships with jQuery, and its links are automatically created in the _Layout.cshtml document. This means that you can immediately use both JavaScript and jQuery in your ASP.NET aplications.
Microsoft Visual Studio also ships with languages and libraries that are available but may not be loaded immediately when you start a project. For example, the TypeScript language is available but, to use it, you must first create a TypeScript file, which is easy to do from the Add New Item dialog box. Some libraries are also available but you have to "load" them first. That's the case for AngularJS, NodeJS, etc.
Formatting a Layout Page
Remember that the layout page is the central document to which other Razor Pages refer. Therefore, you can add some formats to it to affect other webpages. You can apply various types of CSS formats to different sections of a layout page. It is usually a good idea to create one or more CSS files. To start, if you are working from scratch, you should create a folder named wwwroot at the root of your project. In that wwwroot directly, optionally, you can create a folder to hold your CSS file(s).
After creating a CSS file, you can add a reference to it in the <HEAD> section of your layout page. This reference is created with the <link> tag. Like most HTML tags, <link> has many HTML attributes, including href, rel, etc.
Links in a Layout Page
To expand on the ability to deal with a CSS link, the .NET Framework provides a class named LinkTagHelper:
public class LinkTagHelper : Microsoft.AspNetCore.Mvc.Razor.TagHelpers.UrlResolutionTagHelper
This class is equipped with various properties for the traditional attributes of a <link> tag. The .NET Framework enhances the tag with its own attributes. For example, to keep track of the version of a CSS file you are using, the LinkTagHelper is equipped with a Boolean property named AppendVersion. It is represented by an HTML attribute named asp-append-version:
[Microsoft.AspNetCore.Razor.TagHelpers.HtmlAttributeName("asp-append-version")]
public bool? AppendVersion { get; set; }
The Body Section of a Web Page
To support the HTML's <body> tag, the .NET Framework provides a (small) class named BodyTagHelper:
[Microsoft.AspNetCore.Razor.TagHelpers.HtmlTargetElement("body")]
public class BodyTagHelper : Microsoft.AspNetCore.Mvc.Razor.TagHelpers.TagHelperComponentTagHelper
You will hardly, if ever, use that class because, normally, the only document that may need a <body> tag is the _Layout page;, and that document already has that tag.
In the <BODY> section of a layout page, you can create all types of HTML tags, including links to all types of documents on the Internet and links to webpages and other documents in your own application. A Web link is created with an HTML <a> tag.
A Shared Section for Web Pages
To apply the consistent appearance we had introduced, the central document of the website should have a placeholder for other webpages. To create such a placeholder, somewhere in the Layout document, type @RenderBody().
Practical Learning: Accessing the Render Body Section
Anchoring a Link
Remember that you can create links to all various types of documents. Because your project may use Razor Pages, you can also create links to them. To support linking razor pages, the .NET Framework provides a class named AnchorTagHelper:
public class AnchorTagHelper : Microsoft.AspNetCore.Razor.TagHelpers.TagHelper
This class is equipped with many members. Remember that every member represents an HTML attribute. Therefore, every member represents every category of link. To help you create a text-based link, the AnchorTagHelper class is equipped with a member named Page. This member represents an HTML attribute named asp-page. Therefore, to apply a link in a razor page using the AnchorTagHelper.Page object, create an HTML <a> tag. In its start tag, create an asp-page attribute and assign the relative address of the desired Razor Page to it.
Practical Learning: Creating a Razor Page
@page
@model Introduction.Pages.WaterMeters.IndexModel
@{
}
<p><a asp-page="Create">Create Water Meter</a></p>
Introduction to Web Forms
Introduction
As you may know already, an interactive webpage is one that has a form, and HTML provides tags that can be used to create a form. The .NET Framework provides its own means to support forms. To start, the .NET Framework provides an interface named IHtmlHelper:
public interface IHtmlHelper
This interface is equipped with properties and methods to create a form and configure its primary behavior. To support Web controls, the .NET Framework provides a class named HtmlHelper. That class implements the IHtmlHelper interface. Although this is not a sealed class, you will probably never need to instantiate it. Instead, you may use the members of the IHtmlHelper interface for any form-based object you need.
Creating a Form
As you may know already, to get a Web form in a webpage, you can create an HTML <form> tag. To support the creation of a form, the IHtmlHelper interface is equipped with a method named BeginForm. Its syntax is:
public Microsoft.AspNetCore.Mvc.Rendering.MvcForm BeginForm(string actionName,
string controllerName,
object routeValues,
FormMethod method,
bool? antiforgery,
object htmlAttributes);
In this case, to create a form, create a section with @using(){}. In the parentheses, call the above IHtmlHelper.BeginForm() method and pass the necessary arguments. This would be done as follows:
@using(Html.BeginForm("form-name", "controller-name", FormMethod.Post/Get)){
}
Creating a Text Box
After starting a Web form, you can populate it with Web controls. You can create the controls using the appropriate HTML tags.
A text box is the primary means of requesting text from a visitor. To get a text box, create an <input> tag in your <form> or in a @using(Html.BeginForm()){} section. Here is an example:
<html>
<head>
</head>
<body>
<form method="post" name="frmExercise">
<table style="width: 300px">
<tr>
<td>Number:</td>
<td><input type="text" id="txtOperand1" name="txtOperand1" /></td>
</tr>
</table>
</form>
</body>
</html>
To help you add a text box to a Web form, the HtmlHelper class is equpped with a method named TextBox. Its syntax is:
public Microsoft.AspNetCore.Html.IHtmlContent TextBox(string expression,
object value,
string format,
object htmlAttributes);
When calling this method, pass a first argument as the HTML's id/name attribute you would give to the control. Pass a second argument as the HTML's value attribute you would give to the control. Pass a third argument for the other HTML attributes, including CSS formatting, to the control.
Adding a Label
A label is text that accompanies a control on a webform. You can simply type such text on a webpage but, to let you create an explicit label, the IHtmlHelper interface is equipped with a method named Label. Its syntax is:
public Microsoft.AspNetCore.Html.IHtmlContent Label (string expression, string labelText, object htmlAttributes);
When calling this method, pass a first argument as the text that will display for the label. Pass a second argument to specify the control, such as a text box, that the label is associated with. Pass a third argument to add other HTML attributes such as CSS formatting to the label.
A Text Area
A text box is control that displays one line of text. If you want an edit control that can handle many lines or paragraphs, create a text area. To do this in HTML, create a <textarea> atag. To let you create a text area, the IHtmlHelper interface is equipped with a method named TextArea. Its syntax is:
public Microsoft.AspNetCore.Html.IHtmlContent TextArea (string expression, string value, int rows, int columns, object htmlAttributes);
Accessing a Web Form and its Contents
A Button to Submit a Web Form
To provide interactivity to a webpage, you can create a webform as part of the HTML code of the webpage. To prepare the interactivity of the webform, you can add a button or link to the form so that the user can click that link or button. Here is an example of a button added to a Web form:
@page
@model Valuable.Pages.CreatureModel
@{
}
<form method="post" name="frmExercise">
<table style="width: 300px">
<tr>
<td style="width: 100px">Number 1:</td>
<td><input type="text" id="txtOperand1" name="txtOperand1" style="width: 100px" /></td>
</tr>
<tr>
<td>Number 2:</td>
<td><input type="text" id="txtOperand2" name="txtOperand2" style="width: 100px" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Add" name="btnCalculate" /></td>
</tr>
<tr>
<td>Result:</td>
<td><input type="text" id="txtResult" name="txtResult" style="width: 100px" /></td>
</tr>
</table>
</form>
When your visitor clicks such a button, you must write code that would perform the necessary operations. When the user clicks the button, it is said that the user is requesting some feedback from you. Tu support such requests, or to assist you in handling the visitor's requests, the .NET Framework provides a class named HttpRequest. To give you access to this class, the PageModel class is equipped with a property named Request. The Request property produces an HttpRequest object.
Accessing the Controls of a Form
A Web form is a section of a webpage made of Web controls. To keep track of its controls, a form holds a collection of those controls. To support the collection of controls on a Web form, the .NET Framework provides an interface named IFormCollection. To let you access the controls of a form, the HttpRequest class is equipped with a member named Form. This member is of type IFormCollection. The HttpRequest.Form member gives you access to each control that is positioned in the form on the webpage where this member is accessed. To access a control, first type Request.Form[]. In the square brackets, type a couple of double-quotes, as in Request.Form[""]. In the double-quotes, type the identifier of the Web control, as in Request.Form["control-identifier"].
Practical Learning: Completing the Design
@page
@model Introduction.Pages.WaterMeters.CreateModel
@{
}
<h1 class="ta-center fw-bold">Water Meter Setup</h1>
<hr />
@using (Html.BeginForm())
{
<div class="form-holder">
<div class="row g-3 align-items-center">
<div class="col-md-4">
<label class="col-form-label">Meter Id:</label>
</div>
<div class="col-md-8">
<input class="form-control" />
</div>
</div>
<hr />
<div class="row g-3 align-items-center">
<div class="col-md-4">
<label class="col-form-label">Meter #:</label>
</div>
<div class="col-md-8">
<input class="form-control" />
</div>
</div>
<hr />
<div class="row g-3 align-items-center">
<div class="col-md-4">
<label class="col-form-label">Make:</label>
</div>
<div class="col-md-8">
<input class="form-control" />
</div>
</div>
<hr />
<div class="row g-3 align-items-center">
<div class="col-md-4">
<label class="col-form-label">Model:</label>
</div>
<div class="col-md-8">
<input class="form-control" />
</div>
</div>
<hr />
<div class="row g-3 align-items-center">
<div class="col-md-4">
<label class="col-form-label">Meter Size:</label>
</div>
<div class="col-md-8">
<input class="form-control" />
</div>
</div>
<hr />
<div class="row">
<div class="col-md-5">
<a asp-page="Index">Water Meters</a>
</div>
<div class="col-md-7">
<input type="submit" value="Register Water Meter" class="btn btn-primary" />
</div>
</div>
</div>
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Stellar Water Point</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/Introduction.styles.css" asp-append-version="true" />
</head>
<body>
<header class="common-font">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">Stellar Water Point</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/WaterBills/Index">Water Bills</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Customers/Index">Customers</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/WaterMeters/Index">Water Meters</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container common-font">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="footer">
<div class="container">
<p class="common-font ta-center">© 2023 - Stellar Water Point - <a asp-area="" asp-page="/Privacy">Privacy</a></p>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<main class="common-font">
<div class="text-center">
<h1 class="display-4 fw-bold">Stellar Water Point</h1>
<p class="lead">Stellar Water Point is a community-based company that commercially distributes water to customers in need. Our water process is socially responsible and community oriented.</p>
</div>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="bordered" src="../images/WaterBills.png" alt="Stellar Water Point">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Water Bills</a></h5>
<hr />
<p class="card-text">Water bills are processed in a timely and responsible manner, applying only the strictest, regular, and lawful rules.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="bordered card-img-top" src="../images/Customers.png" alt="Card image cap">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Customers Accounts</a></h5>
<hr />
<p class="card-text">Water bills are sent in a trimester-base to each of our customers who holds an account with us, all for good service.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="bordered card-img-top" src="../images/WaterMeter.png" alt="Card image cap">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Water Meters</a></h5>
<hr />
<p class="card-text">We use industry standard water meters that are regularly government inspected for their accuracy and precision.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img class="card-img-top bordered" src="../images/Community.png" alt="Card image cap">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Community Services</a></h5>
<hr />
<p class="card-text">Stellar Water Point is a community-oriented company that works withn various local activities and authorities.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img class="card-img-top bordered" src="../images/LegalAffairs.png" alt="Card image cap">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Legal Affairs</a></h5>
<hr />
<p class="card-text">Issues of regulations and government affairs are addressed here. This is available for employees, contractors, etc.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img class="card-img-top bordered" src="../images/Employees.png" alt="Card image cap">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Employees Portal</a></h5>
<hr />
<p class="card-text">This is a central area form employees to access the company resources such as time sheets, payroll, benefits, etc.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>|
|
|||
| Previous | Copyright © 2001-2023, C# Key | Saturday 17 December 2022 | Next |
|
|
|||