C# 从Blazor上的串行端口读取_C#_.net Core_Blazor_Blazor Server Side

C# 从Blazor上的串行端口读取

c# .net-core blazor

C# 从Blazor上的串行端口读取,c#,.net-core,blazor,blazor-server-side,C#,.net Core,Blazor,Blazor Server Side,我是Blazor的新手，我正在尝试创建一个从串口读取的应用程序。首先，我使用.Core 3.1创建了一个控制台应用程序一切正常，所以我将代码移到Blazor，尽管当我设置调试点时，我可以看到代码正常工作，但我无法让UI显示值 @using System; @using System.Diagnostics; @using System.IO.Ports; @using System.Threading; <head> <title>Main Scale M

我是Blazor的新手，我正在尝试创建一个从串口读取的应用程序。首先，我使用.Core 3.1创建了一个控制台应用程序一切正常，所以我将代码移到Blazor，尽管当我设置调试点时，我可以看到代码正常工作，但我无法让UI显示值

@using System;
@using System.Diagnostics;
@using System.IO.Ports;
@using System.Threading;


<head>
    <title>Main Scale Monitor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/all.css" rel="stylesheet">
    <link href="/css/stylesheet.css" rel="stylesheet">
</head>


<div class="scale-monitor">
    <div class="digital-monitor net-weight grid-line">
        <div class="digital-monitor-left net-left">NET</div>
        <div class="digital-monitor-center net-center" bind="@ScaleValue"></div>
        <div class="digital-monitor-right net-right">Kg</div>
    </div>
</div>


@code {

    public string ScaleValue { get; set; } = "0.001";

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            System.IO.Ports.SerialPort mySerialPort = new System.IO.Ports.SerialPort("COM3");

            mySerialPort.BaudRate = 9600;
            mySerialPort.Parity = System.IO.Ports.Parity.None;
            mySerialPort.StopBits = System.IO.Ports.StopBits.One;
            mySerialPort.DataBits = 8;
            mySerialPort.Handshake = System.IO.Ports.Handshake.None;

            mySerialPort.NewLine = (@"&N");

            mySerialPort.DataReceived += new System.IO.Ports.SerialDataReceivedEventHandler(DataReceivedHandler);

            if (!mySerialPort.IsOpen)
            {
                mySerialPort.Open();

            }
        }
    }


    private void DataReceivedHandler(object sender, System.IO.Ports.SerialDataReceivedEventArgs e)
    {
        System.IO.Ports.SerialPort sp = (System.IO.Ports.SerialPort)sender;

        try
        {
            string indata = sp.ReadLine();
            ScaleValue = indata.ToString(); //WHEN I PUT DEBUG HERE I CAN SEE THE CORRECT VALUE

        }
        catch (Exception ex)
        {
            string msg = ex.Message;
        }

    }
}


<style>

    *, ::after, ::before {
        box-sizing: unset;
    }

    .grid-line {
        border: 1px solid black;
    }

    .scale-monitor {
        display: grid;
        grid-template-columns: 35% 35% 30%;
        grid-template-rows: 50% 50%;
        width: 100%;
        height: 90%;
        margin: 5px;
        width: 1020px;
    }


    /*#region generic*/

    .digital-monitor {
        background: #000000;
        color: greenyellow;
        text-align: right;
        font-family: digitalregular;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(5, 1fr);
        width: 95%;
        height: 95%;
        margin: 5px;
        border-radius: 15px;
        align-items: center;
    }

    /*#region generic scalemonitor*/
    .digital-monitor-left {
        writing-mode: vertical-rl;
        opacity: 0.5;
        grid-row: 1 / span 5;
        grid-column: 1;
        text-align: center;
        grid-column: 1;
        transform: rotate(180deg);
    }

    .digital-monitor-center {
        grid-row: 2 / span 3;
        grid-column: 2/ span 7;
        text-align: right;
        vertical-align: bottom;
    }

    .digital-monitor-right {
        grid-row: 2 / span 3;
        grid-column: 9/ span 2;
        text-align: right;
        opacity: 0.75;
        margin-bottom: 0.4em;
        margin-right: 3px;
        align-self: self-end;
    }
    /*#endregion*/

    /*#endregion*/


    /*#region NET*/
    .net-weight {
        grid-column: 2;
        grid-row: 1 / span 2;
        height: 98%;
    }

    .net-left {
        font-size: 40px;
    }

    .net-center {
        font-size: 100px;
    }

    .net-right {
        font-size: 40px;
    }

    /*#endregion NET*/
