Как отправить эмодзи с текстом в Blazor SignalR
Я разработал приложение для частного чата с использованием сервера blazor signalR, в котором мы можем добавить друга и поговорить с ним в частном порядке.
Теперь я хочу отправить смайлик и текстовое сообщение.
Что я сделал, чтобы получить эмодзи в текстовом поле ввода, так это то, что я дал идентификатор id = "mytext" для ввода, который привязан к @bind = "MsgBody" и передан функции javascript SetElemetById(id).
Теперь проблема в том, что MsgBody имеет значение null при нажатии кнопки @onclick = "SendMessage", когда функция Javascript SetElemetById(id) вызывается на входе, если она не вызывается, то у нас есть значение в 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);
}
Является ли MsgBody также нулевым, если вы не используете весь java-скрипт?
@Danel W MsgBody имеет значение null при вызове javascript, если JavaScript не вызывается, в MsgBody есть значение
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Почему бы не сделать это без 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();
}
Пожалуйста, не используйте StateHasChanged ().
@Daniel W спасибо за предложение
То, что ты делаешь, неправильно. Механизм привязки данных Blazor игнорирует любые изменения, внесенные вами в теги Html. Таким образом, вы не можете повлиять на привязку данных элемента ввода текста из JavaScript. Вот почему переменная MsgBody всегда равна нулю. Но даже если бы вы могли, вы должны сначала попытаться реализовать все в Blazor, а если это окажется невозможным, прибегните к JSInterop.
protected override async Task OnInitializedAsync()
{
await iJSRuntime.InvokeVoidAsync("SetElemetById","mytext");
}
Только для записей вы должны инициализировать свои JS-объекты из пар OnAfterRender (Async), и только один раз; то есть вы вызываете свои функции инициализации из оператора if следующим образом:
if (firstRender)
{
// Call your JS init functions
}
Попробуйте следующее, чтобы реализовать функциональность эмодзи:
Перейдите в Github и загрузите код репозитория
Разархивируйте его ... Он распаковывается в папку с именем:
RealtimeChat_WebAssembly-masterЭта папка содержит две папки:
EmojiPickerиWSDTChat.. ПапкаEmojiPickerпуста. Почему ? Я не тратил время на обучение.Однако я решил эту проблему, загрузив код с здесь
Распаковал папку, а затем скопировал ее содержимое на
EmojiPicker. папка. Сделай это...Откройте решение в Visual Studio, создайте решение и затем выполните команду команда:
update-databaseв консоли диспетчера пакетов, чтобы создать база данных. Теперь запустите приложение и проверьте его.Проверьте функциональность добавления смайлов, а также фотографий.
Теперь вам нужно следовать соответствующему коду, чтобы понять, как этот парень реализовали использование эмодзи ... скопируйте необходимый код и примените его к своему чат.
Вы можете перенять из этого приложения функции, отсутствующие в вашем приложении, а также Внешний вид и поведение пользовательского интерфейса.
Пожалуйста, сделайте вышеуказанное, и если вы столкнулись с какой-либо проблемой, дайте мне знать. Если вы программист, то с радостью постарайтесь решить все проблемы в одиночку. Но я здесь, и я не программист;}
Спасибо, enet, но есть ли способ заставить мой код иметь функциональность эмодзи, используя мой способ?
Вы имеете в виду использование подключаемого модуля JavaScript, такого как предлагаемый JQuery? Да, вы можете, и вам придется использовать JSInterop, без привязки данных и т. д. Я настоятельно рекомендую вам не идти по этому пути. Но если вы это сделаете, покажите полный код того, что вы сделали, и я помогу вам решить возникшие проблемы. Но опять же, не делайте этого. Между прочим, ваш код, опубликованный в вашем вопросе, содержит базовую попытку получить эту функциональность, и, конечно же, вы не можете использовать привязку данных. Но решать вам. Начните работать над этим и задавайте вопросы.
спасибо, это предложение git сработало для меня спасибо
@sudip chand, очень рад, что у вас так получилось. Это был правильный путь. Удачи.
@enet спасибо за помощь с моим предыдущим вопросом, не могли бы вы помочь мне с этим текущим вопросом, пожалуйста