Tips for Migrating from Web Forms to Razor Pages
Quick Start Guide | |
---|---|
What You Will Need |
Visual Studio ComponentOne ASP.NET MVC Edition |
Controls Referenced | |
Tutorial Concept | Tips on migrating from ASP.NET Web Forms to ASP.NET Core by looking at four common aspects of the application. |
ASP.NET web forms were the precursor to the current ASP.NET core. It was introduced as a convenient event-driven development model for writing web applications for users who wanted to migrate their WinForms applications by providing the same interface in web pages. However, technology has evolved rapidly over the years, and heavier frameworks have given way to lighter frameworks that scale up quickly and must be platform-independent.
To support other platforms besides Windows, Microsoft has developed a lightweight framework that can be deployed on non-Windows platforms called .NET Core. This framework is designed to be platform-independent and provides developers with a versatile tool for building web applications that can be deployed across multiple platforms.
Ready to Try It Out? Download ComponentOne Today!
Understanding the Differences Between Web Forms and Razor Pages
Microsoft introduced Web Forms in ASP.NET as an event-driven programming model. It offers a set of server controls that enable developers to build web pages equivalent to Windows Forms applications. Web Forms includes many details of HTML, CSS, and JavaScript, allowing developers to focus on application logic.
On the other hand, Razor Pages is a lightweight web framework introduced in ASP.NET Core. It is designed to be simple and user-friendly, making it an excellent choice for building web applications. It uses the Razor syntax to create HTML templates, which are combined with C# code to create dynamic web pages.
While there are similarities between Web Forms and Razor Pages, there are also significant differences between the two frameworks. Web Forms provides a more abstract way of building web pages, while Razor Pages require developers to have a deeper understanding of HTML, CSS, and JavaScript. Additionally, Razor Pages are more modular and testable than Web Forms, making it a better choice for building modern web applications.
This article will explore some similarities and differences between Web Forms and Razor Pages. We will cover:
- Processing Request
- Master Pages vs. Layout
- Model Binding
- UserControls
- ASP.NET Core Migration Tips
- Migrating ComponentOne Controls
Processing Request
An ASP.NET Web Forms application consists of a .aspx page for the template code and a Code Behind page (.aspx.cs page) for processing its page. This page is inherited from System.Web.UI.Page. The code behind the page includes a Page_Load lifecycle hook that is triggered on every request made to the server, including both Post back and non-Post back requests, such as Callback requests.
namespace GridViewIntro
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData(C1GridView1);
}
}
….
}
}
In contrast to Web Forms, a Razor Page inherits from the PageModel class. This class includes OnGet and OnPost methods, which are triggered for GET and POST requests made to the server, respectively. Along with these methods, we can define public properties on the page that will be used in the content page (UI).
namespace FlexGridIntro.Pages
{
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
private testdbContext db;
[BindProperty]
public DateTime Today { get; set; }
public IndexModel(ILogger<IndexModel> logger, testdbContext _db)
{
db = _db;
_logger = logger;
}
public void OnGet()
{
People = SampleData.GetData(10);
Today = new DateTime(2020, 06, 07);
}
public void OnPost()
{
if (ModelState.IsValid)
{
//code
}
}
}
}
Master Pages vs. Layout
Web Forms applications use Master Pages to maintain a common UI for the entire application. This includes elements such as the main menu, navigation menu, header, footer, and more. In contrast, Razor Pages use Layout to achieve the same goal of consistent page content across the application.
Both Master Pages and Layouts utilize the same concept of writing consistent content in a single place. In Master Pages, a Placeholder is used to specify where the target page content should be placed within the master page. Similarly, in Layouts, a @RenderBody() directive is used to specify where the page's content should be inserted within the layout.
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
While the Razor pages use the RenderBody to place the target page content.
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
Model Binding
In Web Forms, Model Binding is achieved using the Request object. Developers can access values from the Request object and manually bind them to model properties. However, this process can be time-consuming and prone to errors. The developer is responsible for ensuring that the mapping of values to the correct properties is handled correctly.
public class Organization
{
public string Name { get; set; }
public string Email { get; set; }
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
var organization = new Organization();
organization.Name = Request.Form["Name"];
organization.Email = Request.Form["Email"];
// code to save in DataBase
}
In contrast, Razor Pages use a more streamlined approach to Model Binding. The framework automatically maps properties to the Model based on naming conventions, making it a simple and less error-prone process for developers. Furthermore, the binding behavior can be customized using attributes such as [BindProperty] or [Bind].
namespace FlexGridIntro.Pages
{
public class IndexModel : PageModel
{
[BindProperty]
public DateTime Today { get; set; }
}
}
<input asp-for="@Model.Today" />
UserControls
In WebForms, the UserControl is a reusable UI component that allows you to create a custom control. It provides a set of properties, methods, and events, like a custom server control, but with a simpler development approach. To create a UserControl, you can create an ASP.NET User Control file (.ascx) in Visual Studio, which contains both HTML and server-side code for the control. After creating the UserControl, you can add it to a WebForm in the same way as any other server control.
<%@ Register TagPrefix="uc" TagName="MyControl" Src="~/Controls/MyControl.ascx" %>
The code snippet below registers the UserControl named "MyControl.ascx" located in the Controls folder and makes it available for use on the page. You can then add the UserControl to the page using the following code:
<uc:MyControl runat="server" />
This code instructs the page to use the registered UserControl with the "uc" tag prefix and "MyControl" tag name. The runat="server" attribute indicates that the UserControl will be processed on the server. You can place this code anywhere on the page where you want the UserControl to be rendered.
In Razor Pages, a Partial View is similar to a UserControl in WebForms. To create a Partial View, you need to create a Razor file with the ".cshtml" extension and define the UI component within it. Once the PartialView is defined, it can be used in other Razor Pages or Partial Views.
Use a Partial View in a Razor Page; you need to specify its path using the Html.Partial helper method. This method renders the Partial View at the specified path within the Razor Page.
For instance, let's say we have a Partial View named "_MyPartialView.cshtml" located in the "Shared" folder, and we want to use it in a Razor Page. To do this, we can use Html.Partial helper method like this:
@Html.Partial("~/Views/Shared/_MyPartialView.cshtml")
This will render the Partial View on the page at the location where the Html.Partial method is called. We can also pass data to the PartialView by passing a model to it. For instance, if we have a model named MyModel, we can write the code like this:
@Html.Partial("~/Views/Shared/_MyPartialView.cshtml", MyModel)
Partial Views in Razor Pages offer a flexible way to create reusable UI components that can be used across multiple pages.
ASP.NET Core Migration Tips
After finding the similarities between the WebForms and Razor pages, we would understand how the application’s technology can be changed and migrated to the latest technology. We will discuss here the required steps to migrate the application.
Step 1: Evaluate the Existing Codebase
The first step in the migration process is to evaluate the existing Web Forms application code to determine which application parts need to be migrated. This includes analyzing the application's business logic and user interface. Identify which parts of the code can be reused and which must be rewritten.
Step 2: Refactor the Business Logic
Once you have evaluated the existing application code, the next step is to refactor the business logic to make it more modular. This requires finding the application logic from the current Web Forms application and rewriting it as per the need to put it at its appropriate place in the Razor app. This code can then be used to create new Razor Pages and interact with them as needed.
Step 3: Create the Razor Pages
Create the Razor Pages that will replace the Web Forms pages by creating a new Razor Pages project. Add the necessary pages and components to the project. Make sure to use a consistent layout for the pages and components to ensure the application is easy to maintain and update.
Step 4: Migrate the User Interface
Migrate the user interface from the Web Forms pages to the Razor Pages by converting the HTML, CSS, and JavaScript code used in the Web Forms pages to the Razor syntax used in Razor Pages. It is essential to test the pages thoroughly to ensure they work correctly.
Step 5: Test and Refine the Application
The last step in the migration process is to test and refine the application to ensure it works correctly. This involves testing the application thoroughly to ensure all functionality works as expected. It is also important to get user feedback to identify any issues or areas that need improvement.
Migrating ComponentOne Controls
This section includes tips on migrating from a ComponentOne Web Forms control to ASP.NET Core. For example, we will use C1GridView to C1FlexGrid migration. C1GridView was the datagrid control for ASP.NET Web Forms (also known as Studio for ASP.NET Wijmo). It was based on the Wijmo 3 control of the same name. FlexGrid is the new flagship control for modern ComponentOne .NET applications.
Update Application References
Web Forms applications reference the C1.Web.Wijmo.Controls.* dlls. Replace this with the new C1.AspNetCore.Mvc package.
Tip: See How to Add ASP.NET MVC UI Controls to Your Web Applications
Add the ComponentOne TagHelper
The ASP.NET Core TagHelper feature provides a readable, HTML-like markup that enables developers and web designers to collaborate more closely and efficiently. If you’ve created an ASP.NET Core project template using Visual Studio, then open the Views/_ViewImports.cshtml file and add the following code:
@addTagHelper *, C1.AspNetCore.Mvc
Register Control Resources
When you create a new application using the ComponentOne MVC template, the resources required to use the ComponentOne ASP.NET Core controls get registered automatically. Otherwise, you need to register resources manually.
Open the Views/Shared/_Layout.cshtml file and add the following code between the head tags:
<c1-styles />
<c1-scripts>
<c1-basic-scripts bundles="Grid"/>
</c1-scripts>
This will only use the FlexGrid bundle, but if you want to use all ComponentOne controls, remove the bundles.
Add the FlexGrid Control to Your Razor Page
You can now add the FlexGrid control to your Razor page. First, add the necessary using statement to the top.
@using C1.Web.Mvc.Grid
Define the FlexGrid tags and include the @Html.AntiForgeryToken() token.
@Html.AntiForgeryToken()
<c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true">
<c1-flex-grid-column binding="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start" format=MMM d yy"></c1-flex-grid-column>
<c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Color"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
</c1-flex-grid>
Check out this resource to see a RazorPages demo.
Conclusion
Migrating from Web Forms to Razor Pages requires careful planning and execution. It is important to evaluate the existing codebase, refactor the business logic, create new Razor Pages, migrate the user interface, test and refine the application, and deploy it to the production environment. By following these steps, we can migrate our Web Forms application to the latest technology and take advantage of the benefits of the Razor Pages framework.
Ready to Try It Out? Download ComponentOne Today!