首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Blazor入门_blazor视频教程

这篇文章演示了如何使用Blazor构建SPA应用。Blazor简化了可在任何浏览器中运行快速且美观SPA任务。它通过使开发人员能够编写基于DotnetWeb应用程序来实现此目的。...这些应用程序可以在使用了开放Web标准浏览器中运行。让我们开始使用Blazor吧。...但是,这个决定不是这篇文章主要目的。 开始使用 首先,在创建新项目时搜索“Blazor”,然后选择“Blazor 应用”。...现在,我们创建了启用身份验证Blazor项目,运行项目后,可以看到以下界面。...总结 简而言之,本文试图介绍 Blazor,以及如何使用 Blazor创建你第一个应用程序。除此之外,我们还讨论了托管模型,身份验证,授权实现以及默认页面中使用指令。

4.6K20

Day 03:Blazor Server和Blazor WebAssembly差异

送到浏览器文件跟Blazor Server相差不大,因为微软改变了Blazor WebAssembly下载dll规则,改为只有Component发送请求时才会下载到浏览器,大大减轻浏览器负担。...两种模式项目结构对比 Blazor ServerProgram.cs文件: Blazor Server Program.cs Blazor WasmProgram.cs文件: Blazor Wasm...SurveyPrompt.razor则是Blazor提供简单范例。...index.html则是相当于Blazor Server中_Host.cshtml文件(上一段文字有提到)。 而Blazor Server中有个没说到Data文件夹,里面又是什么呢?...Blazor Server Data目录 最后是Blazor Serverappsettings.json,这就是一份JSON格式文件,可以将需要经常修改数据放在这里,例如跟数据库连接使用连接字符串

2.9K30

Blazor学习之旅(12)JavaScript与Blazor互操作

在上一篇我们学习了Blazor+SignalR开发简单实时应用程序,这一篇我们了解下Blazor和JavaScript互操作性。 有了Blazor还需要JavaScript?...很 多时候,我们可能希望继续使用JavaScript提供函数来实现某些功能,这时,我们可以用Blazor和JavaScript互操作性(也称为JS互操作)来调用Blazor应用中JavaScript...在Blazor中调用JavaScript代码 加载方式 将JavaScript添加到Blazor应用方式与添加到标准HTML Web应用一样,都是使用HTML元素。...需要注意是: JavaScript函数必须属于 window 作用域 或 window 子作用域; 传入参数必须是可序列化为JSON; DEMO 假设我们已经有了一个Blazor Server...添加.NET方法并标注 JSInvokable,还需要声明一个 DotNetObjectReference对象便于进行资源释放,以免引起内存泄露问题; @code { [Inject]

25710

Blazor 修仙之旅 - Ant Design of Blazor

一.前言 这是《Blazor 修仙之旅》第三篇,前面两分别是《初次尝试》、《组件与数据绑定》,直接到这里上 Ant Design 确实连不起来,跨度比较大,其实我也是在边学边写,看是官方文档,我觉得中间这部分重复写博客意义不大...Ant Design of Blazor 介绍 ant-design-blazor 是国内开发者 ElderJames 创建一个开源项目。...在前不久微软Build大会也见到了它身影,受到了微软官方推荐,点赞!顾名思义,ant-design-blazor 是 Ant Design Blazor 实现,开发和服务于企业级后台产品。...从ant-design-blazor README 摘点内容撑一撑篇幅(手动滑稽) 三.使用 直接新建一个 Blazor WebAssembly 项目,或者使用前两篇文章中 Demo。...四.Ant Design of Blazor 资料 文档:点我 开源地址:点我

1.1K10

Blazor学习之旅(1)初步了解Blazor

什么是BlazorBlazor是微软近年来主推,基于C#、HTML与CSS来构建交互式Web UI框架。  借助 Blazor,开发人员可以使用 C# 生成客户端和服务器代码。...Blazor两种模式 (1)Blazor Server模式 Blazor Server 是 Blazor 用户界面框架(作为 ASP.NET Core Web 开发框架一部分)实现,并部署到 Web...在使用Blazor过程中,可以充分感受到Blazor和当前主流前端技术联系: 组件式开发范式,推荐以组件形式作为页面基本UI元素 在html模板中,部分C#关键词充当了类似“指令”角色...这样开放思路,给了Blazor开源社区非常大发展空间,比如很多早先由原生JS编写图表开源项目,可以以相对较低成本迁移到Blazor上来;又比如可以使用Blazor封装三大框架已有的组件,或者原生组件...因此,Blazor和前端三大框架之间,的确有相当一部分功能其实可以互相取代。然而Blazor目的,不是为了取代三大框架;从现状来看,甚至连竞争地位都谈不上。

38020

Blazor 初探

Blazor 初探 目录 一、新建项目 二、ASP.NET Core Blazor 项目结构 三、结合代码讲解 四、改造 五、配置文件使用 六、发布到 Linux(CentOS) 题外话,期间遇到个问题...程序部署到 Linux 系统)》中提到 VPS 文件中转下载服务后,如何将下载文件以 Blazor 方式传出到浏览器方法。...那么这篇文章就回过头来,介绍一下本项目(VPSDownloader.NET)使用 Blazor 过程。...一、新建项目 在 VisualStudio 中选择 “Blazor 应用” 项目模板: 填写项目名称: 选择 Blazor Server 应用: 二、ASP.NET Core Blazor 项目结构...运行环境安装等可参考开头提到文章): 题外话,期间遇到个问题 现象一:使用配置文件设置 urls 时,直接运行是正常,使用 Linux 服务方式启动则不能正确读取配置,会使用默认 localhost

