DevExpress中Blazor部分学习

DevExpress中Blazor学习

- 1 DevExpress版本
- 2 学习步骤
- - 2.1 查看Dev相应的Demo
  - 2.2 创建第一个相关应用
  - 2.3 使用XPO进行相关数据操作
  - 2.4 Dev Blazor使用XPO操作
- 3 学习中遇到问题及解决方案
- - 3.1 打开Dev相关Demo报错

1 DevExpress版本

安装较新的DevExpress，我这边使用的是24.1.*版

2 学习步骤

2.1 查看Dev相应的Demo

Dev安装完成之后，打开其自带的解决方案，查看相关Demo，Demo有相关组件的使用方式。

2.2 创建第一个相关应用

https://docs.devexpress.com/Blazor/401988/get-started/create-project-blazor-web-app

2.3 使用XPO进行相关数据操作

确定相关文档的位置，进行搜索，尝试第一次XPO的使用

在这里插入图片描述
按照文档目录逐步深入了解，先从“Hello World”开始

各个不同数据库连接：https://docs.devexpress.com/XPO/2114/product-information/database-systems-supported-by-xpo

//项目想要使用XPO，需要安装包：DevExpress.Xpo
//数据连接及操作如下
string connectionString = "XpoProvider=MSSqlServer;Data Source=.\\SqlDBInst;User ID=sa;Password=123;Initial Catalog=Test;Persist Security Info=true";
XpoDefault.DataLayer = XpoDefault.GetDataLayer(connectionString, AutoCreateOption.DatabaseAndSchema);// Create data:
Console.WriteLine($"Type some text to create a new 'StatisticInfo' record.");
string userInput = Console.ReadLine();
using (UnitOfWork uow = new UnitOfWork())
{StatisticInfo newInfo = new StatisticInfo(uow);newInfo.Info = userInput;newInfo.Date = DateTime.Now;uow.CommitChanges();}
// Read data:
Console.WriteLine($"Your text is saved. The 'StatisticInfo' table now contains the following records:");
using (UnitOfWork uow = new UnitOfWork())
{var query = uow.Query<StatisticInfo>().OrderBy(info => info.Date).Select(info => $"[{info.Date}] {info.Info}");foreach (var line in query){Console.WriteLine(line);}
}
// Delete data:
using (UnitOfWork uow = new UnitOfWork())
{var itemsToDelete = uow.Query<StatisticInfo>().ToList();Console.Write($"Records count is {itemsToDelete.Count}. Do you want to delete all records (y/N)?: ");if (Console.ReadLine().ToLowerInvariant() == "y"){uow.Delete(itemsToDelete);uow.CommitChanges();Console.WriteLine($"Done.");}
}

2.4 Dev Blazor使用XPO操作

1.创建Dev Blazor项目
在这里插入图片描述

2.使用sql server数据库作为测试库，需要安装包：
在这里插入图片描述
3.创建数据库操作类

public class SelfConnectionHelper
{string FConnectionString = "XpoProvider=MSSqlServer;Data Source=.\\SqlDBInst;User ID=sa;Password=123;Initial Catalog=Test;Persist Security Info=true";//XpoDefault.DataLayer = XpoDefault.GetDataLayer(FConnectionString, AutoCreateOption.DatabaseAndSchema);public SelfConnectionHelper(){XpoDefault.DataLayer = XpoDefault.GetDataLayer(FConnectionString, AutoCreateOption.DatabaseAndSchema);}public void AddData(string aInfo) {using (UnitOfWork uow = new UnitOfWork()){StatisticInfo newInfo = new StatisticInfo(uow);newInfo.Info = aInfo;newInfo.Date = DateTime.Now;uow.CommitChanges();}}
}

4.如何在组件/界面进行数据库操作

//第一种方式，直接使用操作类
@page "/data-operate"
@* 交互方式，若有交互，必有此指令 *@
@rendermode InteractiveServer<h3>DataOperate</h3>
@* bind指令，绑定数据，可进行交互 *@
<input @bind="Info" />
<button onclick="@AddData">添加</button>@code {private string Info = "test";private void AddData(){//直接使用操作类SelfConnectionHelper bHelper = new SelfConnectionHelper();bHelper.AddData(Info);}
}//第二种方式，使用依赖注入的方式
//在program.cs中注册服务
builder.Services.AddSingleton<SelfConnectionHelper>();
//在组件/界面中使用注册的服务
@page "/data-operate"
@inject SelfConnectionHelper bHelper
@rendermode InteractiveServer<h3>DataOperate</h3><input @bind="Info" />
<button onclick="@AddData">添加</button>@code {private string Info = "test";private void AddData(){//SelfConnectionHelper bHelper = new SelfConnectionHelper();bHelper.AddData(Info);}
}

3 学习中遇到问题及解决方案

3.1 打开Dev相关Demo报错

在这里插入图片描述
解决步骤：经过对比发现，Blazor Demo来自于同一个项目，根据提示路径打开解决方案（也可在相应的demo上右键单击打开解决方案），编译运行程序，提示“正在通过 “HTTP” 源“xx”运行“restore”操作。将来的版本中将删除非HTTPS 访问权限。请考虑迁移到 “HTTPS” 源”，可通过以下方式解决：