Methods in ASP.NET MVC Chat UI control

16 Dec 202414 minutes to read

Adding message

You can use the addMessage public method to add the messages in the Chat UI. You can add it either as a string or MessageModel collection. It programmatically adds a new message to the chat.

@using Syncfusion.EJ2.InteractiveChat;
@using Newtonsoft.Json;

<div class="chatui-container" style="height:380px; width:450px">
    <button id="addMessageModel" style="margin-bottom: 10px" class="e-btn e-primary">Add Message as Object</button>
    @Html.EJS().ChatUI("chatUser").Created("onCreated").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
</div>

<script>
    var chatUIObj;
    function onCreated() {
        var chatUiEle = document.getElementById('chatUser');
        chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
    }
    document.addEventListener('click', function (event) {
        if (event.target && event.target.id === 'addMessageModel') {
            chatUIObj.addMessage(
                {
                    author: @Html.Raw(JsonConvert.SerializeObject(ViewBag.MichaleUser)),
                    text: "Great! Let me know if there’s anything that needs adjustment."
                }
            );
        }
    });
</script>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };

public ActionResult AddMessageObj()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Hi Michale, are we on track for the deadline?",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Yes, the design phase is complete.",
        Author = MichaleUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "I’ll review it and send feedback by today.",
        Author = CurrentUserModel
    });
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    ViewBag.MichaleUser = MichaleUserModel;
    return View();
}

AddMessageObj

@using Syncfusion.EJ2.InteractiveChat;

<div class="chatui-container" style="height:380px; width:450px">
    <button id="addMessageString" style="margin-bottom: 10px" class="e-btn e-primary">Add Message as string</button>
    @Html.EJS().ChatUI("chatUser").Created("onCreated").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
</div>

<script>
    var chatUIObj;
    function onCreated() {
        var chatUiEle = document.getElementById('chatUser');
        chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
    }
    document.addEventListener('click', function (event) {
        if (event.target && event.target.id === 'addMessageString') {
            chatUIObj.addMessage("Also, let me know if there are any blockers we should address before the next phase.");
        }
    });
</script>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };

public ActionResult AddMessageObj()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Hi Michale, are we on track for the deadline?",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Yes, the design phase is complete.",
        Author = MichaleUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "I’ll review it and send feedback by today.",
        Author = CurrentUserModel
    });
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

AddMessageString

Edit messages

You can use the updateMessage public method to update the messages in the ChatUI to modify an existing message within the chat, useful for editing or correcting sent messages.

@using Syncfusion.EJ2.InteractiveChat;
@using Newtonsoft.Json;

<div class="chatui-container" style="height:380px; width:450px">
    <button id="updateMessage" style="margin-bottom: 10px" class="e-btn e-primary">Update Message</button>
    @Html.EJS().ChatUI("chatUser").Created("onCreated").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
</div>

<script>
    var chatUIObj;
    function onCreated() {
        var chatUiEle = document.getElementById('chatUser');
        chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
    }
    document.addEventListener('click', function (event) {
        if (event.target && event.target.id === 'updateMessage') {
            chatUIObj.updateMessage(
                {
                    text: "Hi Michael, are we still on schedule to meet the deadline?",
                    author: @Html.Raw(JsonConvert.SerializeObject(ViewBag.CurrentUser)),
                }, 'msg1'
            );
        }
    });
</script>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };

public ActionResult AddMessageObj()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Hi Michale, are we on track for the deadline?",
        Author = CurrentUserModel,
        Id = "msg1"
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Yes, the design phase is complete.",
        Author = MichaleUserModel,
        Id = "msg2"
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "I’ll review it and send feedback by today.",
        Author = CurrentUserModel,
        Id = "msg3"
    });
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

EditMessage

Scroll to Bottom

You can use the scrollToBottom public method to scroll the chat view to the latest message, ensuring users see the new content updated.

@using Syncfusion.EJ2.InteractiveChat

<div class="chatui-container" style="height:380px; width:450px">
    <button id="scrollToBottom" style="margin-bottom: 10px" class="e-btn e-primary">Scroll To Bottom</button>
    @Html.EJS().ChatUI("chatUser").Created("onCreated").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
</div>

<script>
    var chatUIObj;
    function onCreated() {
        var chatUiEle = document.getElementById('chatUser');
        chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
    }
    document.addEventListener('click', function (event) {
        if (event.target && event.target.id === 'scrollToBottom') {
            chatUIObj.scrollToBottom();
        }
    });
</script>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };

public ActionResult AddMessageObj()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Want to get coffee tomorrow?",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Sure! What time?",
        Author = MichaleUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "How about 10 AM?",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Perfect",
        Author = MichaleUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "See you!",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Bye!",
        Author = MichaleUserModel
    });
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

ScrollToBottom