bh002- Blazor hybrid / Maui 保存设置快速教程

这篇具有很好参考价值的文章主要介绍了bh002- Blazor hybrid / Maui 保存设置快速教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 建立工程 bh002_ORM

源码

2. 添加 nuget 包

<PackageReference Include="BootstrapBlazor.WebAPI" Version="7.*" />
<PackageReference Include="FreeSql" Version="*" />
<PackageReference Include="FreeSql.Provider.SqliteCore" Version="*" />
<PackageReference Include="SQLitePCLRaw.bundle_e_sqlite3" Version="2.*" />

3. 添加命名空间引用

_Imports.razor

@using BootstrapBlazor.Components

4. 添加服务

MauiProgram.cs

在 return builder.Build(); 之前加入这句

builder.Services.AddScoped<IStorage, StorageService>();

5. 添加代码后置文件 Pages/Index.razor.cs

Index.razor.cs

using BootstrapBlazor.WebAPI.Services;
using Microsoft.AspNetCore.Components;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;

namespace bh002_ORM.Pages;

public partial class Index
{
    [Inject, NotNull] protected IStorage Storage { get; set; }

    [DisplayName("用户名")]
    [Required(ErrorMessage = "请输入用户名")]
    public string Username { get; set; }

    IFreeSql Fsql { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Username = await Storage.GetValue("username","");
            if (!string.IsNullOrEmpty(Username))
            {
                StateHasChanged();
            }
        }
    }

    async Task Login()
    {
        await Storage.SetValue("username", Username);
    } 
}

6. 添加 UI

Index.razor

@page "/"
<h1>Hello, @Username</h1>
用户名:
<InputText @bind-Value="Username" />
<button @onclick="Login">登录</button>

7. 执行效果

bh002- Blazor hybrid / Maui 保存设置快速教程,BootstrapBlazor,MAUI,Blazor hybird / MAUI Blazor,blazor,xamarin,Android,ios,uwp,winforms,wpf

8. 添加清除按钮

Index.razor

<button @onclick="Reset">清除</button>

Index.razor.cs

    async Task Reset()
    {
        await Storage.RemoveValue("username");
        Username = "";
    }

9. 相关资料

如何远程调试 MAUI blazor / Blazor Hybrid
https://www.cnblogs.com/densen2014/p/16988516.html

下篇 bh002- Blazor hybrid / Maui 使用ORM和数据库快速教程文章来源地址https://www.toymoban.com/news/detail-670574.html

到了这里,关于bh002- Blazor hybrid / Maui 保存设置快速教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [MAUI]深入了解.NET MAUI Blazor与Vue的混合开发

    .NET MAUI结合Vue的混合开发可以使用更加熟悉的Vue的语法代替Blazor语法,你现有项目不必重写。之前写过一篇 [MAUI] 在.NET MAUI中结合Vue实现混合开发 ,其中介绍了如何创建一个vue应用并将其打包至MAUI项目,这种方式依赖vue-cli创建和打包静态站点,好处是可以使用Node.js 的构建但

    2024年02月08日
    浏览(43)
  • MAUI+Blazor混合应用开发示例

    笔者之前在公司搭建过一套生产管理系统,该系统要求能和硬件进行串口通信,同时又要方便后台进行信息查询。笔者给出的解决方案就是: MAUI + Blazor ,这样只需要提供一套UI,就能满足桌面端、移动端和Web端三种不同应用场景。今天要介绍的是基于桌面端的开发实现(实

    2024年02月11日
    浏览(34)
  • MAUI+Blazor:windows 打包踩坑

    最近打算研究一下MAUI+Blazor,争取在今年年底之前彻底搞懂MAUI+Blazor的安装模式, Windows 4种安装程序格式MSI,EXE、AppX和MSIX优缺点对比以及后缀为 .msixbundle的文件怎么安装? 我们windows一般用exe文件进行安装,exe是最普遍的安装文件格式,原因是exe对于开发者具有最高的自定义

    2024年02月13日
    浏览(29)
  • 在MAUI中使用Masa Blazor

    在此之前我们已经介绍过什么是 Masa Blazor ,以及如何使用 Masa Blazor ,如果还有不了解 Masa Blazor 的同学可以看我上篇文章【初识Masa Blazor】。那么今天就带大家探索一下如何在 MAUI 中使用 Masa Blazor ,那么我们先来了解一下什么是MAUI? .NET MAUI全称为 .NET Multi-platform App UI ,顾名思

    2024年02月09日
    浏览(36)
  • 在winform中使用blazor hybrid构建页面

    Blazor Hybrid 使开发人员能够将桌面和移动本机客户端框架与 .NET 和 Blazor 结合使用。在 Blazor Hybrid 应用中,Razor 组件在设备上是本机运行的。 这些组件通过本地互操作通道呈现到嵌入式 Web 视图控件。 组件不在浏览器中运行,并且不涉及 WebAssembly。 Razor 组件可快速加载和执行

    2024年02月05日
    浏览(87)
  • 从0到1,手把手带你开发截图工具ScreenCap------002实现设置默认保存的图片位置

    在ScreenCap实现截图功能后增加设置图片默认保存位置的功能 实现选择文件夹作为截图的默认保存位置 注:博主所有资源永久免费,若有帮助,请点赞转发是对我莫大的帮助 注:博主本人学习过程的分享,引用他人的文章皆会标注原作者 注:本人文章非盈利性质,若有侵权请

    2024年02月05日
    浏览(75)
  • Blazor HyBrid在香橙派(Ubuntu Arm)运行的效果

    准备香橙派一块!当前教程使用的是香橙派5 4G开发板 准备.NET环境 安装.NET Core依赖 下载.NET 7 SDK 创建dotnet文件夹并解压 创建软连接 查看版本 如果需要使用 https 请使用 一下是一个 Masa Blazor 可以用于在 Arm 设备运行的程序 项目开源地址: 239573049/MasaLinuxDesktop (github.com) 然后在

    2024年02月06日
    浏览(140)
  • 在Winform中一分钟入门使用好看性能还好的Blazor Hybrid

    创建完成打开项目文件 WinformDesktop.csproj 文件 打开以后的项目文件,启动项目 这是提供的简单的项目Demo 我们只需要使用masa Blazor提供的模板,一分钟入门使用,你要做的只需要去Masa Blazor组件库去CV代码, 并且Masa Blazor也提供了Blazor在线编辑器去体验Masa Blazor的组件 MASA Try

    2024年02月05日
    浏览(39)
  • Maui Blazor windows程序无法通过双击 bin 文件夹中的 exe打开程序的解决办法

    ​ 使用Visual Studio创建了一个.NET Maui Blazor 应用,通过Visual Studio调试Windows应用时,需要打开开发者模式 打开开发者模式,调试一切正常,但如果直接运行bin文件夹下对应目录的exe时,没有任何反应,事件查看器中,会有这样的提示: Exception Info: System.DllNotFoundException: Unable

    2024年02月04日
    浏览(48)
  • Blazor UI库 Bootstrap Blazor 快速上手 (v7.5.7)

    最近组件库更新比较频繁,有些同学感觉有点迷茫,就着今天刚上了张老板一节课立马撸个新的上手教程回馈社区, ;- 增加主题样式表到 Pages/_Host.cshtml 文件中 删除 link rel=\\\"stylesheet\\\" href=\\\"css/bootstrap/bootstrap.min.css\\\" / 并在下面添加两行 添加 Javascript 引用到 Pages/_Host.cshtml 文件中 在

    2023年04月27日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包