首页 > 其他分享 >bh002- Blazor hybrid / Maui 保存设置快速教程

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

时间:2023-08-21 23:55:39浏览次数:52  
标签:Username Index razor hybrid bh002 添加 Maui using

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. 执行效果

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

标签:Username,Index,razor,hybrid,bh002,添加,Maui,using
From: https://www.cnblogs.com/densen2014/p/17647378.html

相关文章

  • Maui Blazor 安卓文字随系统文字缩放问题解决
    MauiBlazor的文字在正常情况下会随着用户手机内的系统文字设置大小而变化,所以可能导致手机应用内APP的布局由于文字变得过大或者过小而错乱。可以通过设置Webview里的文字缩放,保持应用内文字大小不变,代码如下:1.首先在Mainpage.xaml里设置好初始化事件,BlazorWebViewInitialize......
  • bh001- Blazor hybrid / Maui 使用摄像头和扫码快速教程
    1.建立工程bh001_camera_barcode源码2.添加nuget包BlazorHybrid.Maui.Permissions因为源码比较长,主要是一些检查和申请权限相关代码,就不占用篇幅列出,感兴趣的同学直接打开源码参考3.添加安卓摄像头权限双击编辑文件,或者手工添加<uses-permissionandroid:name="a......
  • MAUI+Masa Blazor APP 各大商店新手发布指南(一)App Store篇
    目录前言新手常见审核意见Guideline2.1-InformationNeededGuideline2.1-Performance-AppCompletenessGuideline2.3.8-Performance-AccurateMetadataGuideline5.1.1(v)-DataCollectionandStorageGuideline4.2-Design-MinimumFunctionalityGuideline4.......
  • [MAUI]在.NET MAUI中实现可拖拽排序列表
    .NETMAUI中提供了拖放(drag-drop)手势识别器,允许用户通过拖动手势来移动控件。在这篇文章中,我们将学习如何使用拖放手势识别器来实现可拖拽排序列表。在本例中,列表中显示不同大小的磁贴(Tile)并且可以拖拽排序。使用.NETMAU实现跨平台支持,本项目可运行于Android、iOS平台。创......
  • MAUI+Masa Blazor APP Store新手上线指南
    目录前言新手常见审核意见Guideline2.1-InformationNeededGuideline2.1-Performance-AppCompletenessGuideline2.3.8-Performance-AccurateMetadataGuideline5.1.1(v)-DataCollectionandStorageGuideline4.2-Design-MinimumFunctionalityGuideline4.......
  • 创新的前端框架: Hybrid技术的不断发展
    HybridApp混合应用开发原理HybridApp,即混合应用是指同时使用前端技术与原生技术开发的App。通常由前端负责大部分界面开发和业务逻辑,原生负责封装原生功能供前端调用,二者以WebView作为媒介建立通信,从而既拥有Web开发的速度优势,又能拥有强大的原生能力。从前端开发者的角度......
  • Hybrid-SORT起飞 | 超过DeepSORT将近10个点的多目标跟踪香不香?
    前言 多目标跟踪(MOT)旨在在帧间检测和关联所有所需的目标。大多数方法通过明确或隐式地利用强大的线索(即空间和外观信息)来完成任务,这些线索表现出强大的实例级别判别能力。然而,当出现目标遮挡和聚类时,由于目标之间的高度重叠,空间和外观信息同时变得模糊不清。在本文中,作者证明MOT......
  • 文档控件DevExpress Office File API v23.1新版亮点 - 支持.NET MAUI
    DevExpressOfficeFileAPI是一个专为C#,VB.NET和ASP.NET等开发人员提供的非可视化.NET库。有了这个库,不用安装MicrosoftOffice,就可以完全自动处理Excel、Word等文档。开发人员使用一个非常易于操作的API就可以生成XLS,XLSx,DOC,DOCx,RTF,CSV和SnapReport等企业级文......
  • Hybrid App 技术路径带动性能的提升
    说到HybridApp(混合应用)大家都不陌生,因为这种开发模式大行其道发展的这些年取代了很多原生和Web应用,为什么大家对这种「Native+HTML5」的开发模式额外偏爱呢?因为一方面在一定程度上兼顾了原生应用的优质体验,另一方面又兼顾到了HTML5灵活的开发模式。这种模式的核心就在......
  • 几种常用到的 Hybrid App 技术框架
    移动操作系统在经历了诸神混战之后,BlackBerryOS、SymbianOS、WindowsPhone等早期的移动操作系统逐渐因失去竞争力而退出。目前,市场上主要只剩下安卓和iOS两大阵营,使得iOS和安卓工程师成为抢手资源。然而,由于两者系统的差异,开发同一个应用需投入两倍的工作量,不仅增加了人力......