我使用blazor服务器signalR开发了一个私人聊天应用程序，在那里我们可以添加好友并与他们私下聊天
现在，我想要的是发送表情符号和短信
为了在输入文本框中获得表情符号，我所做的是给输入Idid="mytext"，该Id绑定到@bind="MsgBody"，并传递给javascript函数SetElemetById(id)
现在的问题是，当在输入中调用Javascript函数SetElemetById(id)时，单击@onclick="SendMessage"按钮时，MsgBody为空，如果未调用，则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);
}
为什么不使用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();
}
您所做的是错误的。Blazor数据绑定引擎会忽略您对Html标记所做的任何更改。因此，您不能影响JavaScript中输入文本元素的数据绑定。这就是MsgBody变量始终为null的原因。但是，即使可以，您也应该首先尝试在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文件夹为空。为什么？我没有浪费时间学习。然而，我通过从这里下载代码解决了这个问题
提取文件夹，然后将其内容复制到
EmojiPicker文件夹这样做。。。在Visual Studio中打开解决方案，生成解决方案，然后执行命令：程序包管理器控制台中的
update-database，以便创建数据库现在运行应用程序并测试它。请测试添加表情符号和照片的功能。
现在，你要做的是遵循相关代码来了解这个家伙实现了表情符号的使用。。。复制必要的代码并将其应用于闲聊
您可以从此应用程序中采用您的应用程序缺少的功能以及UI外观和行为。
请执行上述操作，如果您遇到任何问题，请告诉我。如果你是一名程序员，那么你应该很乐意尝试独自解决所有问题。但我在这里，我不是程序员；}