首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Dotnet9网站回归Blazor重构,访问速度飞快,交互也更便利了!

由于Razor Pages将视图处理逻辑封装在同一个页面,开发人员可以更容易地理解维护代码。...其次,Razor PagesSEO(搜索引擎优化)方面具有一定优势。由于Razor Pages将视图处理逻辑封装在同一个页面,搜索引擎可以更容易地理解索引页面的内容。...传统Web开发,前端开发人员需要使用JavaScript来处理页面的交互动态效果,而后端开发人员则负责处理业务逻辑和数据操作。这种分离开发模式可能导致开发人员之间沟通和协作问题。...总之,Blazor对于Razor PagesMVC来说是一个更好选择,特别是对于需要更好前端开发体验、更好性能用户体验以及更好可重用性组件化开发项目来说。...然而,选择使用哪种开发模式还是要根据项目的具体需求和开发团队偏好来决定。无论选择哪种模式,重要是根据项目的实际情况做出合理选择,并且开发过程遵循良好设计原则最佳实践。 3.

42730

如何使用 Blazor 框架在前端浏览器中导入导出 Excel

以下是 Blazor 中导入/导出电子表格文件步骤: 创建 SpreadJS Blazor 组件 创建 Blazor 应用程序 Blazor 应用程序中导入 Excel Blazor 应用程序...Excel 导出 创建 SpreadJS Blazor 组件 SpreadJS 是一个非常强大且可扩展 JavaScript 电子表格组件,它使这个过程变得更加简单。...本教程,我们将使用 Visual Studio 2022 SpreadJS V16.0。...在这个文件,我们可以添加对 SpreadJS JavaScript CSS 文件引用: (index.html) <!...实现类似于基本 SpreadJS Blazor 代码,但我们需要编辑 Index.razor 文件以添加一些用于设置打开 Excel 文件代码: @page "/" @using SpreadJS_Blazor_Lib

22920
您找到你想要的搜索结果了吗?
是的
没有找到

(0630)Blazor系列:抽离C#代码

先将不必要Component删除,Program.cs_Import.razor里面跟天气有关using及注册同样删除,如果忘记这两个文件在哪里,可以删除Component后将滑鼠移到项目BlazorServer...删除多余组件等文件: 删除多余组件等文件 之前说过要完成让使用者写日志网站,所以需要最基本输入框,而日志单位就以一篇计算。...首先建立Models文件夹,建立PostModel类型,里面很简单只有3个属性,接着Pages文件夹建立Post.razor跟PostBase.razor.cs,最后将NavMenu.razor连接留下一个...Post页面展示 不过预设CSS样式不太好看,我们先套用基本boostrap样式;因为Id通常不会让使用输入,所以这边先注释,然后再加入表格验证机制,毕竟不能让使用者随便输入就提交表格...接着EditForm里面加上那两个ComponentDataAnnotationsValidator及ValidationSummary,第一个是验证各个Input,第二个则是将错误信息显示表格上方

1.6K20

ASP.NET Core 5.0 MVC Razor 页面 介绍

Razor一个用于将基于服务器代码嵌入到网页标记语法。 Razor语法由 Razor 标记、c # HTML 组成。...警告 对未经审查用户输入使用 HtmlHelper.Raw 会带来安全风险。 用户输入可能包含恶意 JavaScript 或其他攻击。 审查用户输入比较困难。...指令: cshtml 文件,指示该文件是一个 Razor 页面。 有关详细信息,请参阅自定义路由 ASP.NET Core Razor Pages 介绍。...RenderFragment 参数前导或尾随空白。 例如,传递到另一个组件子内容。 C# 代码块(例如 @if @foreach)之前或之后。...@section指令与MVC Razor 页面布局结合使用,以使视图或页面能够 HTML 页面的不同部分呈现内容。 有关详细信息,请参阅 ASP.NET Core 布局。

26310

MVC 3.0 新特性 摘要

