文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调

渲染UI结束后按钮才会插入到dom树上，所以这里使用一个傻办法让绑定事件的JavaScript代码置后运行。...JavaScript调用组件里的方法 JavaScript调用组件里的方法比较绕，其实还是通过一个静态方法作为入口，把实例方法绑定一个静态delegate，然后让这个静态方法去执行delegate。...调用对象的方法 Blazor还可以把.NET对象(引用)直接传递到JavaScript运行时来让JavaScript直接调用.NET对象的方法。...总结 使用JSRuntime可以在.NET里调用JavaScript的方法，这些方法必须是全局的，也就是挂载在window对象上的。...Blazor Webassembly 之 路由 ASP.NET Core Blazor Webassembly 之 数据绑定 ASP.NET Core Blazor Webassembly 之 组件

1.9K10

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

前言 Blazor 是一个相对较新的框架，用于构建具有 .NET 强大功能的交互式客户端 Web UI。...一个常见的用例是将现有的 Excel 文件导入 Blazor 应用程序，将电子表格数据呈现给用户，并且能够允许进行任何更改，最后将该数据导出回 Excel 文件或将其保存到数据库。...以下是在 Blazor 中导入/导出电子表格文件的步骤： 创建 SpreadJS Blazor 组件 创建 Blazor 应用程序 在 Blazor 应用程序中导入 Excel Blazor 应用程序中的...Excel 导出 创建 SpreadJS Blazor 组件 SpreadJS 是一个非常强大且可扩展的 JavaScript 电子表格组件，它使这个过程变得更加简单。...这将是我们将用作包装器的组件： @using Microsoft.JSInterop @inject IJSRuntime JSRuntime @code

