在Asp.net Razor Pages/MVC程序中集成Blazor
今天试了一下在Asp.net core Razor Pages/MVC程序中集成Blazor(Server-side),还是可以完美整合的,这里以Razor Pages为例(.net core 3.1),记录下相关过程。
1. 配置StartUp,添加Blazor服务
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
}
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/Index");
});
2. 在根目录添加"_Imports.razor"
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
这一步非常重要,如果没有_Imports.razor这个文件(注意需要放在根目录),则渲染方式和传统的Razor模板方式一样,不会和Blazor事件联动,例如,在本例中不会关联按钮事件。
3. 添加组件Counter.razor
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 32;
private void IncrementCount()
{
currentCount++;
}
}
4. 在Index.cshtml中添加组件引用及blazor.server.js
<component type="typeof(Pages.Shared.Counter)" render-mode="ServerPrerendered" />
<script src="_framework/blazor.server.js"></script>
这里是用的component Tag Helper引用的组件,原始代码的方式是:
@(await Html.RenderComponentAsync<Pages.Shared.Counter>(RenderMode.ServerPrerendered))
5. 运行,即可看到二合一的效果了。
效果就不截图了。
在Asp.net Razor Pages/MVC程序中集成Blazor的更多相关文章
- asp.net 4.0+ webform 程序中集成mvc4混合应用
vs2015之后新建web站点可以很轻松的搭建mvc与webform的混合应用,vs2012下其实也可以通过简单的几部也可以实现,具体如下: 1.新建packages.config文件,里面加上必要的 ...
- [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的连接恢复和命令拦截
这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第四篇:MVC程序中实体框架的连接恢复和 ...
- 用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署
用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署 这是微软官方SignalR 2.0教程Getting Started with En ...
- MVC程序中实体框架的连接恢复和命令拦截
MVC程序中实体框架的连接恢复和命令拦截 这是微软官方SignalR 2.0教程Getting Started with Entity Framework 6 Code First using MVC ...
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
- 跨平台应用集成(在ASP.NET Core MVC 应用程序中集成 Microsoft Graph)
作者:陈希章 发表于 2017年6月25日 谈一谈.NET 的跨平台 终于要写到这一篇了.跨平台的支持可以说是 Office 365 平台在设计伊始就考虑的目标.我在前面的文章已经提到过了,Micro ...
- .NET Core RC2发布在即,我们试着用记事本编写一个ASP.NET Core RC2 MVC程序
在.NET Core 1.0.0 RC2即将正式发布之际,我也应应景,针对RC2 Preview版本编写一个史上最简单的MVC应用.由于VS 2015目前尚不支持,VS Code的智能感知尚欠火候,所 ...
- ASP.NET 5与MVC 6中的新特性
差点忘了提一句,MVC 6中默认的渲染引擎Razor也将得到更新,以支持C# 6中的新语法.而Razor中的新特性还不只这一点. 在某些情况下,直接在Web页面中嵌入某些JSON数据的方式可能比向服务 ...
- ASP.NET MVC程序中动态修改form的Action值
在练习ASP.NET MVC时,为了实现一个小功能,POST数据至服务器执行时,需要动态修改form的action值. 下面Insus.NET列举一个例子来演示它.让它简单,明白易了解. 你可以在控制 ...
随机推荐
- Laravel 即时应用的一种实现方式
即时交互的应用 在现代的 Web 应用中很多场景都需要运用到即时通讯,比如说最常见的支付回调,与三方登录.这些业务场景都基本需要遵循以下流程: 客户端触发相关业务,并产生第三方应用的操作(比如支付) ...
- 5面终于拿到了字节跳动offer! 鬼知道我经历了啥...
坐标北京,某211本科毕业生,之前学校活动有去过字节跳动公司总部参观,所以一直以来就蛮想进入字节工作的,被字节的企业文化和工作氛围所影响.字节作为发展速度最快的互联网公司,旗下的很多产品的用户都比肩B ...
- JavaScript定时器方法
一.setTimeout() 延迟性操作 window.setTimeout(function(){ console.log('派大星');//延迟了4秒 },4000); console.log(' ...
- [灵魂拷问]MySQL面试高频100问(工程师方向)
作者:呼延十 juejin.im/post/5d351303f265da1bd30596f9 前言 本文主要受众为开发人员,所以不涉及到MySQL的服务部署等操作,且内容较多,大家准备好耐心和瓜子矿泉 ...
- execjs使用时异常
一.异常信息(...gbk.....) UnicodeDecodeError: 'gbk' codec can't decode byte 0xa1 in position 26: illegal m ...
- Java集合专题
1.Java 中常用的容器有哪些? 常见容器主要包括 Collection 和 Map 两种,Collection 存储着对象的集合,而 Map 存储着键值对(两个对象)的映射表. Collectio ...
- PostgreSQL 修改表字段常用命令
--数据库.模式.表名 "identities"."Test"."tab_test" --修改字段名 ALTER TABLE "i ...
- JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...
- Web 安全总结
同源策略 如果两个 URL 的协议.域名和端口都相同,我们就称这两个 URL 同源. 同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作. 同源策略限制了不同源的站 ...
- arcgis api for javascript 学习(三) 调用发布地图信息,并将地图属性信息输出到Excel表中
吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...