17年多前，当我在ASP开始我的开发生涯时。NET Web窗体作为ASP的一部分。NET开发团队中，我的第一步是在Visual Studio Designer的卓越帮助下开始的，我们很多人都是这样做的：我从工具箱中拖放著名的控件，从操作面板（也称为智能标记）配置它们的属性，通过双击组件创建服务器事件等等。如此轻松地创建页面的UI真是太神奇了。听起来我们很多人都很熟悉，对吧？

如今，经过这么多年的成功服务，Visual Studio Designer有点过时了，它显示了浏览器不同的表现形式和外观结果，难以维护，也无法访问。好消息是，微软已经考虑到了这个问题，并通过Web Live Preview（WLP）提供了一个有价值的解决方案。

WLP是块上的新孩子，是高贵的Visual Studio Web Forms Designer的现代继承者。它不仅提供了设计器支持的所有优秀功能，还提供了更多功能。后继者允许您实时查看您对当前正在处理的网页和UI组件的设计、布局和设置所做的配置更改，包括内置的辅助功能支持，以及Microsoft的频繁更新和改进。

这不是很棒吗我听到你说，是的，是的！那么，让我们深入了解安装、使用和新功能。

在我们开始了解最新版本WLP的优势之前，您可能有兴趣查看下面关于如何安装、启用和使用该工具的快速入门说明：

安装

Web Live Preview内置于Visual Studio 2022中。如果尚未启用，您可以从“工具”->“选项”->“Web窗体设计器”->选择“Web Live预览”选项并按“确定”手动激活它。您也可以通过在IDE搜索栏中键入“Web窗体设计器”来调用“选项”对话框。

如何使用Web Live预览

新的设计器允许您在VisualStudioIDE中直接使用它。对于所有现有的Web窗体应用程序来说，令人惊讶的是它不仅支持本地ASP。NET Web窗体组件，也是最流行的Web窗体（AJAX）供应商的第三方UI控件。为了演示，我将使用一个示例Outlook-inspired Web Forms应用程序在…的帮助下创建ASP的Visual Studio Extensions for Telerik UI。NET AJAX（网络AJAX），但您可以使用自己的ASP进行测试。NET Web Forms解决方案和您选择的其他第三方工具。

要在Visual Studio中启动WLP：单击拆分或设计按钮，就像使用老式的Visual Studio Web Forms Designer一样。

WLP功能以及与常规和第三方组件的集成

Web Live Preview提供了许多可见和隐藏的宝石，这些宝石将为您节省大量时间，并将您的生产力提升到一个新的水平：

Visual Studio工具箱集成–许多开发人员的首选选项，允许您通过拖放ASP快速插入。NET组件集成到网页和用户控件中。过来看：

WLP工具栏和按钮()按照屏幕截图中显示的顺序进行解释：

• • 刷新（Ctrl+Shift+R）–刷新WLP屏幕
  • 切换设计模式（Ctrl+Shift+D）–在设计器中打开/关闭WLP功能
  • 显示空元素（Ctrl+Shift+M）–非常方便的前端开发功能

使用“实时数据”按钮（Ctrl+Shift+U）–默认情况下，WLP以“预览”模式渲染，这不需要站点运行，只需使用设计时间html而不是实时数据。启用该功能以从服务器获取和加载真实数据。

查看布局和渲染中的差异，具体取决于“使用实时数据”状态：

操作面板（智能标记）–您可以通过智能标记配置UI组件，智能标记通常包含最重要的属性和设置。在下面的示例中，您可以看到如何打开GridView操作面板并选择新的数据源：

• 所见即所得–由于WLP使用WebView2（来自Microsoft Edge），因此您在Visual Studio中的WLP设计器与Chrome/Edge中看到的几乎没有区别。与旧的Visual Studio Designer相比，这是一个巨大的改进。
• 文本编辑–通过双击div、span和其他HTML元素，可以直接编辑它们的文本。准备就绪后，单击可编辑元素外部，更改将应用于页面标记。