这篇文章提供包含在此次发布许多新特性说明,分为以下部分: Razor 视图引擎 支持多视图引擎 Controller 改进 JavaScript Ajax Model 验证改进 依赖注入...,只需要最小化输入 Razor 容易学习,语法类似于 C# VB Visual Studio 对于 Razor 提供了智能提示语法着色 Razor 视图不需要允许程序或者启动 Web 服务器就可以进行测试...生成图表 WebGrid, 生成数据表格,支持完整分页排序 Crypto,使用 Hash 算法来创建 Hash 和加盐口令 WebImage, 生成图片 WebMail, 发送电子邮件 如下示例代码...HttpStatusCodeResult JavaScript Ajax 改进 默认情况下, MVC3 ,Ajax 验证使用不引人注目的 unobtrusive JavaScript...unobtrusive 不会在 HTML 插入行内 JavaScript ,这使得 HTML 更加精简更少干扰,也使得更加容易被替换定制 JavaScript 库, MVC3 ,验证助手默认使用

2.5K10

Blazor - .NET Core平台SPA开发框架快速上手

虽然大家都是WebAssembly是一场针对Javascript技术变革,目前市场还没完全接受之前,学习和了解也是一种不错选择。...Pages用来存放首页各类组件,作为一个SPA,组件这个概念是贯穿整个开发使用流程一个重要内容,页面内容通常都是由各类型可服用组件来构建和完成。...SurveyPrompt 就是一个组件,参看上文目录,Shared文件夹,SurveyPrompt.cshtml 页面的代码风格与Razor 风格cshtml页面类似,但是也使用了XML风格标签来作为组件引用...创建一个Todo组件 看完了官方实例,来动手实现一个 Todo组件。 创建页面 首先在Pages文件夹下新建一个Todo.cshtml新项目,不要新建Razor页面。...标签onclick方法@AddTodo进行绑定 bind="@newTodo" bind属性绑定指定变量内容 functions方法使用C#代码进行编写实现 总结 使用 Blazor 可以快速构建实现一个

2.5K20

Blazor入门:ASP.NET Core Razor 组件

组件:项目 Blazor 使用 .razor 结尾文件,称为组件;而 Blazor 组件,正式名称是 razor 组件; Blazor 组件是 razor 过渡而来使用 razor 基本语法特性...那么,文档说 “请勿创建会写入其自己组参数属性组件”,指定是 [Parmeter] 休息属性,是作为参数传递使用,不要在组件修改这个属性。...一个组件,引用该组件实例 @page "/" @code{ private Test _test; } 使用 Test.razor 组件同时,... test 页面输入 Key Value,点击按钮,即可通知到所有正在打开 Index.razor 页面。...使用 @ 键控制是否保留元素组件 使用表格或了表等元素时,如果出现插入或删除、更新等情况,整个表格或列表,就会被重新渲染。这样会带来比较大性能消耗。

2.7K20

《从零开始学ASP.NET CORE MVC》:VS2019创建ASP.NET Core Web程序(三)

Views文件夹,我们有示例视图文件布局文件,它们代表Web应用程序用户界面。我们还有Web应用程序通常需要JavaScriptCSS文件。 ?...我们没有RESTful API不需要所有JavaScript,CSS布局文件。 ? Web应用程序:此模板使用用于构建Web应用程序Razor Pages框架。...我们将在即将发布视频详细讨论Razor PagesRazor类库(RCL):顾名思义,我们使用此模板创建可复用Razor类库项目。...该项目包含所有可复用用户界面部分,如数据模型,页面模型,控制器,页面,Razor视图View组件。然后,可以多个应用程序复用此Razor类库(RCL)项目。...在下一篇文章,我们将探索理解ASP.NET Core 项目文件。 摘要 本文中,我尝试解释如何使用从头开始创建项目,以及不同类型模板区别。我希望这篇文章可以帮助您满足您需求。

3.8K20

《从零开始学ASP.NET CORE MVC》:VS2017创建ASP.NET Core Web程序(三)

Views文件夹,我们有示例视图文件布局文件,它们代表Web应用程序用户界面。我们还有Web应用程序通常需要JavaScriptCSS文件。 ?...我们没有RESTful API不需要所有JavaScript,CSS布局文件。 ? Web应用程序:此模板使用用于构建Web应用程序Razor Pages框架。...我们将在即将发布视频详细讨论Razor PagesRazor类库(RCL):顾名思义,我们使用此模板创建可复用Razor类库项目。...该项目包含所有可复用用户界面部分,如数据模型,页面模型,控制器,页面,Razor视图View组件。然后,可以多个应用程序复用此Razor类库(RCL)项目。...在下一篇文章,我们将探索理解ASP.NET Core 项目文件。 摘要 本文中,我尝试解释如何使用从头开始创建项目,以及不同类型模板区别。我希望这篇文章可以帮助您满足您需求。

