首页 > 其他分享 >官宣!DevExpress Blazor UI组件,支持全新的.NET 8渲染模式

官宣!DevExpress Blazor UI组件,支持全新的.NET 8渲染模式

时间:2023-12-22 09:55:40浏览次数:46  
标签:渲染 静态 官宣 应用程序 UI DevExpress 组件 Blazor

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生Blazor UI组件(包括Pivot Grid、调度程序、图表、数据编辑器和报表等)。

.NET 8为Blazor引入了令人兴奋的重大变化,统一了它的托管模型,并采用了服务器端渲染。在这篇文章中,我们将普及一下这个新概念,并帮助您了解如何在Blazor应用程序中利用它们。

获取DevExpress v23.2正式版下载

DevExpress技术交流群9:909157416      欢迎一起进群讨论

交互式渲染模式和静态服务器端渲染

.NET 8引入的主要变化之一是新的渲染模式:

  • 静态(SSR)
  • 交互式服务器
  • 交互式WebAssembly
  • 自动交互

我们对静态服务器端渲染进行了大量的关注——因为它是.NET 8中Blazor应用程序的默认渲染模式。

对于使用现代JavaScript框架的人来说,服务器端呈现(SSR)是一种很熟悉的技术。通过SSR,服务器可以预渲染页面并将其作为完全形成的HTML发送到浏览器。.NET 8通过向Blazor应用程序引入静态服务器端渲染的概念采用了这种技术,用.NET 8创建的新Blazor应用程序默认不会打开WebSocket连接,相反Blazor页面完全在服务器上呈现,并作为静态HTML发送给客户端。这提供了以下优点:

  • 通常静态页面加载速度更快。
  • 具有静态页面的应用程序不需要运行服务器连接或大量的WebAssembly文件下载。
DevExpress Blazor UI组件产品图集

虽然静态服务器端渲染提供了优势,但它也有一定的局限性:

  • Blazor组件不是交互式的 - 它们不会触发事件,也不会在第一次渲染后执行相关的C#代码。
  • 与服务器之间导致页面更改的任何通信都需要通过HTTP请求实现。

依赖于交互式组件和现有Blazor代码的大型Blazor应用程序可能不容易移植到静态SSR,当然在.NET - Razor Pages或MVC中也有提供类似静态方法的现有技术。静态SSR的主要好处是,它可以在同一个应用程序中与交互式呈现(WebAssembly或Server)相结合。应用程序的外壳、起始页面和其他基本页面可以是静态的,但是一旦用户导航到需要交互的页面,应用程序将打开SignalR电路或启动WebAssembly运行时。

DevExpress Blazor UI组件产品图集
新的渲染模式和DevExpress组件

在v23.2中,所有DevExpress Blazor UI组件都已经过测试,并支持此处提到的所有交互式渲染模式。

虽然大多数DevExpress Blazor组件是交互式的,但其中一些组件可以是静态的,并使用静态服务器端渲染来呈现它们的内容。我们已经为以下组件实现了对静态服务器端渲染的支持:

为了简化Blazor UI组件与.NET 8中引入的项目结构的主要变化集成,我们在v23.2中更新了DevExpress项目模板。更新后的模板现在演示了在不同的渲染模式下使用DevExpress Blazor组件,基于模板创建的最终应用包括:

  • 静态SSR模式下的GridLayout组件(用于定义应用程序布局)。
  • 静态SSR模式下的Menu组件(在应用程序中导航)。
  • 计数器页上来指定的交互式呈现模式显示的Button组件。
  • Interactive Server模式下Weather页面上的Grid组件。
DevExpress Blazor UI组件产品图集

更多DevExpress线上公开课、中文教程资讯请上中文网获取

标签:渲染,静态,官宣,应用程序,UI,DevExpress,组件,Blazor
From: https://www.cnblogs.com/AABBbaby/p/17920611.html

