Events in ASP.NET MVC Chat UI control

15 Dec 20258 minutes to read

This section describes the Chat UI events that will be triggered when appropriate actions are performed. The following events are available in the Chat UI control.

Created

The Chat UI control triggers the Created event when the control rendering is completed.

CSHTML

@using Syncfusion.EJ2.InteractiveChat

<div style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").Created("onCreated").User(ViewBag.CurrentUser).Render()
</div>

<script>
    function onCreated() {
        // your required action here..
    }
</script>

Created.cs

using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };

public ActionResult Created()
{
    CurrentUser = CurrentUserModel;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

Sending message

The MessageSend event is triggered before sending a message in the Chat UI control.

CSHTML

@using Syncfusion.EJ2.InteractiveChat

<div style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").MessageSend("MessageSend").User(ViewBag.CurrentUser).Render()
</div>

<script>
    function MessageSend() {
        // your required action here..
    }
</script>

MessageSend.cs

using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };

public ActionResult MessageSend()
{
    CurrentUser = CurrentUserModel;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

User typing

The UserTyping event is triggered when the user is typing a message in the Chat UI control.

CSHTML

@using Syncfusion.EJ2.InteractiveChat

<div style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").UserTyping("UserTyping").User(ViewBag.CurrentUser).Render()
</div>

<script>
    function UserTyping() {
        // your required action here..
    }
</script>

UserTyping.cs

using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };

public ActionResult UserTyping()
{
    CurrentUser = CurrentUserModel;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

Before attachment upload

The BeforeAttachmentUpload event is triggered before attached files begin uploading in the Chat UI.

CSHTML

@using Syncfusion.EJ2.InteractiveChat

<div style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).BeforeAttachmentUpload("beforeAttachmentUpload").User(ViewBag.CurrentUser).Render()
</div>

<script>
    function beforeAttachmentUpload(args) {
        // Your required action here
    }
</script>

BeforeAttachmentUpload.cs

using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };

public ActionResult BeforeAttachmentUpload()
{
    CurrentUser = CurrentUserModel;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

Attachment upload success

The AttachmentUploadSuccess event is triggered when an attached file is successfully uploaded in the Chat UI.

CSHTML

@using Syncfusion.EJ2.InteractiveChat

<div style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).AttachmentUploadSuccess("attachmentUploadSuccess").User(ViewBag.CurrentUser).Render()
</div>

<script>
    function attachmentUploadSuccess(args) {
        // Your required action here
    }
</script>

AttachmentUploadSuccess.cs

using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };

public ActionResult AttachmentUploadSuccess()
{
    CurrentUser = CurrentUserModel;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

Attachment upload failure

The AttachmentUploadFailure event is triggered when an attached file upload fails in the Chat UI.

CSHTML

@using Syncfusion.EJ2.InteractiveChat

<div style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).AttachmentUploadFailure("attachmentUploadFailure").User(ViewBag.CurrentUser).Render()
</div>

<script>
    function attachmentUploadFailure(args) {
        // Your required action here
    }
</script>

AttachmentUploadFailure.cs

using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };

public ActionResult AttachmentUploadFailure()
{
    CurrentUser = CurrentUserModel;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

Attachment removed

The AttachmentRemoved event is triggered when an attached file is removed from the Chat UI.

CSHTML

@using Syncfusion.EJ2.InteractiveChat

<div style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).AttachmentRemoved("attachmentRemoved").User(ViewBag.CurrentUser).Render()
</div>

<script>
    function attachmentRemoved(args) {
        // Your required action here
    }
</script>

AttachmentRemoved.cs

using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };

public ActionResult AttachmentRemoved()
{
    CurrentUser = CurrentUserModel;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

Attachment click

The AttachmentClick event is triggered when an attached file is clicked in the Chat UI.

CSHTML

@using Syncfusion.EJ2.InteractiveChat

<div style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove"), AttachmentClick = "attachmentClick" }).User(ViewBag.CurrentUser).Render()
</div>

<script>
    function attachmentClick(args) {
        // Your required action here
    }
</script>

AttachmentClick.cs

using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };

public ActionResult AttachmentClick()
{
    CurrentUser = CurrentUserModel;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}