2.7K30

Blazor学习之旅(2)第一个Blazor应用

而作为西门子中国首家数字化工厂,成都工厂自然也用Blazor开发新Web应用系统啦! 创建新Blazor应用 VS,添加一个Blazor Server应用。...Blazor应用结构 一个默认Blazor应用项目结构如下图所示: 其中: (1)Data文件夹主要存放ModelService。 (2)Pages文件夹主要存放基于Razor页面组件。...: 计数器示例 Pages/Counter.razor我们可以看到这个Counter组件实现: @page "/counter" Counter <p role="status...<em>使用</em>组件 这里我们尝试<em>在</em>Index.<em>razor</em>文件<em>中</em>添加<em>一个</em>刚刚<em>的</em>Counter组件: @page "/" Hello, world!...更改 IncrementCount 方法以 currentCount 递增时使用 IncrementAmount。 当我们再次运行,主页点击后,就会以10递增。

32720

ASP.NET Core 中使用 .NET Aspire 消息传递组件

本教程,小编将为大家介绍如何创建一个 ASP.NET Core 应用并将提交消息将发送到服务总线主题以供订阅者使用。...无需担心代码、配置文件或安全存储(例如 Azure Key Vault)存在硬编码连接字符串。 除此之外,还可以使用连接字符串连接到服务总线命名空间,但建议实际应用程序生产环境中使用无密码方法。...“配置新项目”屏幕上: 输入项目名称AspireMessaging。 将其余值保留为默认,然后选择“下一步”。...消息输入输入测试消息。 选择执行以发送测试请求。 切换回AspireWorkerService日志。看到输出日志打印测试消息。...快速入门:构建您一个 .NET Aspire 应用程序 扩展链接: 如何使用 Blazor 框架在前端浏览器中导入/导出 Excel XLSX 如何在.NET电子表格应用程序创建流程图 如何将实时数据显示在前端电子表格

26910

ASP.NET Core教程【一】关于Razor Page知识

关键文件目录结构 按照asp.net core WEB应用程序向导,创建一个工程之后 你会发现如下几个目录和文件 wwwroot:放置网站静态文件目录 Pages:放置razor页面的目录 appsettings.json...Razor页面的PageModel类 好,我们现在看看怎么通过数据库上下文把数据从数据库拿出来 Pages目录下,创建一个Razor页面 相应cshtml.cs文件,撰写如下代码: using...,所以不会影响运行期执行效率; 关于page指令 @page指令使得这个页面变成了一个ASP.NET MVCAction 这个指令必须是Razor Page一个指令 关于违法访问处理 来看看下面这行代码...model.Movie[0] 是 null 或者empty时,不会报异常; 关于model指令 @model RazorPagesMovie.Pages.Movies.IndexModel 这个指令使得...@{ ViewData["Title"] = "Index"; } 你可以Razor Page页面设置ViewData键值,_Layout.cshtml模版页面中使用你设置ViewData

2.5K80

.NET5 Blazor初探

上图中可以看到,原默认生成Demo里只有前三项,我菜单栏又加入了入库录入一个菜单,并且查询显示出了数据。 ?...借助 Razor,可使用 Visual Studio IntelliSense 编程支持同一文件 HTML 标记与 C# 之间切换。...Razor Pages MVC 也使用 Razor。 与基于请求/响应模型生成 Razor Pages MVC 不同,组件专门用于处理客户端 UI 逻辑构成。...通过浏览器 WebAssembly 执行 .NET 代码浏览器 JavaScript 沙盒中运行,沙盒提供保护可防御客户端计算机上恶意操作。 ?...想到应该是因为WIndows平台,如果是可移植所以无法打包,于是NuGet搜索了SqlSugar,发现有一个NoDrive包,然后把原来移除后替换这个,解决了发布问题。

2.9K11

ASP.NET Core Razor Pages 初探

后来才发现这是ASP.NET Core框架新推出Razor Pages技术。 什么是Razor PagesRazor Pages 使编码更加简单更加富有生产力”这是微软说==!。...下面使用一个标准CRUD示例来演示Razor Pages开发,并且简单探索一下它是如何工作。...新建Razor Pages项目 visual studio中新建Razor Pages项目。 ? 项目结构 ? 新建项目的目录结构比MVC项目简单。...首先我们新建一个列表页面。 Pages目录下面新建Student目录。Student目录下新建4个Razor page名叫:List、Add、Update、Delete。 ?...只是Razor Pages毕竟是服务端渲染,不能进行实时双向绑定而已。最后,说实话通过简单体验,Razor Pages开发模式跟MVC模式相比并未有什么特殊优点,不知道后续发展会如何

