Mar*_*rko 10 asp.net-mvc blazor asp.net-core-3.0
我有一个用 .net core MVC 编写的 Web 应用程序，这是一个使用模型/视图/控制器模式的标准“老派”Web 应用程序。在这个应用程序中，我有一些复杂的表单，它们会根据用户的选择而改变。根据用户在前几个下拉列表中选择的内容加载不同的元素。目前我使用 Vue.js 成功构建了这样一个界面。所以基本上我没有 SPA 应用程序，但是当需要复杂的前端界面时，我偶尔会在整个应用程序中使用 Vue.js。
现在客户端 WebAssembly Blazor 正式推出，我想用基于 Blazor 的代码替换我用 vue.js 编写的复杂表单。我发现，说明了如何使用服务器端Blazor这样做后在这里，但我无法找到关于它的WebAssembly版本什么。
有没有人设法将客户端 - Web 程序集 Blazor 集成到现有的 MVC 项目中？如果是这样怎么办？
我已经完成了这个工作，这真的让我度过了愉快的一周。
首先，将您的 MVC 项目更新或转换为 .Net 5.0.402。它可能适用于早期版本，但我还没有测试过。
向您的 MVC 解决方案添加 blazor Web 程序集应用项目。这是 Web 组装组件项目。
在 MVC 视图中，在您希望渲染 blazor 组件的位置添加：
@using myawesomewasmprojectnamespace.Pages
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered"/>
<script src="_framework/blazor.webassembly.js"></script>
“@using”声明指的是 blazor Web 程序集应用项目的 Pages 目录。“typeof(Counter)”类型是指 Visual Studio 提供的默认 blazor Web 程序集应用程序项目中的 Counter.razor 组件。这当然可以替换为最终的设计组件。
在 MVC 项目的 _Layout.cshtml 中，或者<head>MVC 视图的标记所在的任何位置，包含在<head>其中包含 blazor 组件的每个页面的标记中：
<base href="/"/>
将“Microsoft.AspNetCore.Components.WebAssembly.Server”包添加到 MVC 项目中。
在 MVC 依赖项、项目引用中添加对 blazor Web Assembly 应用程序项目的引用。
在 MVC 应用程序 Startup.cs 的“public void Configure(IApplicationBuilder app, IWebHostEnvironment env)”方法中，添加以下内容：
app.UseBlazorFrameworkFiles();
在 blazor Web Assembly 应用程序项目 Program.cs 文件中，注释掉以下行以停止应用程序查找“ <div id="app"></div>”
//builder.RootComponents.Add<App>("#app");
最后，从 blazor Web Assembly 应用程序项目的 wwwroot 目录中删除该图标，因为它会与 MVC 发生冲突。
然后，这会将“计数器”组件添加到您的 MVC 视图中。
要将不同的组件添加到不同的视图，请将其插入：
@using myawesomewasmprojectnamespace.Pages
<component type="typeof(Myawsomecomponentnamecompletelydifferentfromanymvccontrolleroractionname)" render-mode="WebAssemblyPrerendered"/>
<script src="_framework/blazor.webassembly.js"></script>
并启动你的 blazor 组件：
@page "/myawsomecomponentnamecompletelydifferentfromanymvccontrolleroractionname"
我很高兴能够让这个工作正常进行，因为我已经尝试了很多年了。如果您无法使其正常工作，请给我留言，我会尽力回答任何问题。
要将 Blazor WASM 设置到现有项目，您需要：
UseBlazorFrameworkFiles()到您的中间件管道中UseStaticFiles()到您的中间件管道中MapFallbackToFile到指向 Blazor WASM index.html 的端点public void Configure(IApplicationBuilder app)
{
if (Environment.IsDevelopment())
{
app.UseDeveloperExceptionPage()
.UseDatabaseErrorPage();
}
else
{
app.UseExceptionHandler("/Home/Error")
.UseHsts();
}
app.UseHttpsRedirection()
.UseBlazorFrameworkFiles()
.UseStaticFiles()
.UseRouting()
.UseAuthentication()
.UseAuthorization()
.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapFallbackToFile("index.html");
});
}
| 归档时间： |
|
| 查看次数： |
3745 次 |
| 最近记录： |