m0cvoantennas

A few years ago I completed a course with a local college which included, amongst other things, developing websites using HTML, CSS, JavaScript, SQL and PHP. Whilst this is all well and good, it does mean that you need to have a thorough understanding of each of these different languages (yes I know SQL is a structured database query language but you still need to understand the structure and details of it). It also meant that you had to additionally incorporate extended security measures to protect against hacking. Quite an ask for someone who has worked mostly through C based languages (C, C++ and C#).

Anyway, Microsoft came up with the .Net open source SDK and within this, asp.net and asp.net core which enabled the creation of web pages and apps using a hybrid combination of HTML and C# known as .cshtml or Razor pages. This means, in effect, that you still use HTML to write the front end customer facing pages but all the back end work is done using C#. In place of SQL and PHP to incorporate data base storage and retrieval, you use Entity Framework which provides a CRUD (Create Read Update Delete) architecture that most C# developers/programmers should understand. The choice is also there to use MVC (model View Controller) or not depending on your needs/preferences. ASP.net pages also have strong security features built in as standard.

Let’s have a look at a simple sample app.

fig.1 The index page Index.cshtml

fig.2 The corresponding model page Index.cshtml.cs

The above images are screen shots from Visual Studio 2022 showing the simple make up for a basic input on an HTML page (Index.cshtml) and the function behind in C# (Index.cshtml.cs) which is known as the Model. The resulting page is shown in fig.3.

fig.3 The resulting web app.

Let’s make it a little easier and break down the code. First looking at the Model – Index.cshtml.cs – which consists of C# code:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SampleApp.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        //We will need the string Message to interact with the form on the index page
        public string Message { get; set; }

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }
        
        //This is the function that is enabled by the form in the Index page (index.cshtml)
        public void OnPostRegister(string email)
        {
            Message = $"You registered {email} for newsletter updates. ";
        }
    }
}

We can ignore the logger for now but you will see that an universal string is created and named Message. Then a function (OnPostRegister) is created that will update the value of the string Message. But where does the email value come from? For that we will need to look at the front end HTML page – Index.cshtml:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@* This form is used to enable the function created in the IndexModel (Index.cshtml.cs) *@
<div class="col">
    <form method="post" asp-page-handler="Register">
        <p><br />To register please enter your e-mail:</p>
        <input name="email" />
        <button>Register</button>
    </form>
    <p>@Model.Message</p>
</div>

The first line (@page) defines it as a routable page. Any none-html code is preceded with an @ symbol to define it as such. The next line instructs it where the Model for the page can be found. ViewData is a weakly typed dictionary data-pair that is used to provide the pages title. We then have a simple HTML form consisting of a single input box for an email and a button. The form’s method is “post” as this prevents any input appearing in the URL (security) as it would were a “get” method used. The asp-page-handler links it with the function created in the Model – OnPostRegister(string email) – and the email input is linked to the email variable within this function that is added to the string. The final bit – <p>@Model.Message</p> – outputs the complete message from the Model, including the email that was input, to the screen as in fig.4:

fig.4 screenshot showing message appended to the screen following button click.

I hope this simple example helps you on the way to pushing the boundaries and creating some amazing apps and websites in the future. Any web apps or websites created using this technology should be published either to Microsoft Azure (cloud) or to a Microsoft Server. I do know that https://www.ionos.co.uk/ provide a means to host on a Microsoft Server. A complete website written entirely using asp.net razor pages can be found at https://m0cvoantennas.co.uk/.