DevExpress中Blazor部分学习

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” 源”，可通过以下方式解决：

<NoWarn>$(NoWarn);NU1803</NoWarn>

这里脑子一抽，竟然想要运行类库项目，结果提示异常：

3.2 在当前组件库中没有找到轮播图相关组件

采用其他第三方组件库：Blazor Bootstrap：https://demos.blazorbootstrap.com/getting-started
https://www.blazor.zone/introduction/