2.1K10

ASP.NET Core Blazor 初探之 Blazor WebAssembly

最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下。 Blazor Blazor是微软在ASP.NET Core框架下开发一种全新Web开发框架。...Blazor WebAssembly Blazor 技术又分两种: Blazor WebAssembly Blazor Server Blazor WebAssembly 是真正SPA,页面的渲染在前端实现...,所以肯定需要配置CORS问题: app.UseCors(config => { config.AllowAnyOrigin();...实现新增学生页面(/student/add) 当点击列表页面的Add按钮时候,需要导航至新增页面,导航直接使用a标签没有任何问题。...实现一个Store 修改页面显然需要显示学生当前信息。我们通过url传递过来参数只有id,那么需要一次Http请求去后台获取学生信息,这没什么问题

6.5K10

ASP.NET Core Blazor 初探之 Blazor Server

上周初步对Blazor WebAssembly进行了初步探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly)。这次来看看Blazor Server该怎么玩。...Blazor Server模式可以让一些不支持WebAssembly浏览器可以运行Blazor项目,可是问题也是显而易见,基于SignalR双向实时通信给网络提出了很高要求,一旦用户量巨大,对服务端水平扩容也带来很大挑战...,Blazor Server用户状态都维护在服务端,这对服务端内存也造成很大压力。...从返回html代码上来看绑定数据已经有值了,这可以清楚证明Blazor Server技术使用是服务端渲染技术。 ? ? _blazor?...但是这里有个问题,我们填写数据呢?我们在文本框里填写数据貌似没有传递到后台,这就不符合逻辑了啊。想了下有可能是文本框编辑时候数据就提交回去了,让我们验证下: ?

1.9K20

Blazor练习1

个人练手笔记,对照官网练习.想学Blazor可以先看官网. 创建新 Blazor 应 为了设置 Blazor 项目来配合工作,我们将使用 Visual Studio Code。...如果不想使用其他代码编辑器,可在终端中运行此模块中命令。 在 Visual Studio Code 中,选择“文件” > “打开文件夹”。...在选择位置中新建一个名为 BlazorApp 文件夹,然后单击“选择文件夹”。 从主菜单中选择“视图” > “终端”,以便从 Visual Studio Code 中打开集成终端。...除了一个名为 BlazorApp.csproj C# 项目文件,此命令还将创建一个基本 Blazor 服务器项目,其中包含所有必需文件和页面。 你现在应可以访问以下文件。...appsettings.Development.json -| appsettings.json -| BlazorApp.csproj -| Program.cs 如果 Visual Studio Code 提示你安装所需资产

82520

分层 Blazor 组件

虽然标记帮助器很有用,但仍存在一些编程缺陷,而 Blazor 组件则绝妙地消除了这些缺陷。在本文中,我将生成新 Blazor 组件,以通过 Bootstrap 4 框架服务显示模式对话框。...问题在于,必须在代码中表达转换和标记组合。尽管这很大地提高了灵活性,但任何更改也都需要通过编译步骤完成。具体而言,需要使用 C# 代码来描述 DIV 树及其所有属性集和子元素。...在 Blazor 中,事情变得容易多了,因为无需为了创建复杂元素(如 Bootstrap 模式对话框)更易记标记语法,而无奈地使用标记帮助器。接下来将介绍如何在 Blazor 中创建模式组件。...此外,Blazor模板属性是 RenderFragment 类型属性。 上面源代码中有趣地方是,绑定到级联值。...modal-footer"> @FooterTemplate 详细了解级联值和级联参数 级联值解决了沿子组件堆栈向下有效流动值问题

8.3K10

Blazor练习2

个人练手笔记,对照官网练习.想学Blazor可以先看官网. 什么是 Razor 组件? Razor 文件定义了构成部分应用 UI 组件。...Blazor组件类似于 ASP.NET Web Forms 中用户控件。 如果浏览项目,则会看到大部分文件为 .razor 文件。 在编译时,每个 Razor 组件都内置于 .NET 类中。...尝试使用计数器 在正在运行应用中,单击左侧边栏中“计数器”选项卡导航到计数器页面。随后应会显示以下页面。 选择“单击我”按钮,在不刷新页面的情况下递增计数值。...递增网页中计数器值通常需要编写 JavaScript,但借助 Blazor,可使用 C#。 可在 Pages/Counter.razor 处找到 Counter 组件实现。...(由顶部 @page 指令指定)会导致 Counter 组件呈现其内容。

1.8K10

Blazor VS Vue

Blazor 如何比较?Blazor 是一个框架,它使您能够使用 C# 而不是 JavaScript构建在浏览器中运行客户端 Web 应用程序。...创建新 Blazor 应用程序对于 Blazor,您可以使用 Visual Studio 或通过命令提示符启动新项目。...Vue 不知道你如何处理这个问题,让你可以自由地使用本地fetchAPI 或许多第三方库中任何一个,例如“Axios”。关键是知道何时进行调用,为此 Vue 提供了一个mount生命周期钩子。...这就是 Blazor 与 JavaScript 框架相比具有显着优势地方....共享模型——Blazor 超能力?...Blazor 组件模型Blazor 缺点新框架,需要时间来适应并获得采用没有明显方法可以无缝地将 Blazor WASM 添加到现有应用程序中工具也很年轻,将随着时间推移而发展在撰写本文时,与 Vue

4.2K30

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

本篇我们来构建第一个Blazor Web应用,这里我们选择Blazor Server类型,后面我们再学习Blazor WebAssembly类型。 话外音:有人问我西门子在用Blazor吗?...是的,西门子德国两家数字化工厂都有在用Blazor开发Web应用,特别用到了MudBlazor这个UI组件库并封装一个完整内部系统开发模板,值得关注!...而作为西门子在中国首家数字化工厂,成都工厂自然也用Blazor开发新Web应用系统啦! 创建新Blazor应用 在VS中,添加一个Blazor Server应用。...Blazor应用结构 一个默认Blazor应用项目结构如下图所示: 其中: (1)Data文件夹主要存放Model和Service。 (2)Pages文件夹主要存放基于Razor页面和组件。...小结 本篇,我们创建第一个Blazor应用。 下一篇,我们来写一个Todo应用,把分层结构和EF Core串起来! 参考资料 Microsoft Learning,《使用Blazor生成Web应用》

29720
领券