如何在 Blazor 中发送和接收消息的 signalr 中放置发送和接收 css？答案

【问题标题】：How to put sent and receive css in signalr sent and received message in blazor?如何在 Blazor 中发送和接收消息的 signalr 中放置发送和接收 css？
【发布时间】：2021-03-09 08:57:46
【问题描述】：

在这里，我使用 SignalR 制作了带有数据库的简单 blazor 聊天应用程序。

现在，我的问题是我有用于发送和接收消息的 css，但我不知道将这些 css 放入的任何逻辑我发送和接收的消息。
帮助我的代码会很棒。

下面是我的代码

    public string MsgBody { get; set; }
    public string UserName { get; set; }
    public Message chatmsg { get; set; } = new Message();
    public bool isChatting = false;
    public string errorMsg;
    public List<Message> messages = new List<Message>();
    public HubConnection hubConnection;
    [Inject]
    public NavigationManager NavigationManager { get; set; }
    [Inject]
    public MainService mainService { get; set; }
    public async Task Chat()
    {
        if (string.IsNullOrWhiteSpace(UserName))
        {
            errorMsg = "Enter your name";
        }
        try
        {
            isChatting = true;
            messages.Clear();
            hubConnection = new HubConnectionBuilder().WithUrl(NavigationManager.ToAbsoluteUri("/chat")).Build();
            hubConnection.ServerTimeout = TimeSpan.FromMinutes(60);
            hubConnection.On<string>("Reicever", BroadcastMessage);
            await hubConnection.StartAsync();

            messages = mainService.GetAllMessages();

        }
        catch (Exception e)
        {

            errorMsg = $"ERROR: Failed to start chat client: {e.Message}";
            isChatting = false;
        }
    }
    private void BroadcastMessage(string name)
    {
        messages = mainService.GetAllMessages();
        StateHasChanged();
    }
    public async Task SendAsync()
    {
        chatmsg.UsrName = UserName;
        chatmsg.MessageBody = MsgBody;
        mainService.SaveMessage(chatmsg);
        await hubConnection.SendAsync("SendMessage");
        MsgBody = string.Empty;
        chatmsg = new Message();
    }
    public async Task DisconnectAsync()
    {
        if (isChatting)
        {
            await hubConnection.StopAsync();
            await hubConnection.DisposeAsync();

            hubConnection = null;
            isChatting = false;
        }
    }

以下是我的看法

@if (!isChatting)
{
    <div class="col-lg-5">
        <p>Enter your name to start chatting:</p>

    <div class="input-group  my-3">
        <input @bind="UserName" type="text" class="form-control my-input">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" @onclick="@Chat"><span class="oi oi-chat" aria-hidden="true"></span> Chat!</button>
        </div>
    </div>
    </div>
    if (errorMsg != null)
    {
       <div class="col-lg-5">
          <small id="emailHelp" class="form-text text-danger">@errorMsg</small>
       </div>
    }
}
else
{
<div class="alert alert-secondary mt-4" role="alert">
    <span class="oi oi-person mr-2" aria-hidden="true"></span>
    <span>you are connected as <b>@UserName</b></span>
    <button class="btn btn-sm btn-warning ml-md-auto" @onclick="@DisconnectAsync">disconnect</button>
</div>
<div id="scrollbox">
    @foreach (var item in messages)
    {
        <div> // message sent and receive css in this div
            <div class="user">@item.UsrName</div>
            <div class="msg">@item.MessageBody</div>
        </div>
    }
    <hr />
    <textarea class="input-lg" placeholder="enter your comment" @bind="MsgBody"></textarea>
    <button class="btn btn-default" @onclick="()=>SendAsync()">Send</button>
</div>
}

下面是我的 CSS

.received, .sent {
position: relative;
font-family: arial;
font-size: 1.1em;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}

.received:after, .sent:after {
    content: '';
    border: 20px solid transparent;
    position: absolute;
    margin-top: -30px;
}

.sent {
background: #03a9f4;
color: #fff;
margin-left: 10%;
top: 50%;
text-align: right;
}

.received {
background: #4CAF50;
color: #fff;
margin-left: 10px;
margin-right: 10%;
}

.sent:after {
border-left-color: #03a9f4;
border-right: 0;
right: -20px;
}

.received:after {
border-right-color: #4CAF50;
border-left: 0;
left: -20px;
}

【问题讨论】：

标签： c# css asp.net-core blazor

【解决方案1】：

几乎任何 html 属性都可以使用字符串变量：

<div class="msg @CSS">This is my text</div>
<button @onclick="UpdateClass">Change</button>

@code {
    string CSS = "normal";

    void UpdateClass()
    {
        CSS = "Receive";
    }
}

如果您在 Chrome 开发工具中检查上述示例中的消息 div，您会看到它非常高兴地在您单击按钮后立即为您更改了类。

我建议在您的 Message 类中添加一个新成员 string CssClass，以便您可以非常轻松地设置和使用它：

<div class="msg @item.CssClass">@item.MessageBody</div>

【讨论】：