Are you ready to find out what’s cooking on the ASP.NET Web Forms scene and how it will impact the web development in Visual Studio 2019 and beyond, and particularly the Telerik UI for ASP.NET AJAX suite?
If you are curious to learn, check out this blog post where we will take a tour in the following topics:
Web Live Preview (WLP) is a Visual Studio (VS) add-on that enables real-time mapping between your source code and the rendered HTML in the browser. When viewing your web app, you can select elements in the browser just like in DevTools and the IDE will automatically show you the code that was executed to generate the element. And vice versa: If you edit the source in VS, the web app will automatically be updated. The idea of the tool is to be accessible (a trend across the whole Microsoft portfolio) and to follow the modern web standards.
That’s not all. WLP allows you to configure the settings (properties, databinding and so on) of the ASP.NET Web Forms components. This is applicable for the Telerik UI ASP.NET AJAX controls as well, allowing you to configure them directly from your browser via the provided Action Panel (Tasks menu with control’s properties—very similar to the smart tag we are already familiar with the VS Designer). Isn’t it great and time-saving?
It is also worth mentioning that, unlike the VS Designer which is heavily outdated, Web Live Preview will receive full support and updates in the future versions of Visual Studio. The community is already asking and hoping to get Web Live Preview enabled for other web project types like Blazor and ASP.NET Core, where the tool is not yet available and its potential and usability will be huge.
Follow the steps below to play with the tool:
You can obtain and install the WLP add-on from the Visual Studio marketplace:
Once installed, the WLP give you a new “Edit in Browser” right-click option within the context menu of ASPX page in the Source mode as well as in the Solution Explorer:
This option will load the page in a special mode within your default browser, where you can select elements and Web UI controls with the mouse and modify their properties and text:
The selection in the browser is automatically synchronized within your source code in Visual Studio. If you select a UI control in the page, for example RadGrid (more on it in the next section) or asp:DataGrid and change its properties from the WLP Action Panel, the properties will be reflected to the Source right away. The opposite is valid too—the changes in the source will be reflected in the browser too.
It is a real honor for Telerik team at Progress to take part in this important and useful opportunity and be among the pioneers in introducing support for Web Live Preview for the Telerik UI for ASP.NET AJAX toolkit.
Let make a quick demo on the current level of support:
Figure 1: Web Live Preview allows you to change the properties of Telerik components through the browser.
Since it is a two-directional process, if you edit the property values in the source, they will be updated in the Action Panel too.
Figure 2: Bind RadGrid through the Web Live Preview Action Panel.
Figure 3: CSS Auto-sync in action.
While the WLP is currently in preview stage, Microsoft is devoted to its quality, and I can confirm that many reported bugs were fixed in a relatively short time during our collaboration with them. The tool already offers a good level of support for many Telerik UI for ASP.NET AJAX controls and allows configuring their settings directly from the browser. Some of the features like the custom editor for setting the Skins are currently in development and others still are not available or don’t yet work. This, of course, is temporary and about to change in the upcoming updates of the tool.
Here is the moment to invite everybody who’d like to take part in improving Web Live Preview to let us know by opening a General Feedback ticket from your Telerik.com account. The sole prerequisite is to have an existing ASP.NET Web Forms application with up-to-date Telerik AJAX components you’d like to share with us for testing purposes. Of course, we will be glad to receive any feedback you may have so that we can share it with WLP team and help them out making the tool usable for every developer in the Microsoft ecosystem.
Let me give you a few more resources for WLP that you might find useful:
Rumen Jekov (@Rumen_Jekov) started his career at Telerik’s ASP.NET team in 2004 as a tech support engineer and passed through the position of a team lead to a product manager. He has answered more than 51,500 tickets helping customers to achieve their goals. Presently, he is a product owner of Telerik UI for ASP.NET AJAX and a manager of the AJAX crew at Progress. Off work, he enjoys traveling across the globe, watching movies and tech shows, reading books and listening to podcasts.
Subscribe to be the first to get our expert-written articles and tutorials for developers!