</style>

@使用系统；
@使用系统诊断；
@使用System.IO.Ports；
@使用系统线程；
主刻度监视器
网
公斤
@代码{
公共字符串ScaleValue{get；set；}=“0.001”；
受保护的覆盖无效OnAfterRender（布尔firstRender）
{
if（firstRender）
{
System.IO.Ports.SerialPort mySerialPort=new System.IO.Ports.SerialPort（“COM3”）；
mySerialPort.BaudRate=9600；
mySerialPort.Parity=System.IO.Ports.Parity.None；
mySerialPort.StopBits=System.IO.Ports.StopBits.One；
mySerialPort.DataBits=8；
mySerialPort.Handshake=System.IO.Ports.Handshake.None；
mySerialPort.NewLine=（@“&N”）；
mySerialPort.DataReceived+=新系统.IO.Ports.SerialDataReceiveDevenHandler（DataReceivedHandler）；
如果（！mySerialPort.IsOpen）
{
mySerialPort.Open（）；
}
}
}
私有void DataReceivedHandler（对象发送方，System.IO.Ports.SerialDataReceivedEventArgs e）
{
System.IO.Ports.SerialPort sp=（System.IO.Ports.SerialPort）发送方；
尝试
{
字符串indata=sp.ReadLine（）；
ScaleValue=indata.ToString（）；//当我把DEBUG放在这里时，我可以看到正确的值
}
捕获（例外情况除外）
{
字符串msg=例如消息；
}
}
}
*，：：之后，：：之前{
盒子尺寸：未设置；
}
.网格线{
边框：1px纯黑；
}
.电子秤监视器{
显示：网格；
网格模板列：35%35%30%；
网格模板行：50%50%；
宽度：100%；
身高：90%；
保证金：5px；
宽度：1020px；
}
/*#区域属*/
.数字显示器{
背景：#000000；
颜色：绿黄色；
文本对齐：右对齐；
字体系列：digitalregular；
显示：网格；
网格模板列：重复（10，1fr）；
网格模板行：重复（5，1fr）；
宽度：95%；
身高：95%；
保证金：5px；
边界半径：15px；
对齐项目：居中；
}
/*#区域通用标度监视器*/
.数字显示器左{
写入方式：垂直rl；
不透明度：0.5；
网格行：1/5跨；
网格柱：1；
文本对齐：居中；
网格柱：1；
变换：旋转（180度）；
}
.数字监控中心{
网格行：2/3跨；
格构柱：2/7跨；
文本对齐：右对齐；
垂直对齐：底部对齐；
}
.数字显示器对吗{
网格行：2/3跨；
格构柱：9/2跨；
文本对齐：右对齐；
不透明度：0.75；
边缘底部：0.4em；
右边距：3倍；
自对齐：自结束；
}
/*#端区*/
/*#端区*/
/*#区域网*/
.净重{
网格柱：2；
网格行：1/2跨；
身高：98%；
}
.net左{
字体大小：40px；
}
.net中心{
字体大小：100px；
}
.net权限{
字体大小：40px；
}
/*#端域网*/

您知道如何进行正确的绑定吗？

来自Blazor生命周期： “渲染后立即执行的异步工作必须在OnAfterRenderAsync生命周期事件期间发生

即使您从OnAfterRenderAsync返回任务，框架也不会在该任务完成后为组件安排进一步的渲染周期。这是为了避免无限的渲染循环。这与其他生命周期方法不同，后者在返回的任务完成后安排进一步的渲染周期。”

设置

