如何在 Blazor SignalR 中发送带有文本的表情符号

Question

我使用 blazor 服务器 signalR 开发了一个私人聊天应用程序，我们可以在其中添加朋友并与他们私下聊天。

现在，我想要的是发送表情符号和短信。

为了在输入文本框中获取表情符号，我所做的是将 Id id="mytext" 提供给绑定到 @bind="MsgBody" 的输入，并将其传递给 javascript 函数 SetElemetById(id)。

现在，问题是当在输入中调用 Javascript 函数 SetElemetById(id) 时，MsgBody 在按钮单击 @onclick="SendMessage" 时为 null，如果未调用，那么我们在 MsgBody 但我们没有输入表情符号。

任何有关我的代码的帮助或任何关于如何发送表情符号和文本的想法都会很棒。谢谢

下面是我的剃须刀组件 html

<input type="text" name="message" id="mytext" @bind="MsgBody" class="form-control Message-Input">
<button type="button" class="btn btn-primary" @onclick="SendMessage"> Send</button><br><br>

下面是我调用javascript函数的代码

protected override async Task OnInitializedAsync()
{
    await iJSRuntime.InvokeVoidAsync("SetElemetById","mytext");
}

下面是我的 javascript 函数

function SetElemetById(id) {
    var getTextBoxId = document.getElementById(id)
    $(getTextBoxId).emojioneArea({
    pickerPosition: "bottom"
    });
};

下面是我保存来自输入的消息的代码

    public async Task SendMessage()
    {
      dualMessage.MessageBody = MsgBody; // MsgBody is null
      dualMessage.SendOn = DateTime.Now;
      mainService.SaveChatMessage(dualMessage);
    }

Answer 1

没有 javascript 为什么不成功？

用你想要的 utf32 表情符号定义一个数组，并在浏览器中创建一个小键盘来添加这些表情符号。

<!-- Emoji Keyboard -->
<div>
  @foreach (var c in emojis)
  {
    <button type="button" class="btn btn-primary m-1" @onclick="(() => AddEmoji(c))" >@c</button>
  }
</div>

@code {
   //List of emojis
   String[] emojis = new String[] { "\U0001F600", "\U0001F601", "\U0001F602", "\U0001F602" };

   //Add Emoji to Message
   protected async Task AddEmoji(string emoji)
   {
       MsgBody += emoji;
       StateHasChanged();
   }

Answer 2

你的做法是错误的。 Blazor 数据绑定引擎会忽略您对 Html 标记呈现的任何更改。因此，您不能影响来自 JavaScript 的输入文本元素的数据绑定。这就是 MsgBody 变量始终为空的原因。但即使可以，您也应该首先尝试在 Blazor 中实现所有内容，如果证明不可能，请求助于 JSInterop。

protected override async Task OnInitializedAsync()
{
    await iJSRuntime.InvokeVoidAsync("SetElemetById","mytext");
}

仅作记录，您应该从 OnAfterRender(Async) 对初始化您的 JS 对象，并且只初始化一次；那就是你从这样的 if 语句中调用你的 init 函数：

if(firstRender)
{
  // Call your JS init functions
}

尝试以下方法来实现表情符号功能：

转到Github并下载存储库代码
解压...它被解压到一个名为： RealtimeChat_WebAssembly-master
此文件夹包含两个文件夹：EmojiPicker 和 WSDTChat. EmojiPicker 文件夹为空。为什么？我没有浪费时间学习。
但是，我通过从 here
下载代码解决了这个问题
提取文件夹，然后将其内容复制到EmojiPicker 文件夹。这样做...
打开Visual Studio中的解决方案，构建解决方案，然后执行命令：update-database 在程序包管理器控制台中创建数据库。现在运行应用程序并对其进行测试。
测试添加表情符号和照片的功能。
现在，你要做的就是跟着相关的代码去了解这家伙是怎么做到的实施表情符号的使用...复制必要的代码并将其应用于您的聊天。
您可以从此应用程序中采用您的应用程序缺少的功能以及 UI 外观和行为。

请执行以上操作，如果您遇到任何问题请告诉我。如果你是一名程序员，那么你应该愉快地尝试独自解决所有问题。但我在这里，我不是程序员；}

如何在 Blazor SignalR 中发送带有文本的表情符号

How To Send Emoji With Text In Blazor SignalR

javascript

c#

signalr

asp.net-core

blazor