ASP.NET Web Forms modernization series, Part 3: UI layer

This is part 3 in a series of blog posts dedicated to ASP.NET Web Forms Мodernization. The series expands on the topics discussed in our Migration Guide: ASP.NET Web Forms to Modern ASP.NET whitepaper – a compilation of technical considerations for modernizing legacy .NET web applications gathered from our experience at Resolute Software doing many .NET modernization projects.

Here is a list of all articles in the ASP.NET Web Forms modernization series:

• Part 1 – Data Access Layer Considerations
• Part 2 – Business Logic Layer Considerations
• Part 3 – UI Layer Considerations (you are here!)

Coming up next (stick around!):

• Part 4 – Single Page Application Framework Considerations
• Part 5 – Server Application Considerations
• Part 6 – Testing, Deployment and Operational Considerations

ASP.NET Web Forms has been a popular framework for building web applications for many years. In May of 2022, Microsoft acknowledged that Web Forms were not going to go away in Visual Studio 2022. However, Microsoft recommended that developers switch to Blazor for new development. While Microsoft was careful to avoid words such as ‘deprecated’ when talking about Web Forms, the company did admit that the Web Forms framework support is limited to critical updates only. If you didn’t upgrade your UI development framework in 2022, it’s probably time to consider doing this now. The Web Forms framework isn’t getting any younger.

ASP.NET Web Forms showing its age

Web Forms is a limiting framework. On the deployment side, it only runs on Microsoft IIS, and requires installation of the full .NET framework. On the development side, Web Forms UI paradigm also contained the entire page in a <form> element. That limited the flexibility and extensibility of pages written with Web Forms. Cross-platform development was hard.

Moving on and modernizing your UI layer

If you want to break from the Microsoft ecosystem, upgrading from Web Forms is as good a time as any to do so (more on that later). But if you’d like to stick with the Microsoft .NET ecosystem, you have some great new options that make cross-platform development much easier.

It all starts with .NET Core, a lightweight, modular framework with no dependency on Windows. Among other technologies, it includes the Razor component library. Razor is a library of reusable UI components you can put together like LEGOS to make a UI. But don’t just put LEGOS together randomly. That never looks good. Take the time to understand the challenges updating the UI layer.

In this blog post, we share some of the best practices and techniques that we use at Resolute.

Understanding the challenges

Is modernizing going to bite you? What are the hard parts going to be? Learn about them now, and it may still be a challenge, but it won’t bite. Some of these challenges include:

Outdated design patterns

ASP.NET Web Forms heavily relies on the “postback” model, where the entire page is submitted back to the server on every interaction. This can result in slower page rendering and a less responsive user experience. However, you get spoiled, as everything is always updated. In more modern models, such as Single Page Applications, not everything updates automatically. Understand what you’ll need client-side and server-side to push content that has changed.

Limited support for modern UI fFrameworks

Web Forms primarily relies on server-side controls, making it challenging to incorporate modern client-side frameworks such as Angular, React, or Blazor seamlessly. Slipstreaming modern client-side UI frameworks into your current server-side code gradually will take some planning and thought. But it may be better than an all-at-one modernization plan. Or it may not.

Get some help to investigate this if the answer is not obvious in your situation. One huge mistake you can avoid is keeping all your UI logic tied to server-side code. Even if you want to roll out gradually, you really must adopt client-side frameworks like Blazor, Angular, or React, which offer more flexibility, modularity, and enhanced user experiences.

Designing responsive design

Web Forms was not designed with responsiveness in mind. Web Forms was designed primarily for a desktop market, so why would they have considered responsive design? However, the world we’re in today likely has more people accessing your data on mobile than on desktop. Modern frameworks make this much easier than the old Web Forms. Let the frameworks do the adaptive rendering. Consider what (if any) server-side layout code you must keep. Ditch the rest.

Modernization techniques and solutions

Introduction of client-side technologies

To enhance the user experience and improve performance, you’ll want to select a group of client-side technologies. There are two groups you can land in here. For the .NET and C# fans, the Blazor framework, and Razor libraries will be the way to go. If you have a big investment in JavaScript talent or just an ‘Anyone but Microsoft” preference, React and Angular frameworks are great solutions. Both stacks make UI development and make it easy to separate logic from UI.

Both stacks offer better workflow and visual appeal. But you may want to decide if you’re going to stick to a C# stack, a JavaScript stack, or if you’re going to mix and match. Going down this particular rabbit-hole is a blog post in itself. If you have doubts about the right answer here, give us a call. We can help.

Add templating engines to the CSS frameworks you may already use

For example, to use a CSS framework like Bootstrap, you can include the necessary CSS files or CDN links in your Razor views or layout files. This will bring in the styles provided by the framework, enabling you to utilize the framework’s pre-designed styles and components. Or, in your Razor views, you can apply CSS classes provided by the CSS framework to HTML elements.

By adding these classes to your Razor elements, you can leverage the framework’s styling and achieve the desired visual appearance. For example, you can apply Bootstrap’s CSS classes to format buttons, forms, navigation bars, and other UI components within your Razor views.

Progressive Web Applications (PWAs) and Single Page Applications (SPAs)

These are both modern web application architectures, but they serve different purposes and have distinct characteristics. This is also likely to start one of those developer religious wars, but it’s in your best interest to study the differences and choose the right one when modernizing. Progressive Web Applications (PWAs) focus on providing an app-like experience, offline capabilities, and cross-platform compatibility.

They leverage modern web technologies to deliver a consistent and reliable experience to users. Single Page Applications (SPAs) are web applications that provide a dynamic and interactive user experience by updating the content on the current page without full page reloads. SPAs are built using JavaScript frameworks and offer improved performance and responsiveness. While there can be overlap between the two, PWAs emphasize mobile app-like features and offline support, while SPAs focus on dynamic client-side rendering and interactivity.

Yeah, that sounds like work, but...

No, modernizing from ASP.NET Web Forms isn’t just buying the license and clicking Install. Modernizing done right will need you to do some homework first. But modernizing the UI layer from ASP.NET Web Forms is important if you’re going to adapt to the evolving landscape of web development. I suspect that not modernizing for another year or two will become a textbook definition of Technical Debt.

By leveraging the new frameworks available now, developers can not only enhance the user experience and improve performance but modernizing will make developers lives easier when it comes time to add new features in the future.

So, consider the trade-offs and challenges associated with each modernization technique and make your roadmap. That roadmap may keep you from getting stuck in a swamp where many more things are waiting to bite you.

Did you get your copy of the ASP.NET Web Forms to Modern ASP.NET migration guide? Download it now.