ScaleValue

后，尝试手动调用

StateHasChanged（）

。

您的问题在于尝试将值绑定到div

div

元素不是组件，不支持bind属性

试试这个：

@ScaleValue

由于代码不依赖于页面的呈现，请将其设置为使用其他生命周期方法

尝试将其放入

protectedoverride void OnInitialized（）{}

编辑：

在这里阅读Blazor的生命周期：

编辑：代码示例

@using System;
@using System.Diagnostics;
@using System.IO.Ports;
@using System.Threading;

@page "/Test";


<head>
    <title>Main Scale Monitor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/all.css" rel="stylesheet">
    <link href="/css/stylesheet.css" rel="stylesheet">
</head>


<div class="scale-monitor">
    <div class="digital-monitor net-weight grid-line">
        <div class="digital-monitor-left net-left">NET</div>
        <div class="digital-monitor-center net-center">@ScaleValue</div>
        <div class="digital-monitor-right net-right">Kg</div>
    </div>
</div>


@code {

    public string ScaleValue { get; set; } = "0.001";

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
        }
    }

    protected override void OnInitialized()
    {

        System.IO.Ports.SerialPort mySerialPort = new System.IO.Ports.SerialPort("COM3");

        mySerialPort.BaudRate = 9600;
        mySerialPort.Parity = System.IO.Ports.Parity.None;
        mySerialPort.StopBits = System.IO.Ports.StopBits.One;
        mySerialPort.DataBits = 8;
        mySerialPort.Handshake = System.IO.Ports.Handshake.None;

        mySerialPort.NewLine = (@"&N");

        mySerialPort.DataReceived += new System.IO.Ports.SerialDataReceivedEventHandler(DataReceivedHandler);

        ScaleValue = "test";

        //I skipped this part with a return, since I don't have COM3 locally

        if (!mySerialPort.IsOpen)
        {
            mySerialPort.Open();

        }
    }


    private void DataReceivedHandler(object sender, System.IO.Ports.SerialDataReceivedEventArgs e)
    {
        System.IO.Ports.SerialPort sp = (System.IO.Ports.SerialPort)sender;

        try
        {
            string indata = sp.ReadLine();
            ScaleValue = indata.ToString(); //WHEN I PUT DEBUG HERE I CAN SEE THE CORRECT VALUE

        }
        catch (Exception ex)
        {
            string msg = ex.Message;
        }

    }
}


<style>

    *, ::after, ::before {
        box-sizing: unset;
    }

    .grid-line {
        border: 1px solid black;
    }

    .scale-monitor {
        display: grid;
        grid-template-columns: 35% 35% 30%;
        grid-template-rows: 50% 50%;
        width: 100%;
        height: 90%;
        margin: 5px;
        width: 1020px;
    }


    /*#region generic*/

    .digital-monitor {
        background: #000000;
        color: greenyellow;
        text-align: right;
        font-family: digitalregular;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(5, 1fr);
        width: 95%;
        height: 95%;
        margin: 5px;
        border-radius: 15px;
        align-items: center;
    }

    /*#region generic scalemonitor*/
    .digital-monitor-left {
        writing-mode: vertical-rl;
        opacity: 0.5;
        grid-row: 1 / span 5;
        grid-column: 1;
        text-align: center;
        grid-column: 1;
        transform: rotate(180deg);
    }

    .digital-monitor-center {
        grid-row: 2 / span 3;
        grid-column: 2/ span 7;
        text-align: right;
        vertical-align: bottom;
    }

    .digital-monitor-right {
        grid-row: 2 / span 3;
        grid-column: 9/ span 2;
        text-align: right;
        opacity: 0.75;
        margin-bottom: 0.4em;
        margin-right: 3px;
        align-self: self-end;
    }
    /*#endregion*/

    /*#endregion*/


    /*#region NET*/
    .net-weight {
        grid-column: 2;
        grid-row: 1 / span 2;
        height: 98%;
    }

    .net-left {
        font-size: 40px;
    }

    .net-center {
        font-size: 100px;
    }

    .net-right {
        font-size: 40px;
    }

    /*#endregion NET*/