• 添加默认处理程序–双击所选UI控件即可完成此操作。这将创建处理程序并将选择移动到codebehind页面，如下所示：

• 跨页面自动同步选择–无论您在WLP Designer中选择什么元素或控件，它都会在标记视图中自动被选中。与Chrome的DevTools类似，但能够显示所选元素的类型以及UI控件的智能标记。如果选定的元素位于母版页上，则会在Visual Studio中打开母版页，并自动选择元素，这非常方便，尤其是在处理大型项目时，您不确定要查找的元素/UI组件在代码中的位置。

• CSS自动同步–在输入CSS有效且没有语法相关错误的情况下，立即自动刷新和实时更新CSS和外观。在这个视频示例中，我将向您展示如何更新按钮控件的字体图标并实时应用控件周围的边框。

• 在WLP的编辑和预览模式之间切换很简单，通过提供的启用/禁用检查器按钮即可实现。当您想禁用插件并能够与UI和页面交互时，这很方便。例如，通过关闭Inspector，您将能够执行按钮单击，而不是选择按钮。

在左侧，Inspector已启用，您可以选择和编辑元素，并使用控件Smart标记。右侧的Inspector（WLP）被禁用，您可以作为最终用户与页面交互，例如通过单击Button控件提交页面。

• 无障碍支持–与经典的Visual Studio Designer相比，WLP的另一个重大改进是它提供了屏幕阅读器支持和键盘快捷键，便于与功能和标记导航器进行交互。您可以使用以下快捷方式节省时间：
  • Ctrl+Alt+M切换Inspector菜单
  • 箭头键和Enter/Esc键用于导航菜单
  • 输入/退出以关闭对话框
  • Ctrl+Alt+E进入简单文本编辑模式并退出
  • Shift+Alt+左/右箭头在标记导航器层次结构中移动
  • 上/下/左/右箭头键在设计图面中的选定图元之间移动

布局设置–WLP设计器可以在屏幕上脱开并向不同方向移动。您还可以将其固定到您选择的特定区域：

抓住Visual Studio屏幕中心的设计器选项卡，并将其放在所需的象限上：

正如您所看到的，Web Live Preview是一个强大的工具，它为所有现有的ASP带来了新的活力。NET Web窗体应用程序和Razor页面，并承诺支持ASP。NET Core和Blazor的未来！我渴望在这些目前还没有Visual Studio Designer的平台上试用它。

总结

正如您所见，Web Live Preview是一个强大的用户体验可用性工具，它提供了浏览器开发工具（DevTools）的一些强大功能：

• 您可以选择将自动同步Visual Studio的HTML元素和控件
• 您可以实时编辑页面、UI和HTML的CSS，并直接在Visual Studio Designer中看到自动同步的更改。

但这还不是全部，您还可以：

• 配置Microsoft的ASP。NET Web窗体本机和第三方UI组件可以直接在Visual Studio设计模式下使用它们的操作面板（智能标记），这是一个新的很棒的东西。
• 通过避免在Visual Studio和浏览器之间来回切换，可以长期节省宝贵的时间。
• 使用自动同步功能打开不同的浏览器和移动设备，它们将同时自动更新。这是一种很好的调试（故障排除）技术，可用于轻松找出代码和样式表中浏览器和设备特定的故障。

通过为Web表单和MVC提供长期支持，Web Live Preview承诺了一个光明的未来，我急切地等待它的正式发布和即将到来的所有新功能。

欢迎反馈，如果您想与我们分享您的反馈，可以在博客的评论部分或使用Visual Studio的“发送反馈”功能：

关于作者

Rumen Zhekov是Progress的软件工程经理。他负责Telerik ASP。NET AJAX（Web窗体）套件，具有18年以上ASP经验。NET字段。下班后，他喜欢家人，旅行，参加科技节目，读书，听播客。

帖子通过Web Live预览和Telerik提高您的工作效率首次出现于Visual Studio博客.