相关文章

  • 【c# winform】devexpress treeList右键菜单添加按钮
    本文提供俩种不需要手动添加编辑控件方法。方法一:创建新的右键菜单添加“执行选择”按钮,且抑制TreeList自带菜单结果展示: 代码: privatevoidForm1_Load(objectsender,EventArgse){CreateBarButtonItem();}privatevoidCreateBarButtonItem(){//创建右键......
  • DevExpress中使用BandGridView实现复合(多行)表头、设置多行表头背景颜色、表格边框颜色
    一、实现效果二、实现方法2.1、创建复合表头①将创建的GridControl下的GirdView1转化为BandGridView类型;②创建需要展示的列(指定列的名称【Name】、描述【caption】、数据字段名称【FieldName】)③绑定列实现复合表头。注意:如果复合表头有多行,则需要设置新增Band的RowCoun......
  • 第四方支付系统(集成wxpay、alipay)_ LayUI基础
    23以蜡笔小新为开头写一篇藏头诗蜡月寒风正刺骨,笔耕不辍夜已深。小径穿行千百度,新春又至岁华新。暗恋一个人不敢表白怎么办暗恋一个人不敢表白是一个常见的问题,以下是一些建议来帮助你克服这种困境:了解自己:首先,你需要了解自己的情感和动机。思考一下你对这......
  • Python之PyAutoGUI的使用
    PyAutoGUI是Python的一个库,使用示例如下。一、移动到某个坐标点进行点击importpyautoguiprint(pyautogui.position())pyautogui.moveTo(56,18,duration=1)pyautogui.click()二、依照图片相似度移动到某个图片的位置进行点击importpyautoguipos=pyautogui.locateO......
  • vue-quill
    官网:https://vueup.github.io/vue-quill/引入vue-quill当前版本:"@vueup/vue-quill":"^1.2.0"npminstall@vueup/vue-quill@latest全局设置import{QuillEditor}from'@vueup/vue-quill';constapp=createApp(App);app.component(......
  • Qt在ui界面设置组件样式,styleSheet属性
    QGroupBox{border:3pxsolidred;border-radius:15px;} QGroupBox#groupBoxBtns{border:3pxsolidgreen;border-radius:5px;} QPushButton{border:3pxsolidblack;border-radius:7px;} QPushButton:hover{border:3pxsolidblue;border-radiu......
  • ESP32在Arduino环境下使用QUEUE接收串口数据帧
    ESP32在Arduino环境下的串口数据帧接收测试平台ESP32-WROOM测试语言Arduino@PlatformIO注意事项需要添加Queue的库函数作者:SMFSWPlatformIO环境配置文件-platformio.ini[env:esp32doit-devkit-v1]platform=espressif32board=esp32doit-devkit-v1framewo......
  • element-ui中的el-table底部固定指定行
    1,固定一行合计的情况  https://element.eleme.cn/#/zh-CN/component/table 直接使用官方文档上的summary-method  2,固定指定行或者多行  使用样式去固定例子:(计算列表数据的平均值,最大值,最小值并固定底部)1,计算数据的值protectedcalcData(data:any){......
  • configure: error: Building GCC requires GMP 4.2+, MPFR 3.1.0+ and MPC 0.8.0+.
    gitclone git://gcc.gnu.org/git/gcc.gitgcc-CXX17gitcheckoutorigin/release/gcc-12./configureconfigure:error:BuildingGCCrequiresGMP4.2+,MPFR3.1.0+andMPC0.8.0+.Trythe--with-gmp,--with-mpfrand/or--with-mpcoptionstospecifytheirlocation......
  • ERROR: Could not build wheels for opencv-python, which is required to install py
    目录系统环境问题描述问题解决问题二参考文章系统环境#macOS系统版本$sw_versProductName:MacOSXProductVersion:10.14.4BuildVersion:18E2035#Python版本$python--versionPython3.9.13问题描述安装opencv-python报错,安装失败#安装opencv-python的命令......