WebForms Core is a new technology for manipulating HTML tags through server-side code, developed by Elanat. This technology is available in all server-side programming languages. This technology is integrated into the core of the CodeBehind framework and you can use this framework under .NET. However, in this article, we want to teach you how to use WebForms Core technology in Razor Pages.
Before we start the article, I must say that Razor Pages has a weak architecture and you can never maneuver it well. Razor Pages has limitations and its flexibility is low.
To use WebForms Core technology in Razor Pages, you need to get the WebForms class on the server and the WebFormsJS library on the client and add it to the project.
The WebForms class on the server can be downloaded from the following link (C# programming language):
https://github.com/elanatframework/Code_behind/blob/elanat_framework/class/WebForms.cs
You can also download the WebFormsJS library from the following link:
https://github.com/webforms-core/Web_forms/blob/elanat_framework/web-forms.js
We added the WebForms class to the Razor Pages project.
We also placed the WebFormsJS library in the wwwroot/script path and added the following script tag in the layout section.
<script src="~/script/web-forms.js"></script>
Note: The examples you will see below are simple; please note that the WebForms Core technology can easily handle the most complex situations.
Example 1: Login
View
@page
@model LoginModel
<form method="post" action="">
<input asp-for="Username" placeholder="Username" />
<input asp-for="Password" type="password" placeholder="Password" />
<input type="submit" value="Login">
</form>
Model
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc;
using CodeBehind;
public class LoginModel : PageModel
{
[BindProperty] public string Username { get; set; }
[BindProperty] public string Password { get; set; }
public IActionResult OnPost()
{
WebForms form = new WebForms();
form.AddTag("<body>", "b");
if (Username == "admin" && Password == "123")
{
// Store a flag in TempData or Session
TempData["LoggedIn"] = true;
form.SetBackgroundColor("<b>-1", "lightgreen");
form.SetText("<b>-1", "You have successfully logged in.");
form.Delete("<form>");
form.AddTag("<body>", "br");
form.AddTag("<body>", "a", "LoginLink");
form.SetAttribute("LoginLink", "href", "/Admin");
form.SetText("LoginLink", "Click on this link to go to the admin page.");
}
else
{
form.SetBackgroundColor("<b>-1", "red");
form.SetText("<b>-1", "The username or password is incorrect.");
}
form.Delete("<b>-1");
form.AssignDelay(3);
return Content(form.Response());
}
}
Explanation:
-
form.AddTag("<body>", "b"): Adds a<b>tag to show messages dynamically. -
SetBackgroundColor()andSetText(): Change UI from server logic. -
form.Delete("<form>"): Removes form after successful login. -
AssignDelay(3): Delays the removal of the feedback message by 3 seconds. -
form.Response(): Sends a response that the WebFormsJS client interprets and applies to the DOM.
The GIF image below shows how the above example works.
What does the server respond to the client? (Response after success)
[web-forms]
nt<body>=b
bc<b>-1=lightgreen
st<b>-1=You have successfully logged in.
de<form>=1
nt<body>=br
nt<body>=a|LoginLink
saLoginLink=href||/Admin
stLoginLink=Click on this link to go to the admin page.
:3)de<b>-1=1
Example 2: Event
Because in the Razor Pages framework we cannot add a string from the Model to the View page, we had to add an attribute to the Model class and place it in the View page.
View
@page
@model EventModel
<h3>Move the mouse cursor here!</h3>
@Html.Raw(Model.HtmlContent)
Model
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc;
using CodeBehind;
public class EventModel : PageModel
{
[BindProperty(SupportsGet = true)] public bool Change { get; set; }
public string HtmlContent { get; set; }
public IActionResult OnGet()
{
WebForms form = new WebForms();
if (Change)
{
form.SetBackgroundColor("<h3>", "violet");
form.SetHeight("<h3>", 200);
form.SetText("<h3>", "Hello WebForms Core!");
form.RemoveGetEvent("<h3>", HtmlEvent.OnMouseEnter);
HttpContext.Response.WriteAsync(form.Response());
return new EmptyResult(); // Prevent Razor from continuing
}
else
{
form.SetBackgroundColor("<h3>", "orange");
form.SetGetEvent("<h3>", HtmlEvent.OnMouseEnter, "?Change=true");
HtmlContent = form.DoneToWebFormsTag();
return Page();
}
}
}
Explanation:
-
SetGetEvent(): Adds a client-side event that triggers a new GET request. -
?Change=true: On hover, sends query to server to perform update. -
RemoveGetEvent(): Disables the event after one trigger (one-time interaction). -
HtmlContent = form.DoneToWebFormsTag(): Injects custom virtual tags into the page.
Please note that when you want to use the WebForms class the first time the page loads, you should use the "DoneToWebFormsTag" method; for responses where the View does not change, you should use the "Response" method.
The GIF image below shows how the above example works.
What does the server respond to the client?
[web-forms]
bc<h3>=violet
sh<h3>=200px
st<h3>=Hello WebForms Core!
Rg<h3>=onmouseenter
Note: In the previous example, we definitely needed to request the server to login to the server, and the WebForms Core approach had advanced functionality. In this example, we need a server response to respond to the mouse entry event. However, please note that in WebForms Core technology, we can use advanced features such as "TagBack" and multi-response so that we do not need to request the server.
Conclusion
WebForms Core enhances Razor Pages by:
- Simplifying Complex UI Logic: Direct server-side DOM manipulation avoids cumbersome JavaScript.
- Event Handling: Server-triggered events replace client-side callbacks.
- Dynamic Updates: Modify elements without full-page reloads.
Top comments (0)