DevExpress中Blazor部分学习

DevExpress中Blazor学习

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

js 复制代码
//项目想要使用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.创建数据库操作类

js 复制代码
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.如何在组件/界面进行数据库操作

js 复制代码
//第一种方式,直接使用操作类
@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>

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

相关推荐
R-G-B4 小时前
【12】大恒相机SDK C#开发 ——多相机开发,枚举所有相机,并按配置文件中的相机顺序 将所有相机加入设备列表,以便于对每个指定的相机操作
c#·大恒相机sdk·大恒多相机开发·大恒多相机枚举·大恒多相机指定顺序
R-G-B4 小时前
【13】大恒相机SDK C#开发 —— Fom1中实时处理的8个图像 实时显示在Form2界面的 pictureBox中
c#·大恒相机sdk·图像实时显示在另一个界面
向宇it9 小时前
【unity小技巧】封装一套 Unity 的植物生长系统
游戏·unity·c#·游戏引擎
NFA晨曦11 小时前
力扣刷题日常(7-8)
算法·leetcode·c#
踏上青云路12 小时前
C# 闭包
java·前端·c#
86Eric12 小时前
C# 入门教程(四)委托详解
c#·委托·多播委托
80岁小姑娘15 小时前
.NET Core部署服务器
c#
bubiyoushang88815 小时前
基于C#的CAN通讯接口程序
stm32·单片机·c#
工程师00715 小时前
C#接口的定义与使用
开发语言·c#·接口
sali-tec15 小时前
C# 基于halcon的视觉工作流-章27-带色中线
开发语言·人工智能·算法·计算机视觉·c#