</style>

@使用系统；
@使用系统诊断；
@使用System.IO.Ports；
@使用系统线程；
@页面“/测试”；
主刻度监视器
网
@标度值
公斤
@代码{
公共字符串ScaleValue{get；set；}=“0.001”；
受保护的覆盖无效OnAfterRender（布尔firstRender）
{
if（firstRender）
{
}
}
受保护的覆盖无效OnInitialized（）
{
System.IO.Ports.SerialPort mySerialPort=new System.IO.Ports.SerialPort（“COM3”）；
mySerialPort.BaudRate=9600；
mySerialPort.Parity=System.IO.Ports.Parity.None；
mySerialPort.StopBits=System.IO.Ports.StopBits.One；
mySerialPort.DataBits=8；
mySerialPort.Handshake=System.IO.Ports.Handshake.None；
mySerialPort.NewLine=（@“&N”）；
mySerialPort.DataReceived+=新系统.IO.Ports.SerialDataReceiveDevenHandler（DataReceivedHandler）；
ScaleValue=“测试”；
//我跳过了这一部分并返回，因为我在本地没有COM3
如果（！mySerialPort.IsOpen）
{
mySerialPort.Open（）；
}
}
私有void DataReceivedHandler（对象发送方，System.IO.Ports.SerialDataReceivedEventArgs e）
{
System.IO.Ports.SerialPort sp=（System.IO.Ports.SerialPort）发送方；
尝试
{
字符串索引=
public class ReadSerialPortService
{
    public string SerialPortValue { get; set; }

    public ReadSerialPortService()
    {
        System.IO.Ports.SerialPort mySerialPort = new System.IO.Ports.SerialPort("COM3");

        mySerialPort.BaudRate = 9600;
        mySerialPort.Parity = System.IO.Ports.Parity.None;
        mySerialPort.StopBits = System.IO.Ports.StopBits.One;
        mySerialPort.DataBits = 8;
        mySerialPort.Handshake = System.IO.Ports.Handshake.None;

        mySerialPort.NewLine = (@"&N");

        if (!mySerialPort.IsOpen)
        {
            mySerialPort.DataReceived += new System.IO.Ports.SerialDataReceivedEventHandler(DataReceivedHandler);
            mySerialPort.Open();
        }
    }

    private void DataReceivedHandler(object sender, System.IO.Ports.SerialDataReceivedEventArgs e)
    {
        System.IO.Ports.SerialPort sp = (System.IO.Ports.SerialPort)sender;
        double scaleDec = 0.00;
        try
        {
            string indata = sp.ReadLine();
            SerialPortValue = indata.ToString();
        }
        catch (Exception ex)
        {
            string msg = ex.Message;
        }

    }

    public Task<string> GetSerialValue()
    {
        return Task.FromResult(SerialPortValue);
    }
}

@inject ReadSerialPortService _readSerialPortService
<head>
   <title>Main Scale Monitor</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="/css/all.css" rel="stylesheet">
   <link href="/css/stylesheet.css" rel="stylesheet">
</head>

<div class="scale-monitor">
   <div class="digital-monitor net-weight grid-line" @onclick="GetValue">
      <div class="digital-monitor-left net-left">NET</div>
      <div class="digital-monitor-center net-center">@ScaleValue</div>
      <div class="digital-monitor-right net-right">Kg</div>
   </div>
</div>


@code {
private int Count { get; set; } = 100;
Timer _updateTimer;
public string ScaleValue { get; set; } = "0.000";    

protected override async Task OnInitializedAsync()
{
    ScaleValue = await _readSerialPortService.GetSerialValue();
    _updateTimer = new Timer(state => { InvokeAsync(GetValue); }, null, 0, 100);
}


public async Task GetValue()
{
    ScaleValue = await _readSerialPortService.GetSerialValue();
    await InvokeAsync(() => StateHasChanged());
}

public void Dispose()
{
    _updateTimer.Dispose();
}