1.9K20

Blazor练习2

什么是 Razor 组件? Razor 文件定义了构成部分应用 UI 组件。Blazor 组件类似于 ASP.NET Web Forms 用户控件。...如果浏览项目,则会看到大部分文件为 .razor 文件。 在编译时,每个 Razor 组件都内置于 .NET 类。类包括常见 UI 元素,如状态、呈现逻辑、生命周期方法事件处理程序。...尝试使用计数器 正在运行应用,单击左侧边栏“计数器”选项卡导航到计数器页面。随后应会显示以下页面。 选择“单击我”按钮,不刷新页面的情况下递增计数值。...递增网页计数器通常需要编写 JavaScript,但借助 Blazor,可使用 C#。 可在 Pages/Counter.razor 处找到 Counter 组件实现。...呈现组件来显示更新后计数。 VS code编辑支持热重载, 练习: 1.增加一个计数器页面: 2.添加导航 3.运行效果

1.8K10

《Build the BookStore Application using the ABP vNext web application framework》笔记

整个ABPCore 虽然版本变化 大,但使用流程基本不变吧, 我看官网上文档基本完毕了,官网文档有一个外国人视频,当时版本尚是0.18,总共有2小时吧。记录个学习笔记吧!...它是整个解决方案共用类型 5、DBContext中注册实体类 【EFCore】,DbContext添加DbSet  books;                             ...); }); 16、 添加Razor 页面 【web】 添加页面 Pages/Books/index.cshtml  ,页面继承了  @inherits Acme.BookStore.Web.Pages.BookStorePage...18、编写一个基于 abp UI表格 【web】 index.cshtml,添加一组 标签来写页面,tag-helpers简化页面 js文件,用DataTable.js插件来生成表格...第三方表格插件已经内置,且abp写了许多辅助东西来适配第三方插件 abp.libs.datatables.createAjax是帮助ABP动态JavaScript API代理跟Datatable

2K30

非典那年记忆

整个ABPCore 虽然版本变化 大,但使用流程基本不变吧, 我看官网上文档基本完毕了,官网文档有一个外国人视频,当时版本尚是0.18,总共有2小时吧。记录个学习笔记吧!...它是整个解决方案共用类型 5、DBContext中注册实体类 【EFCore】,DbContext添加DbSet  books;                             ...); }); 16、 添加Razor 页面 【web】 添加页面 Pages/Books/index.cshtml  ,页面继承了  @inherits Acme.BookStore.Web.Pages.BookStorePage...18、编写一个基于 abp UI表格 【web】 index.cshtml,添加一组 标签来写页面,tag-helpers简化页面 js文件,用DataTable.js插件来生成表格...第三方表格插件已经内置,且abp写了许多辅助东西来适配第三方插件 abp.libs.datatables.createAjax是帮助ABP动态JavaScript API代理跟Datatable

94420

Blazor 初探

可以看到它有着完整 html 结构,非 html 常规标签那些一般都是 Razor 组件,其中 body 后紧跟一行那个组件就是其它具体页面将会填充位置: 当然,也不是直接填充过来,而是通过一个...App 组件,分为找到页面未找到页面的情况,找到页面默认使用 MainLayout 布局模板: MainLayout.razor 通过使用 @inherits LayoutComponentBase...NavLink 组件: 网页宽度较小时,菜单栏可收缩,控制收缩展开逻辑是使用 C# 代码,写在 @code {} 块,如上图,效果如下图: 四、改造 首先我们主页不需要关于栏,有些边距也要去掉...剩下就是拷贝之前前端页面然后修改,简要解释: @xxx 就是绑定,适用于标签;@bind="yyy" 就是双向绑定,适用于输入框;@onclick="zzz" 表明点击时调用 zzz () 方法...(路径)不对,于是使用以下方式解决,也就是启动脚本(Start.sh)先 cd 到相应目录再运行即可: 其实以前我也是习惯这样写两行,这次不知道为什么抽风了偷懒写成一行这种,还以为是一样呢,

2.1K10
领券