1.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    集成Ids4，实现统一授权认证

    ，这里我我们再来一个前情回顾： 《我的『MVP.Blazor』快速创建与部署》 在这篇文章中，我们简单的了解了下，什么的Blazor，他能做些什么，以及如何快速的入门和部署，属于一个认知的阶段，熟话说万事开头难...2s以内（可以查看我文章，有具体的数据佐证）； 《[Mvp.Blazor] 动态路由与钩子函数》 之前三篇文章，我们学会了组件通信、数据请求、数据绑定和继承等知识点，那这篇文章我简单的对路由和钩子函数做了说明和讲解...我经常在群里说的一句话就是：没有日志的项目是没有灵魂的，没有权限的项目是裸奔的。就是这样的，所以我基本任何项目都会有权限，包括我们功能内部的一些小Portal，我都会在重要页面或数据上增加一定的权限。...简化模式，和Blog.Admin很相似，只不过一个组件安装一个是直接使用js静态文件，原理都一样。...UserInfo.IsExpired(); 我们这里做了封装，等token失效的时候，会重新去ids4认证中心拉取新的令牌。

    2.6K20

    ASP.NET Core Blazor 初探之 Blazor WebAssembly

    Blazor强化了Razor模板引擎，并且借鉴了当前热门前端框架的优点，比如双向绑定技术，组件化，使前端开发敏捷高效。如果你对NG，VUE等框架熟悉那么很容易找到其中的共通点。...既然Blazor支持组件化，那么这种重复的东西既然是封装为一个组件为好了。 封装Edit组件 我们把对学生信息编辑的功能抽象成一个组件叫做Edit。...组件的使用跟VUE等一样，使用一个自定义的Tag插入到html的里。...Blazor中想要跟JavaScript交互需要注入JSRuntime对象： JSRuntime.InvokeVoidAsync("history.back"); 我们在取消按钮的事件代码里调用以上代码...总结 通过以上，我们使用Blazor实现了一个简单的前后端分离的SPA。总体涉及了Blazor的几个重要知识点，比如：数据绑定，事件处理，封装组件，JavaScript交互等。

    7.2K10

    一个专门设计用于帮助 WinForms 应用程序迁移到 Blazor WASM 平台的项目

    Blazor WebAssembly（WASM） 凭借其可复用 C# 代码与基于浏览器的跨平台特性，成为迁移路径中的热门选择。...注意该项目是一个巨大的工程目前还在逐步规划、完善中，当前已开源演示项目，主要用于给大家演示迁移流程与验证兼容性（大家有更好的想法或解决方案欢迎前往开源地址提Issues）。...跨平台访问需求：原本仅支持 Windows 的应用需在 macOS、Linux 或移动设备浏览器中运行。 降低重写成本与技术风险： 避免从零开发新 Web 前端带来的高成本、长周期和功能遗漏风险。...WASM 平台的 WinForm 计算器项目演示效果： 迁移到 Blazor WASM 平台演示： 下面是已经通过 MWGA 项目迁移到 Blazor WASM 平台的 WinForm 计算器项目演示效果...初步展示了将 WinForms 代码无修改的移植到 Blazor WASM 中的能力。这是MWGA的第一滴血，虽然还有很多不足，但还是为快速低成本的迁移 Winforms 程序带来明确的曙光。

    24711

    Blazor资源大全，很棒的Blazor(2)

    用于服务器端和客户端应用程序的快速数据网格、列表视图、输入框和其他原生Blazor组件。...带有gRPC代码优先客户端/服务器通信、本地化等的企业项目模板。交互式文档和演示。 Blazority - 基于Clarity UI设计的Blazor组件库。...Toast_UI.Blazor_Calendar - 用于查看和创建事件、任务和里程碑的全功能日历UI组件。支持月、周和日视图。...Blazor.Grids - 带有额外功能的CSS网格组件库，例如交互式移动和调整大小。轻松创建自己的仪表板。(演示)。 Blazor.TreeViews - 树视图组件库。(演示)。...创建通用的树视图 Blazor 组件 - 2022年10月4日 - 本文展示了一个可以以树视图递归显示对象的 Blazor 组件。

    3.6K20

    .NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

    @key指令属性，以指定Blazor diffing算法可用于保留列表中的元素或组件的值（任何对象或唯一标识符）。...，Flight = F2 ......如果我们在索引1中插入一个新的项目fnew，这就是所期望的插入之后的状态： DetailsCard0，Flight = F0 DetailsCardNew，Flight...该@namespace指令现在适用于页面和视图（.cshtml）应用程序，但现在它也支持组件（.razor）。...当前的身份验证状态通过隐式context参数传递给这些模板。您还可以指定AuthorizeView用户必须满足的特定角色或授权策略才能查看授权视图。...要授权访问Blazor应用程序中的特定页面，请使用普通的[authorize]属性。可以使用新的@attribute指令将[authorize]属性应用于组件。。

    8.1K20

    .NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

    @key指令属性，以指定Blazor diffing算法可用于保留列表中的元素或组件的值（任何对象或唯一标识符）。...，Flight = F2 ......如果我们在索引1中插入一个新的项目fnew，这就是所期望的插入之后的状态： DetailsCard0，Flight = F0 DetailsCardNew，Flight...该@namespace指令现在适用于页面和视图（.cshtml）应用程序，但现在它也支持组件（.razor）。...当前的身份验证状态通过隐式context参数传递给这些模板。您还可以指定AuthorizeView用户必须满足的特定角色或授权策略才能查看授权视图。...要授权访问Blazor应用程序中的特定页面，请使用普通的[authorize]属性。可以使用新的@attribute指令将[authorize]属性应用于组件。。

    7.4K20

    ASP.NET Core 3.0 的新增功能

    Blazor Server Blazor 将组件渲染逻辑与 UI 更新的逻辑进行了解耦。Blazor Server 支持在服务器上的 ASP.NET Core 应用程序中承载 Razor 组件。...Razor 组件 Blazor 应用程序是由组件 (components) 构建而成的。组件是自包含的用户界面元素，例如页面、对话框或者表单等。...Razor 组件与 Razor Pages（页面）和 MVC 视图 (view) 相似，因为它们都使用 Razor。与基于“请求-响应”模型的页面与视图不同，组件专门用于处理 UI 合成。...新的 Razor 指令 以下列表包含了新的 Razor 指令： @attribute — @attribute 指令将给定属性应用于生成页面或者视图的类。...模板变更 Web UI 模板（Razor Pages, 带有控制器和视图的 MVC）已删除以下内容： “Cookie 同意” UI 不再包含在内。

    8.5K30

    使用Blazor和SqlTableDependency进行实时HTML页面内容更新

    在Blazor的帮助下，从服务器到HTML页面的通知得到了极大的简化，从而获得了极好的抽象水平：使用Blazor——实际上——我们的代码只是C＃和Razor语法。 ?...在SignalR之前，通常有一个使用Ajax 的JavaScript代码来定期（例如，每5秒一次）向服务器执行一个GET请求，以便检索可能的新价格并将其显示在HTML页面中。...如今，借助Blazor及其嵌入式SignalR功能，我们可以扭转这一趋势，并让服务器有责任仅在显示一些新价格时才更新HTML页面。...在下面的例子中，Blazor会负责更新HTML页面，而SqlTableDependency组件会负责在由于insert，update或delete而更改表内容时从SQL Server数据库获取通知： 我们必须使用...，然后插入或更新其Price值。

    2.3K20

    ASP.NET Core Blazor 核心功能三：Blazor与JavaScript互操作——让Web开发更灵活

    今天我们来聊聊Blazor中C#与JavaScript互操作。我知道很多同学在听到"Blazor"和"JavaScript"要一起工作时会有点懵，但别担心，我会用最简单的方式带你掌握这个技能！...想象一下：你正在用Blazor开发一个超棒的应用，但突然需要用到某个只有JavaScript才能实现的炫酷效果，或者要集成一个超好用的第三方JS库。这时候，JavaScript互操作就是你的救星！...简单来说，它让Blazor和JavaScript可以"握手合作"，各展所长。下面我们就从最基础的部分开始。...1.IJSRuntime-你的JavaScript通行证在Blazor中，IJSRuntime是与JavaScript沟通的桥梁。...HH:mm:ss})";}[JSInvokable]publicvoidShowAlert(stringalertMessage){//这个方法会被JavaScript调用//在实际应用中，你可能会更新组件状态或触发其他操作

    22810

    ASP.NET Core Blazor简介和快速入门三（布局和路由）

    这些核心功能共同构成了Blazor组件化开发的基础框架。一、创建和应用Blazor 布局网站应用往往有许多公共的视图部分，比如顶部导航nav,底部的footer，管理系统的左边的menu菜单等等。...Layout可以轻松实现以上的效果。Blazor 布局是一个 Razor 组件，它与引用该布局的组件共享标记。 布局可以使用数据绑定、依赖关系注入和组件的其他功能。...Blazor 项目模板创建的应用中，MainLayout 组件就是应用的默认布局。...Blazor 的 CSS 隔离功能将独立 CSS 样式应用于 MainLayout 组件。 按照惯例，样式由相同名称的随附样式表 MainLayout.razor.css 提供。...带有DoctorWhoLayout组件的 Episodes 会在@Body出现的位置显示。

    24910

    Blazor 中的路由和路由模板

    在客户端上，路由器参与多种情况，最常见的情况是用户单击链接、表单上的提交按钮或下拉列表中触发服务器调用的项。路由器绑定到内部位置更改事件，并从客户端处理导航到新请求路径的整个过程。...最后的结果就是，Blazor 路由器目前仅提供作为客户端路由器的基本功能。例如，它不具备检查路由上的授权和创建在位置更改时执行视图转换的链接的功能。...如果 Razor 源包含 @page 指令，则使用 Route 属性修饰相同的动态编译类。 值得注意的是，Blazor 在同一视图中支持多个路由指令。...但是，当定位标记用于呈现菜单或导航栏时，可能需要一些额外的工作来调整 CSS 样式以反映链接的状态。 内置的 Blazor NavLink 组件可以用于任何需要定位点元素的地方，尤其是在菜单中。...该组件还包含用于控制匹配方式的属性。你可以执行严格匹配或前缀匹配。 此外还可以通过编程方式触发 Blazor 路由器。

    11.1K21

    对打 Angular，Blazor 赢在哪里？

    作者 | Ravindu Shehan Perera 译者 | 王强 策划 | 闫园园 Blazor 是一个 Microsoff ASP.NET Core 框架，用它无需任何附加组件或插件即可在浏览器中运行...Blazor 的最大卖点是它使用最新的 Web 标准，并且不需要额外的插件或附加组件即可在两个单独的部署模型（客户端 WebAssembly 和服务端 ASP.NET Core）中运行。...视图负责托管可视项目并接收来自模型的输入。ViewModel 连接视图和模型。最后，模型包括了程序的逻辑。...Blazor 现在提供了 scoped 组件样式和 CSS 隔离。在 Angular 中，与组件样式和 CSS 隔离相关的工具链已经非常成熟了。...在选择 Blazor 或 Angular 时，你必须考虑以下几点： 何时使用 Blazor： 如果你是想要更快构建应用的 C# 开发人员。 当项目需要更快的周转时间时。

    3.7K30

    ASP.NET Core 5.0 MVC中的 Razor 页面 介绍

    -- HTML comment --> *@ 指令 Razor 指令由带有符号后的保留关键字的隐式表达式表示 @ 。 指令通常用于更改视图分析方式或启用不同的功能。...@namespace @namespace 指令： 设置生成的 Razor 页、MVC 视图或组件的类的命名空间 Razor 。...在目录树中最近的导入文件中设置页面、视图或组件类的根派生命名空间， _ViewImports) 或 _Imports razor (组件) (视图或页面。...当多个导入文件具有 @namespace 指令时，最靠近目录树中的页面、视图或组件的文件将用于设置根命名空间。...指令属性 Razor 指令特性由带有符号后的保留关键字的隐式表达式表示 @ 。 指令特性通常会改变元素的分析方式，或实现不同的功能。

    3.4K10

    MatBlazor：为 Blazor 和 Razor 组件量身打造的组件库

    MatBlazor 是一个专门为 Blazor 和 Razor Components 开发的组件库，基于 Google 的 Material Design 规范实现了一系列常用的交互组件。...MatBlazor 是一个开源项目，提供了一组遵循 Material Design 设计语言的 UI 组件，适用于 Blazor 和 Razor Components 开发。...它可以帮助我们轻松实现现代化的用户界面，并且支持服务器端和客户端两种模式。 以下是 MatBlazor 的一些核心特性： • 丰富的组件：包括按钮、表格、日期选择器、树形视图等。...日期选择器（DatePicker） 用于选择日期的交互组件，支持自定义样式和格式。 4. 树形视图（TreeView） 用于展示层次结构数据。 5....是一个功能强大且易用的组件库，能够显著提升 Blazor 和 Razor Components 开发的效率。

    42800
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券