diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/header.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/header.md
index 0211a6f7b7..d90ac815b2 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/header.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/header.md
@@ -116,14 +116,14 @@ You can use the `Visible` property to specify whether to show or hide the header
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/chat-ui/header/toolbarDisable/razor %}
+{% include code-snippet/chat-ui/header/toolbarVisible/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="ToolbarDisable.cs" %}
-{% include code-snippet/chat-ui/header/toolbarDisable/toolbarDisable.cs %}
+{% highlight c# tabtitle="ToolbarVisible.cs" %}
+{% include code-snippet/chat-ui/header/toolbarVisible/toolbarDisable.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-![ToolbarDisable](images/toolbar-disable.png)
+![ToolbarDisable](images/toolbar-visible.png)
 
 #### Setting disabled
 
@@ -178,7 +178,7 @@ In the following example, toolbar item type is set with `Right`.
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarIcon/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="ToolbarIcon.cs" %}
+{% highlight c# tabtitle="ToolbarAlign.cs" %}
 {% include code-snippet/chat-ui/header/toolbarIcon/toolbarIcon.cs %}
 {% endhighlight %}
 {% endtabs %}
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/appearance.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/appearance.md
index 278ec6add3..8b11579374 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/appearance.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/appearance.md
@@ -18,6 +18,9 @@ You can use the [placeholder](https://help.syncfusion.com/cr/aspnetcore-js2/Sync
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/appearance/placeholder/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Placeholder.cs" %}
+{% include code-snippet/chat-ui/appearance/placeholder/placeholder.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Placeholder](images/placeholder.png)
@@ -30,6 +33,9 @@ You can use the [width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/appearance/width/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Width.cs" %}
+{% include code-snippet/chat-ui/appearance/width/width.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Width](images/width.png)
@@ -42,6 +48,9 @@ You can use the [height](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusio
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/appearance/height/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Height.cs" %}
+{% include code-snippet/chat-ui/appearance/height/height.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Height](images/width.png)
@@ -54,6 +63,9 @@ You can customize the appearance of the Chat UI component by using the [cssClass
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/appearance/cssClass/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Cssclass.cs" %}
+{% include code-snippet/chat-ui/appearance/cssclass/cssclass.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Cssclass](images/cssclass.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md
index f62bea028e..ef24a7fcc6 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md
@@ -20,6 +20,9 @@ The Chat UI control triggers the [created](https://help.syncfusion.com/cr/aspnet
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/events/created/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Created.cs" %}
+{% include code-snippet/chat-ui/events/created/created.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ## Sending message
@@ -30,6 +33,9 @@ The [messageSend](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.I
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/events/messageSend/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="MessageSend.cs" %}
+{% include code-snippet/chat-ui/events/messageSend/messageSend.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ## User typing
@@ -40,4 +46,7 @@ The [userTyping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.In
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/events/userTyping/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="UserTyping.cs" %}
+{% include code-snippet/chat-ui/events/userTyping/userTyping.cs %}
+{% endhighlight %}
 {% endtabs %}
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/footer.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/footer.md
index d0c8449853..2fbf458435 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/footer.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/footer.md
@@ -18,6 +18,9 @@ You can use [showFooter](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusio
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/footer/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Footer.cs" %}
+{% include code-snippet/chat-ui/footer/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Footer](images/footer.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/getting-started.md
index b3c08fee5a..98021a3117 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/getting-started.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/getting-started.md
@@ -93,6 +93,9 @@ Now, add the Syncfusion ASP.NET Core Chat UI tag helper in `~/Pages/Index.cshtml
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/getting-started/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Default.cs" %}
+{% include code-snippet/chat-ui/getting-started/gettingstarted.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion ASP.NET Core Chat UI control will be rendered in the default web browser.
@@ -107,6 +110,9 @@ You can use the `<e-chatui-messages>` tag directive to group all the messages an
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/default-messages/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Default.cs" %}
+{% include code-snippet/chat-ui/default-messages/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ASP.NET Core Chat UI default messages](images/default-messages.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/globalization.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/globalization.md
index a5c1a5fd2e..ab500d5e9b 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/globalization.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/globalization.md
@@ -25,6 +25,9 @@ The Chat UI can be localized to any culture by defining the text of the Chat UI
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/globalization/localization/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Localization.cs" %}
+{% include code-snippet/chat-ui/globalization/localization/timestamp.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Localization](images/localization.png)
@@ -37,6 +40,9 @@ RTL provides an option to switch the text direction and layout of the Chat UI co
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/globalization/rtl/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Rtl.cs" %}
+{% include code-snippet/chat-ui/globalization/rtl/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![RTL](images/rtl.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/header.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/header.md
index 79ded6fff2..be3e47daa1 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/header.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/header.md
@@ -18,6 +18,9 @@ You can use [showHeader](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusio
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/showHeader/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ShowHeader.cs" %}
+{% include code-snippet/chat-ui/header/showHeader/showHeader.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ShowHeader](images/show-header.png)
@@ -30,6 +33,9 @@ You can use the [headerText](https://help.syncfusion.com/cr/aspnetcore-js2/Syncf
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/headerText/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="HeaderText.cs" %}
+{% include code-snippet/chat-ui/header/headerText/headerText.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![HeaderText](images/header-text.png)
@@ -42,6 +48,9 @@ You can use the [headerIconCss](https://help.syncfusion.com/cr/aspnetcore-js2/Sy
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/headerIcon/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="HeaderIcon.cs" %}
+{% include code-snippet/chat-ui/header/headerIcon/headerIcon.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![HeaderIcon](images/header-icon.png)
@@ -62,6 +71,9 @@ You can customize the header toolbar icons by using the `iconCss` property.
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarIcon/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarIcon.cs" %}
+{% include code-snippet/chat-ui/header/toolbarIcon/toolbarIcon.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ToolbarIcon](images/toolbar-icon.png)
@@ -76,6 +88,9 @@ In the following example, header toolbar item type is set as `Button`.
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarType/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarType.cs" %}
+{% include code-snippet/chat-ui/header/toolbarType/toolbarType.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ToolbarType](images/toolbar-type.png)
@@ -88,6 +103,9 @@ You can use the `text` property to set the text for the header toolbar item.
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarText/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarText.cs" %}
+{% include code-snippet/chat-ui/header/toolbarText/toolbarText.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ToolbarText](images/toolbar-text.png)
@@ -100,6 +118,9 @@ You can use the `visible` property to specify whether to show or hide the header
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarVisible/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarVisible.cs" %}
+{% include code-snippet/chat-ui/header/toolbarVisible/toolbarDisable.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ToolbarVisible](images/toolbar-visible.png)
@@ -112,6 +133,9 @@ You can use the `disabled` property to disable the header toolbar item. By defau
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarDisable/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarDisable.cs" %}
+{% include code-snippet/chat-ui/header/toolbarDisable/toolbarDisable.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ToolbarDisable](images/toolbar-disable.png)
@@ -124,6 +148,9 @@ You can use the `tooltip` property to specify the tooltip text to be displayed o
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarTooltip/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarTooltip.cs" %}
+{% include code-snippet/chat-ui/header/toolbarTooltip/toolbarTooltip.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 #### Setting CSS Class
@@ -134,6 +161,9 @@ You can use the `cssClass` property to customize the header toolbar item.
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarCss/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarCss.cs" %}
+{% include code-snippet/chat-ui/header/toolbarCss/toolbarCss.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![CssClass](images/toolbar-css.png)
@@ -148,6 +178,9 @@ In the following example, toolbar item type is set with `Right`.
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarIcon/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarAlign.cs" %}
+{% include code-snippet/chat-ui/header/toolbarIcon/toolbarIcon.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ToolbarIcon](images/toolbar-icon.png)
@@ -222,6 +255,9 @@ You can use the `template` property to add custom toolbar item in the Chat UI.
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/toolbarTemplate/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ToolbarTemplate.cs" %}
+{% include code-snippet/chat-ui/header/toolbarTemplate/toolbarTemplate.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ToolbarTemplate](images/toolbar-template.png)
@@ -234,4 +270,7 @@ The [itemClicked](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.I
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/header/itemClicked/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ItemClicked.cs" %}
+{% include code-snippet/chat-ui/header/itemClicked/itemClicked.cs %}
+{% endhighlight %}
 {% endtabs %}
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/load-on-demand.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/load-on-demand.md
index e399a8df5f..33cceb01ea 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/load-on-demand.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/load-on-demand.md
@@ -16,6 +16,9 @@ You can use the [loadOnDemand](https://help.syncfusion.com/cr/aspnetcore-js2/Syn
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/loadOnDemand/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="LoadOnDemand.cs" %}
+{% include code-snippet/chat-ui/loadOnDemand/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![LoadOnDemand](images/loadOnDemand.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/messages.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/messages.md
index 6487c7a737..2bbbd50d51 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/messages.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/messages.md
@@ -20,6 +20,9 @@ You can use the `text` property to add message content for the user. Each messag
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/text/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Text.cs" %}
+{% include code-snippet/chat-ui/messages/text/text.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Text](images/text.png)
@@ -34,6 +37,9 @@ You can use the `author` property to identify the current user of the chat. Each
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/user/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="User.cs" %}
+{% include code-snippet/chat-ui/messages/user/user.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![User](images/text.png)
@@ -46,6 +52,9 @@ You can use the [avatarUrl](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfu
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/avatarUrl/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="AvatarUrl.cs" %}
+{% include code-snippet/chat-ui/messages/avatarUrl/avatarUrl.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![AvatarUrl](images/avatar-url.png)
@@ -58,6 +67,9 @@ You can use the [avatarBgColor](https://help.syncfusion.com/cr/aspnetcore-js2/Sy
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/avatarColor/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="AvatarColor.cs" %}
+{% include code-snippet/chat-ui/messages/avatarColor/avatarColor.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![AvatarBgColor](images/avatar-bgcolor.png)
@@ -70,6 +82,9 @@ You can use the [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfus
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/avatarCssClass/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="AvatarCssClass.cs" %}
+{% include code-snippet/chat-ui/messages/avatarCssClass/avatarCssClass.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![CssClass](images/avatar-cssclass.png)
@@ -82,6 +97,9 @@ You can use the `timeStamp` property to indicate the date and time of each messa
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/timestamp/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Timestamp.cs" %}
+{% include code-snippet/chat-ui/messages/timestamp/timestamp.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![TimeStamp](images/timestamp.png)
@@ -94,6 +112,9 @@ You can use the `timeStampFormat` to display specific time format for the timest
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/timestampFormat/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="TimeStampFormat.cs" %}
+{% include code-snippet/chat-ui/messages/timestampFormat/timestampFormat.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![TimeStampFormat](images/timestampFormat.png)
@@ -110,6 +131,9 @@ You can use the `iconCss` property to update the styling of status icons associa
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/statusIcon/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="StatusIcon.cs" %}
+{% include code-snippet/chat-ui/messages/statusIcon/statusIcon.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![IconCss](images/status-icon.png)
@@ -122,6 +146,9 @@ You can use the `text` property to provide information about the messages throug
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/statusText/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="StatusText.cs" %}
+{% include code-snippet/chat-ui/messages/statusText/statusText.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Text](images/status-text.png)
@@ -134,6 +161,9 @@ You can use the `tooltip` property to provide information about the messages by
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/statusTooltip/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="StatusTooltip.cs" %}
+{% include code-snippet/chat-ui/messages/statusTooltip/statusTooltip.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Tooltip](images/status-tooltip.png)
@@ -148,6 +178,9 @@ You can use the [autoScrollToBottom](https://help.syncfusion.com/cr/aspnetcore-j
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/autoScroll/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="AutoScroll.cs" %}
+{% include code-snippet/chat-ui/messages/autoScroll/autoScroll.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![AutoScrollToBottom](images/auto-scroll.png)
@@ -160,6 +193,9 @@ You can use the [suggestions](https://help.syncfusion.com/cr/aspnetcore-js2/Sync
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/messages/suggestion/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Suggestion.cs" %}
+{% include code-snippet/chat-ui/messages/suggestion/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Suggestion](images/suggestion.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/methods.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/methods.md
index b50c0afc8c..a5c5b02f5f 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/methods.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/methods.md
@@ -18,6 +18,9 @@ You can use the `addMessage` public method to add the messages in the Chat UI. Y
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/methods/addMessageObj/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="AddMessageObj.cs" %}
+{% include code-snippet/chat-ui/methods/addMessageObj/addMessageObj.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Adding New Message as Object](images/addMessageObj.png)
@@ -26,6 +29,9 @@ You can use the `addMessage` public method to add the messages in the Chat UI. Y
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/methods/addMessageString/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="AddMessageString.cs" %}
+{% include code-snippet/chat-ui/methods/addMessageString/addMessageObj.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Adding New Message as string](images/addMessageString.png)
@@ -38,6 +44,9 @@ You can use the `updateMessage` public method to update the messages in the Chat
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/methods/editMessage/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="EditMessage.cs" %}
+{% include code-snippet/chat-ui/methods/editMessage/addMessageObj.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![EditMessage](images/editMessage.png)
@@ -50,6 +59,9 @@ You can use the `scrollToBottom` public method to scroll the chat view to the
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/methods/scrollToBottom/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="ScrollToBottom.cs" %}
+{% include code-snippet/chat-ui/methods/scrollToBottom/addMessageObj.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![ScrollToBottom](images/scrollToBottom.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/templates.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/templates.md
index d25d9550ea..cf287cb61c 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/templates.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/templates.md
@@ -20,9 +20,12 @@ You can use the [emptyChatTemplate](https://help.syncfusion.com/cr/aspnetcore-js
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/templates/emptyChatTemplate/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="EmptyChatTemplate.cs" %}
+{% include code-snippet/chat-ui/templates/emptyChatTemplate/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
-![EmptyChatTemplate](images/show-header.png)
+![EmptyChatTemplate](images/emptyChatTemplate.png)
 
 ## Message template
 
@@ -32,6 +35,9 @@ You can use the [messageTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/templates/messageTemplate/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="MessageTemplate.cs" %}
+{% include code-snippet/chat-ui/templates/messageTemplate/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![MessageTemplate](images/messageTemplate.png)
@@ -44,6 +50,9 @@ You can use the [timeBreakTemplate](https://help.syncfusion.com/cr/aspnetcore-js
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/templates/timebreakTemplate/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="TimebreakTemplate.cs" %}
+{% include code-snippet/chat-ui/templates/timebreakTemplate/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![TimeBreakTemplate](images/timebreakTemplate.png)
@@ -56,6 +65,9 @@ You can use the [typingUsersTemplate](https://help.syncfusion.com/cr/aspnetcore-
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/templates/typingUsersTemplate/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="TypingUsersTemplate.cs" %}
+{% include code-snippet/chat-ui/templates/typingUsersTemplate/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![TypingUsersTemplate](images/typingUsersTemplate.png)
@@ -68,6 +80,9 @@ You can use the [suggestionTemplate](https://help.syncfusion.com/cr/aspnetcore-j
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/templates/suggestionTemplate/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="SuggestionTemplate.cs" %}
+{% include code-snippet/chat-ui/templates/suggestionTemplate/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![SuggestionTemplate](images/SuggestionTemplate.png)
@@ -80,6 +95,9 @@ You can use the [footerTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/S
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/templates/footerTemplate/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="FooterTemplate.cs" %}
+{% include code-snippet/chat-ui/templates/footerTemplate/defaultMessages.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![FooterTemplate](images/footerTemplate.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/timebreak.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/timebreak.md
index 4965d481b8..7f9b685abc 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/timebreak.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/timebreak.md
@@ -18,6 +18,9 @@ You can use the [showTimeBreak](https://help.syncfusion.com/cr/aspnetcore-js2/Sy
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/timebreak/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Timebreak.cs" %}
+{% include code-snippet/chat-ui/timebreak/timestamp.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Timebreak](images/timebreak.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/timestamp.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/timestamp.md
index e165e3895b..966ff17cba 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/timestamp.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/timestamp.md
@@ -18,6 +18,9 @@ You can use the [showTimeStamp](https://help.syncfusion.com/cr/aspnetcore-js2/Sy
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/timestamp/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="Timestamp.cs" %}
+{% include code-snippet/chat-ui/timestamp/timestamp.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Timestamp](images/timestampMain.png)
@@ -30,6 +33,9 @@ You can use the [timeStampFormat](https://help.syncfusion.com/cr/aspnetcore-js2/
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/timestampFormat/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="TimestampFormat.cs" %}
+{% include code-snippet/chat-ui/timestampFormat/timestampFormat.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![TimestampFormat](images/timestampFormatMain.png)
diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/typing-indicator.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/typing-indicator.md
index 2b7e9bb029..bad85b6dd4 100644
--- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/typing-indicator.md
+++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/typing-indicator.md
@@ -20,6 +20,9 @@ The typing users are the [UserModel](https://help.syncfusion.com/cr/aspnetcore-j
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chat-ui/typingUsers/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="TypingUsers.cs" %}
+{% include code-snippet/chat-ui/typingUsers/timestamp.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![TypingUsers](images/typingUsers.png)
diff --git a/ej2-asp-core-mvc/chat-ui/images/avatar-url.png b/ej2-asp-core-mvc/chat-ui/images/avatar-url.png
index e59d7a2133..e1f6eaa13b 100644
Binary files a/ej2-asp-core-mvc/chat-ui/images/avatar-url.png and b/ej2-asp-core-mvc/chat-ui/images/avatar-url.png differ
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/cssclass/cssclass.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/cssclass/cssclass.cs
index 46684d81d5..484b2a716e 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/cssclass/cssclass.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/cssclass/cssclass.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 CssClass()
 {
@@ -27,9 +27,3 @@ public ActionResult CssClass()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/cssclass/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/cssclass/tagHelper
index 823425e4b3..c9aa7c1f2f 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/cssclass/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/cssclass/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" cssClass="custom-container">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/height/height.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/height/height.cs
index 5ee166e61f..4fbf543903 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/height/height.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/height/height.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Height()
 {
@@ -27,9 +27,3 @@ public ActionResult Height()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/height/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/height/tagHelper
index 35e3832bba..194ea90872 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/height/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/height/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" height="380px">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/placeholder/placeholder.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/placeholder/placeholder.cs
index 077e4d7c50..f36fc3d608 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/placeholder/placeholder.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/placeholder/placeholder.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Placeholder()
 {
@@ -26,10 +26,4 @@ public ActionResult Placeholder()
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
     return View();
-}
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
 }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/placeholder/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/placeholder/tagHelper
index c29dd34ada..8b2f629afb 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/placeholder/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/placeholder/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" placeholder="Start typing...">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/width/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/width/tagHelper
index d67daef946..a96783e8c3 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/width/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/width/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" width="450px">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/width/width.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/width/width.cs
index 20ced224c8..96d93087ab 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/width/width.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/appearance/width/width.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Width()
 {
@@ -27,9 +27,3 @@ public ActionResult Width()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/default-messages/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/default-messages/defaultMessages.cs
index 7c57f2e97b..ff5d106ccb 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/default-messages/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/default-messages/defaultMessages.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
@@ -27,9 +27,3 @@ public ActionResult Default()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/default-messages/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/default-messages/tagHelper
index 43d8c4947b..6a6540425d 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/default-messages/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/default-messages/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/footer/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/footer/defaultMessages.cs
index 7c57f2e97b..ff5d106ccb 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/footer/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/footer/defaultMessages.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
@@ -27,9 +27,3 @@ public ActionResult Default()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/footer/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/footer/razor
index 568547c743..8eac803276 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/footer/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/footer/razor
@@ -1,5 +1,5 @@
 @using Syncfusion.EJ2.InteractiveChat
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
+    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).ShowFooter(false).Render()
 </div>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/footer/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/footer/tagHelper
index 43d8c4947b..8a89dcd289 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/footer/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/footer/tagHelper
@@ -1,10 +1,10 @@
 @using Syncfusion.EJ2.InteractiveChat;
 
 <div class="chatui-container" style="height:380px; width:450px">
-    <ejs-chatui id="chatUser">
+    <ejs-chatui id="chatUser" showFooter=false>
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/razor
index 991043b99f..e7394774f3 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/razor
@@ -1,8 +1,8 @@
-@using Syncfusion.EJ2.InteractiveChat
-@using Newtonsoft.Json
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).Created("onCreated").User(ViewBag.CurrentUser).Locale('de').Render()
+    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).Created("onCreated").User(ViewBag.CurrentUser).Locale("de").Render()
 </div>
 
 <script>
@@ -18,13 +18,10 @@
     });
     var chatUIObj;
     var typingUsers = @Html.Raw(JsonConvert.SerializeObject(ViewBag.TypingUsers));
-    typingUsers.forEach(user => {
-        user = new UserModel(user);
-    });
     function onCreated() {
         var chatUiEle = document.getElementById('chatUser');
         chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
         chatUIObj.typingUsers = typingUsers;
         chatUIObj.dataBind();
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/tagHelper
index ded998e8df..6d975ef14f 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/tagHelper
@@ -1,11 +1,11 @@
 @using Syncfusion.EJ2.InteractiveChat;
-@using Newtonsoft.Json
+@using Newtonsoft.Json;
 
 <div style="height: 380px; width: 450px">
     <ejs-chatui id="chatUser" created="onCreated" locale="de">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
@@ -25,10 +25,7 @@
         }
     });
     var chatUIObj;
-    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(Model.TypingUsers));
-    typingUsers.forEach(user => {
-        user = new UserModel(user);
-    });
+    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(ViewBag.TypingUsers));
     function onCreated() {
         var chatUiEle = document.getElementById('chatUser');
         chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/timestamp.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/timestamp.cs
index 5227c06aed..a61128c96d 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/timestamp.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/localization/timestamp.cs
@@ -1,10 +1,10 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
-public List<UserModel> TypingUsers { get; set; }
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
+public List<ChatUIUser> TypingUsers { get; set; }
 
 public ActionResult Timestamp()
 {
@@ -24,14 +24,8 @@ public ActionResult Timestamp()
         Text = "I’ll review it and send feedback by today.",
         Author = CurrentUserModel
     });
-    TypingUsers = new List<UserModel>() { MichaleUserModel };
-    return View();
+    ViewBag.TypingUsers = new List<ChatUIUser>() { MichaleUserModel };
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
+    return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/rtl/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/rtl/defaultMessages.cs
index 7c57f2e97b..ff5d106ccb 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/rtl/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/rtl/defaultMessages.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
@@ -27,9 +27,3 @@ public ActionResult Default()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/rtl/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/rtl/tagHelper
index a02dc28560..728748b170 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/rtl/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/globalization/rtl/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" enableRtl=true>
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerIcon/headerIcon.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerIcon/headerIcon.cs
index f1da5dbe24..03a3c4adbd 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerIcon/headerIcon.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerIcon/headerIcon.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 HeaderIcon()
 {
@@ -27,9 +27,3 @@ public ActionResult HeaderIcon()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerIcon/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerIcon/tagHelper
index 85697f3d4e..1a06d061f8 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerIcon/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerIcon/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" headerIconCss="e-icons e-people">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerText/headerText.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerText/headerText.cs
index f537d3b23b..269b0f27cc 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerText/headerText.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerText/headerText.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 HeaderText()
 {
@@ -27,9 +27,3 @@ public ActionResult HeaderText()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerText/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerText/tagHelper
index 93f5c50e79..bdf88282a5 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerText/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/headerText/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" headerText="Michale">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/itemClicked.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/itemClicked.cs
index 544f889d94..552f2ff236 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/itemClicked.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/itemClicked.cs
@@ -1,15 +1,15 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarText()
 {
     CurrentUser = CurrentUserModel;
-    HeaderToolbar.Add(new ToolbarItemModel { iconCss= "e-icons e-refresh", align = "right" });
+    HeaderToolbar.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "right" });
     ChatMessagesData.Add(new ChatUIMessage()
     {
         Text = "Hi Michale, are we on track for the deadline?",
@@ -31,12 +31,6 @@ public ActionResult ToolbarText()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/razor
index a3aeaaf07a..19269e9e37 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/razor
@@ -8,4 +8,4 @@
     function itemClicked(args) {
         // your required action here..
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/tagHelper
index 65d16d2b64..84560cf881 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/itemClicked/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar" itemClicked="function(args){ itemClicked(args) }"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar" itemClicked="function(args){ itemClicked(args) }"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/showHeader/showHeader.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/showHeader/showHeader.cs
index 3e38bdd642..e55f79c71b 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/showHeader/showHeader.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/showHeader/showHeader.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 ShowHeader()
 {
@@ -27,9 +27,3 @@ public ActionResult ShowHeader()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/showHeader/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/showHeader/tagHelper
index 4400745d93..abc995f278 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/showHeader/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/showHeader/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" headerText="Michale" headerIconCss="e-icons e-people" showHeader="false">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarCss/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarCss/tagHelper
index 6233c584be..977408b934 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarCss/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarCss/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarCss/toolbarCss.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarCss/toolbarCss.cs
index 736f494c1c..123871e09b 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarCss/toolbarCss.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarCss/toolbarCss.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarCss()
@@ -31,12 +31,6 @@ public ActionResult ToolbarCss()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarDisable/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarDisable/tagHelper
index 99633b4514..899a902530 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarDisable/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarDisable/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarDisable/toolbarDisable.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarDisable/toolbarDisable.cs
index 9656dca348..57ede56071 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarDisable/toolbarDisable.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarDisable/toolbarDisable.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarDisable()
@@ -32,12 +32,6 @@ public ActionResult ToolbarDisable()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarIcon/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarIcon/tagHelper
index 99633b4514..899a902530 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarIcon/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarIcon/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarIcon/toolbarIcon.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarIcon/toolbarIcon.cs
index f6a537ce5b..1defce10cf 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarIcon/toolbarIcon.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarIcon/toolbarIcon.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarIcon()
@@ -31,14 +31,8 @@ public ActionResult ToolbarIcon()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
     public string iconCss { get; set; }
-}
\ No newline at end of file
+}
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/razor
index 2ddb80af0f..5095864362 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/razor
@@ -4,19 +4,6 @@
     @Html.EJS().ChatUI("chatUser").HeaderToolbar(new ChatUIToolbarSettings() { Items = ViewBag.HeaderToolbar }).Created("onCreated").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
 </div>
 
-<div style="height:380px; width:450px">
-    <ejs-chatui id="chatUser" created="onCreated">
-        <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
-        <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
-            {
-                <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
-            }
-        </e-chatui-messages>
-    </ejs-chatui>
-</div>
-
 <script>
     function onCreated() {
         var splitBtnObj = new ej.splitbuttons.DropDownButton({
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/tagHelper
index d0fc96f02a..e5d1ccc2fe 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/toolbarTemplate.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/toolbarTemplate.cs
index 373a739bc0..8640295855 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/toolbarTemplate.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTemplate/toolbarTemplate.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarTemplate()
@@ -31,15 +31,9 @@ public ActionResult ToolbarTemplate()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
     public string type { get; set; }
     public string template { get; set; }
-}
\ No newline at end of file
+}
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarText/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarText/tagHelper
index 99633b4514..899a902530 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarText/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarText/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarText/toolbarText.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarText/toolbarText.cs
index 0e98ff41d2..1a5b53a933 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarText/toolbarText.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarText/toolbarText.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarText()
@@ -31,12 +31,6 @@ public ActionResult ToolbarText()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTooltip/tagHelper
index 99633b4514..899a902530 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTooltip/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTooltip/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTooltip/toolbarTooltip.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTooltip/toolbarTooltip.cs
index 0273a72674..2ebcea5d8c 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTooltip/toolbarTooltip.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarTooltip/toolbarTooltip.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarTooltip()
@@ -31,12 +31,6 @@ public ActionResult ToolbarTooltip()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarType/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarType/tagHelper
index 99633b4514..899a902530 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarType/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarType/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarType/toolbarType.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarType/toolbarType.cs
index 1ded606641..3f2ada2f4f 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarType/toolbarType.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarType/toolbarType.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarIcon()
@@ -31,12 +31,6 @@ public ActionResult ToolbarIcon()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarVisible/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarVisible/tagHelper
index 99633b4514..899a902530 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarVisible/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarVisible/tagHelper
@@ -3,9 +3,9 @@
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
-        <e-chatui-headertoolbar items="@Model.HeaderToolbar"></e-chatui-headertoolbar>
+        <e-chatui-headertoolbar items="@ViewBag.HeaderToolbar"></e-chatui-headertoolbar>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarVisible/toolbarDisable.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarVisible/toolbarDisable.cs
index 3b485a00f2..830848429b 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarVisible/toolbarDisable.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/header/toolbarVisible/toolbarDisable.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 
 public ActionResult ToolbarDisable()
@@ -32,12 +32,6 @@ public ActionResult ToolbarDisable()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class ToolbarItemModel
 {
     public string align { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/defaultMessages.cs
index 48b7f1f43a..3ec39e4ef9 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/defaultMessages.cs
@@ -1,19 +1,14 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
     CurrentUser = CurrentUserModel;
     ViewBag.CurrentUser = CurrentUser;
+    ViewBag.MichaleUser = MichaleUserModel;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/razor
index 9a153db144..123651fc15 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/razor
@@ -1,7 +1,8 @@
-@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").User(ViewBag.CurrentUser).Render()
+    @Html.EJS().ChatUI("chatUser").Created("onCreated").User(ViewBag.CurrentUser).LoadOnDemand(true).Render()
 </div>
 
 <script>
@@ -12,7 +13,7 @@
             text: i % 2 === 0
                 ? `Message ${i} from Michale`
                 : `Message ${i} from Albert`,
-            author: i % 2 === 0 ? @Html.Raw(JsonConvert.SerializeObject(Model.MichaleUserModel)) : @Html.Raw(JsonConvert.SerializeObject(Model.CurrentUserModel))
+            author: i % 2 === 0 ? @Html.Raw(JsonConvert.SerializeObject(ViewBag.MichaleUser)) : @Html.Raw(JsonConvert.SerializeObject(ViewBag.CurrentUser))
         });
     }
     function onCreated() {
@@ -21,4 +22,4 @@
         chatUIObj.messages = chatMessages;
         chatUIObj.dataBind();
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/tagHelper
index 05cdeebe9d..7736fc6e0f 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/loadOnDemand/tagHelper
@@ -1,4 +1,5 @@
 @using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser" created="onCreated" loadOnDemand="true">
@@ -14,7 +15,7 @@
             text: i % 2 === 0
                 ? `Message ${i} from Michale`
                 : `Message ${i} from Albert`,
-            author: i % 2 === 0 ? @Html.Raw(JsonConvert.SerializeObject(Model.MichaleUserModel)) : @Html.Raw(JsonConvert.SerializeObject(Model.CurrentUserModel))
+            author: i % 2 === 0 ? @Html.Raw(JsonConvert.SerializeObject(ViewBag.MichaleUser)) : @Html.Raw(JsonConvert.SerializeObject(ViewBag.CurrentUser))
         });
     }
     function onCreated() {
@@ -23,4 +24,4 @@
         chatUIObj.messages = chatMessages;
         chatUIObj.dataBind();
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/autoScroll/autoScroll.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/autoScroll/autoScroll.cs
index e3c52f7b6b..18a2ea092b 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/autoScroll/autoScroll.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/autoScroll/autoScroll.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 AutoScroll()
 {
@@ -41,10 +41,4 @@ public ActionResult AutoScroll()
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
     return View();
-}
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
 }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/autoScroll/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/autoScroll/tagHelper
index 5bd0c51ca0..6acfe26e04 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/autoScroll/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/autoScroll/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" autoScrollToBottom=true>
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarColor/avatarColor.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarColor/avatarColor.cs
index 9f934d3f31..6023266ab3 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarColor/avatarColor.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarColor/avatarColor.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama", avatarBgColor = "#ccc9f7" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama", AvatarBgColor = "#ccc9f7" };
 
 public ActionResult AvatarColor()
 {
@@ -27,10 +27,3 @@ public ActionResult AvatarColor()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-    public string avatarBgColor { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarColor/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarColor/tagHelper
index fe20682e30..a04d5f0395 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarColor/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarColor/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarCssClass/avatarCssClass.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarCssClass/avatarCssClass.cs
index ccb00d09f2..57a8985fd3 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarCssClass/avatarCssClass.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarCssClass/avatarCssClass.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama", cssClass = "custom-user" };
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama", CssClass = "custom-user" };
 
 public ActionResult AvatarCssClass()
 {
@@ -27,10 +27,3 @@ public ActionResult AvatarCssClass()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-    public string cssClass { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarCssClass/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarCssClass/tagHelper
index 3997a92f12..241d1a8541 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarCssClass/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarCssClass/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarUrl/avatarUrl.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarUrl/avatarUrl.cs
index 107fcaaafa..d4b85c808e 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarUrl/avatarUrl.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarUrl/avatarUrl.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama", avatarUrl = "" };//Provide the URL for the image here.
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama", AvatarUrl = "https://ej2.syncfusion.com/demos/src/avatar/images/pic03.png" };
 
 public ActionResult AvatarUrl()
 {
@@ -27,10 +27,3 @@ public ActionResult AvatarUrl()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-    public string avatarUrl { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarUrl/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarUrl/tagHelper
index fe20682e30..a04d5f0395 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarUrl/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/avatarUrl/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIcon/statusIcon.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIcon/statusIcon.cs
index 9224db5dec..dc4b2f0831 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIcon/statusIcon.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIcon/statusIcon.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 StatusIcon()
 {
@@ -29,12 +29,6 @@ public ActionResult StatusIcon()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class StatusModel
 {
     public string iconCss { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIcon/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIcon/tagHelper
index 51eaf0e1d2..4ecad2c1d1 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIcon/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusIcon/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author" status="@message.Status"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusText/statusText.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusText/statusText.cs
index e19d1f5669..b6210599e8 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusText/statusText.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusText/statusText.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 StatusText()
 {
@@ -29,12 +29,6 @@ public ActionResult StatusText()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class StatusModel
 {
     public string text { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusText/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusText/tagHelper
index 51eaf0e1d2..4ecad2c1d1 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusText/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusText/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author" status="@message.Status"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusTooltip/statusTooltip.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusTooltip/statusTooltip.cs
index 4c750d780d..5e885bb775 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusTooltip/statusTooltip.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusTooltip/statusTooltip.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 StatusTooltip()
 {
@@ -29,12 +29,6 @@ public ActionResult StatusTooltip()
     return View();
 }
 
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
-
 public class StatusModel
 {
     public string iconCss { get; set; }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusTooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusTooltip/tagHelper
index 51eaf0e1d2..4ecad2c1d1 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusTooltip/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/statusTooltip/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author" status="@message.Status"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/suggestion/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/suggestion/defaultMessages.cs
index e3cf0d19ff..17d7b07017 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/suggestion/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/suggestion/defaultMessages.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
@@ -22,9 +22,3 @@ public ActionResult Default()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/suggestion/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/suggestion/tagHelper
index 37d6665117..aa4cc91fa4 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/suggestion/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/suggestion/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="suggestion" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/text/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/text/tagHelper
index fe20682e30..a04d5f0395 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/text/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/text/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/text/text.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/text/text.cs
index fc5efe18c3..b09f3657a0 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/text/text.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/text/text.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Text()
 {
@@ -27,9 +27,3 @@ public ActionResult Text()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/razor
index 0ed13166bd..f8e4361fc8 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/razor
@@ -17,4 +17,4 @@
         chatUIObj.messages = chatMessages;
         chatUIObj.dataBind();
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/tagHelper
index 809e2380d1..11bb8c44cf 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/tagHelper
@@ -9,7 +9,7 @@
 
 <script>
     var chatUIObj;
-    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(Model.ChatMessagesData));
+    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(ViewBag.ChatMessagesData));
     chatMessages.forEach(message => {
         message.timeStamp = new Date(message.timeStamp);
     });
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/timestamp.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/timestamp.cs
index 4b2fab31ed..46acdce19d 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/timestamp.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestamp/timestamp.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Timestamp()
 {
@@ -26,13 +26,7 @@ public ActionResult Timestamp()
         Author = CurrentUserModel,
         TimeStamp = new DateTime(2024,12,25,11,0,0)
     });
-    return View();
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
+    return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestampFormat/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestampFormat/tagHelper
index a8560bb62c..f6d73cc6cd 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestampFormat/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestampFormat/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author" timeStampFormat="@message.TimeStampFormat"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestampFormat/timestampFormat.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestampFormat/timestampFormat.cs
index a33bb2eb5e..5505726ba9 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestampFormat/timestampFormat.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/timestampFormat/timestampFormat.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 TimestampFormat()
 {
@@ -28,9 +28,3 @@ public ActionResult TimestampFormat()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/user/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/user/tagHelper
index fe20682e30..a04d5f0395 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/user/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/user/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/user/user.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/user/user.cs
index ff17490243..12d208dc9b 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/messages/user/user.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/messages/user/user.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 User()
 {
@@ -27,9 +27,3 @@ public ActionResult User()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/addMessageObj.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/addMessageObj.cs
index 01b796e5af..1eecb7923f 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/addMessageObj.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/addMessageObj.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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()
 {
@@ -25,11 +25,6 @@ public ActionResult AddMessageObj()
     });
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
+    ViewBag.MichaleUser = MichaleUserModel;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/razor
index 568547c743..90b22f727a 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/razor
@@ -1,5 +1,25 @@
-@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
+    <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>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/tagHelper
index 424f46d2bc..4a40dbe226 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageObj/tagHelper
@@ -1,12 +1,12 @@
 @using Syncfusion.EJ2.InteractiveChat;
-@using Newtonsoft.Json
+@using Newtonsoft.Json;
 
 <div style="height:380px; width:450px">
     <button id="addMessageModel" style="margin-bottom: 10px" class="e-btn e-primary">Add Message as Object</button>
     <ejs-chatui id="chatUser" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
@@ -24,7 +24,7 @@
         if (event.target && event.target.id === 'addMessageModel') {
             chatUIObj.addMessage(
                 {
-                    author: @Html.Raw(JsonConvert.SerializeObject(Model.MichaleUserModel)),
+                    author: @Html.Raw(JsonConvert.SerializeObject(ViewBag.MichaleUser)),
                     text: "Great! Let me know if there’s anything that needs adjustment."
                 }
             );
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/addMessageObj.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/addMessageObj.cs
index 01b796e5af..8a53be5fd2 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/addMessageObj.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/addMessageObj.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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()
 {
@@ -27,9 +27,3 @@ public ActionResult AddMessageObj()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/razor
index 568547c743..3a9ccefcc4 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/razor
@@ -1,5 +1,19 @@
-@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2.InteractiveChat;
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
+    <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>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/tagHelper
index 2ae81aca88..48220af728 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/addMessageString/tagHelper
@@ -1,12 +1,11 @@
 @using Syncfusion.EJ2.InteractiveChat;
-@using Newtonsoft.Json
 
 <div style="height:380px; width:450px">
     <button id="addMessageString" style="margin-bottom: 10px" class="e-btn e-primary">Add Message as string</button>
     <ejs-chatui id="chatUser" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/addMessageObj.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/addMessageObj.cs
index 494fad6913..443dcf8f69 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/addMessageObj.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/addMessageObj.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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()
 {
@@ -30,9 +30,3 @@ public ActionResult AddMessageObj()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/razor
index 568547c743..e0c48a45cf 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/razor
@@ -1,5 +1,25 @@
-@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
+    <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>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/tagHelper
index c86ae88c0b..f0c7afcccb 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/editMessage/tagHelper
@@ -1,12 +1,12 @@
 @using Syncfusion.EJ2.InteractiveChat;
-@using Newtonsoft.Json
+@using Newtonsoft.Json;
 
 <div style="height:380px; width:450px">
     <button id="updateMessage" style="margin-bottom: 10px" class="e-btn e-primary">Update Message</button>
     <ejs-chatui id="chatUser" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author" id="@message.Id"></e-chatui-message>
             }
@@ -25,7 +25,7 @@
             chatUIObj.updateMessage(
                 {
                     text: "Hi Michael, are we still on schedule to meet the deadline?",
-                    author: @Html.Raw(JsonConvert.SerializeObject(Model.MichaleUserModel)),
+                    author: @Html.Raw(JsonConvert.SerializeObject(ViewBag.CurrentUser)),
                 }, 'msg1'
             );
         }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/addMessageObj.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/addMessageObj.cs
index c5f7802d4a..d1ce5aef45 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/addMessageObj.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/addMessageObj.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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()
 {
@@ -42,9 +42,3 @@ public ActionResult AddMessageObj()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/razor
index 568547c743..ce8cff3324 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/razor
@@ -1,5 +1,19 @@
 @using Syncfusion.EJ2.InteractiveChat
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
+    <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>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/tagHelper
index 8782215b81..b898e95a72 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/methods/scrollToBottom/tagHelper
@@ -1,12 +1,11 @@
 @using Syncfusion.EJ2.InteractiveChat;
-@using Newtonsoft.Json
 
 <div style="height:380px; width:450px">
     <button id="scrollToBottom" style="margin-bottom: 10px" class="e-btn e-primary">Scroll To Bottom</button>
     <ejs-chatui id="chatUser" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/razor
index b81b83aaa2..df3f02c873 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/razor
@@ -1,4 +1,4 @@
-@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2.InteractiveChat;
 
 <div class="chatui-container" style="height:380px; width:450px">
     @Html.EJS().ChatUI("chatUser").EmptyChatTemplate("#emptyChatContent").Render()
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/defaultMessages.cs
index 7c57f2e97b..2c5d012a62 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/defaultMessages.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
@@ -25,11 +25,6 @@ public ActionResult Default()
     });
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
+    ViewBag.MichaleUser = MichaleUserModel;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/razor
index 3fb81e5fc1..11b797f38e 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/razor
@@ -1,15 +1,14 @@
-@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("footerTemplate").FooterTemplate("#footerContent").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
+    @Html.EJS().ChatUI("footerTemplate").Created("onCreated").FooterTemplate("#footerContent").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
 </div>
 
 <script id="footerContent" type="text/x-jsrender">
     <div class="custom-footer">
         <input id="chatTextArea" class="e-input" placeholder="Type your message...">
-        <button id="sendMessage" class="e-btn e-primary">
-            <span class="e-icons e-send"></span>
-        </button>
+        <button id="sendMessage" class="e-btn e-primary e-icons e-send"></button>
     </div>
 </script>
 
@@ -34,7 +33,6 @@
         margin-bottom: 0;
         padding: 5px;
     }
-
 </style>
 
 <script>
@@ -51,7 +49,7 @@
                 textArea.value = '';
                 chatUIObj.addMessage(
                     {
-                        author: @Html.Raw(JsonConvert.SerializeObject(Model.MichaleUserModel)),
+                        author: @Html.Raw(JsonConvert.SerializeObject(ViewBag.MichaleUser)),
                         text: value
                     }
                 );
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/tagHelper
index c56aa922a1..d0d7c2c81d 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/footerTemplate/tagHelper
@@ -1,10 +1,11 @@
 @using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div style="height:380px; width:450px">
     <ejs-chatui id="footerTemplate" created="onCreated" footerTemplate="#footerContent">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
@@ -15,9 +16,7 @@
 <script id="footerContent" type="text/x-jsrender">
     <div class="custom-footer">
         <input id="chatTextArea" class="e-input" placeholder="Type your message...">
-        <button id="sendMessage" class="e-btn e-primary">
-            <span class="e-icons e-send"></span>
-        </button>
+        <button id="sendMessage" class="e-btn e-primary e-icons e-send"></button>
     </div>
 </script>
 
@@ -59,11 +58,11 @@
                 textArea.value = '';
                 chatUIObj.addMessage(
                     {
-                        author: @Html.Raw(JsonConvert.SerializeObject(Model.MichaleUserModel)),
+                        author: @Html.Raw(JsonConvert.SerializeObject(ViewBag.MichaleUser)),
                         text: value
                     }
                 );
             }
         }
     });
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/defaultMessages.cs
index 7c57f2e97b..ff5d106ccb 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/defaultMessages.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
@@ -27,9 +27,3 @@ public ActionResult Default()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/razor
index 1b0c0e86f0..97ab66ab14 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/razor
@@ -1,7 +1,7 @@
 @using Syncfusion.EJ2.InteractiveChat
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).MessageTemplate("#messagesContent").Render()
+    @Html.EJS().ChatUI("messageTemplate").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).MessageTemplate("#messagesContent").Render()
 </div>
 
 <script id="messagesContent" type="text/x-jsrender">
@@ -25,6 +25,4 @@
     #messageTemplate .message-items {
         padding: 5px;
     }
-
-
 </style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/tagHelper
index 1c91b37b94..bbc13e17cf 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/messageTemplate/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="messageTemplate" messageTemplate="#messagesContent">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
@@ -33,6 +33,4 @@
     #messageTemplate .message-items {
         padding: 5px;
     }
-
-
 </style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/defaultMessages.cs
index e3cf0d19ff..17d7b07017 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/defaultMessages.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
@@ -22,9 +22,3 @@ public ActionResult Default()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/razor
index d1ae88ac8d..f25e55a317 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/razor
@@ -1,7 +1,7 @@
 @using Syncfusion.EJ2.InteractiveChat
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Created("onCreated").Render()
+    @Html.EJS().ChatUI("suggestionTemplate").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Created("onCreated").SuggestionTemplate("#suggestionContent").Render()
 </div>
 
 <script id="suggestionContent" type="text/x-jsrender">
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/tagHelper
index 7dade0d097..e3727108bf 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/suggestionTemplate/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="suggestionTemplate" suggestionTemplate="#suggestionContent" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/defaultMessages.cs
index dc4bae5c7d..2bf1994911 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/defaultMessages.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Default()
 {
@@ -30,9 +30,3 @@ public ActionResult Default()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/razor
index eb7ed66acb..0aab3571f1 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/razor
@@ -1,7 +1,8 @@
-@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("timeBreakTemplate").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).ShowTimeBreak(true).TimeBreakTemplate("#timebreakContent").Created("onCreated").Render()
+    @Html.EJS().ChatUI("timeBreakTemplate").User(ViewBag.CurrentUser).ShowTimeBreak(true).TimeBreakTemplate("#timebreakContent").Created("onCreated").Render()
 </div>
 
 <script id="timebreakContent" type="text/x-jsrender">
@@ -19,7 +20,7 @@
 
 <script>
     var chatUIObj;
-    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(Model.ChatMessagesData));
+    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(ViewBag.ChatMessagesData));
     chatMessages.forEach(message => {
         message.timeStamp = new Date(message.timeStamp);
     });
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/tagHelper
index 97babd2896..8d063728ed 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/timebreakTemplate/tagHelper
@@ -1,4 +1,5 @@
 @using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div style="height:380px; width:450px">
     <ejs-chatui id="timeBreakTemplate" showTimeBreak="true" timeBreakTemplate="#timebreakContent" created="onCreated">
@@ -21,7 +22,7 @@
 
 <script>
     var chatUIObj;
-    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(Model.ChatMessagesData));
+    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(ViewBag.ChatMessagesData));
     chatMessages.forEach(message => {
         message.timeStamp = new Date(message.timeStamp);
     });
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/defaultMessages.cs
index 70c284a7d9..b573a632c0 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/defaultMessages.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/defaultMessages.cs
@@ -1,11 +1,11 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
-public UserModel ReenaUserModel { get; set; } = new UserModel() { id = "user3", user = "Reena" };
-public List<UserModel> TypingUsers { get; set; }
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
+public ChatUIUser ReenaUserModel { get; set; } = new ChatUIUser() { Id = "user3", User = "Reena" };
+public List<ChatUIUser> TypingUsers { get; set; }
 
 public ActionResult Default()
 {
@@ -25,14 +25,8 @@ public ActionResult Default()
         Text = "I’ll review it and send feedback by today.",
         Author = CurrentUserModel
     });
-    TypingUsers = new List<UserModel>() { MichaleUserModel, ReenaUserModel };
+    ViewBag.TypingUsers = new List<ChatUIUser>() { MichaleUserModel, ReenaUserModel };
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/razor
index 7f041930c2..405a8796d7 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/razor
@@ -1,4 +1,5 @@
-@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
     @Html.EJS().ChatUI("typingUsersTemplate").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).TypingUsersTemplate("#typingUsersContent").Created("onCreated").Render()
@@ -29,10 +30,7 @@
 
 <script>
     var chatUIObj;
-    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(Model.TypingUsers));
-    typingUsers.forEach(user => {
-        user = new UserModel(user);
-    });
+    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(ViewBag.TypingUsers));
     function onCreated() {
         var chatUiEle = document.getElementById('typingUsersTemplate');
         chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
@@ -50,4 +48,4 @@
         }).join(' ');
         return usersList
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/tagHelper
index 210f89fe97..06ea7483f4 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/typingUsersTemplate/tagHelper
@@ -1,10 +1,11 @@
 @using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div style="height:380px; width:450px">
     <ejs-chatui id="typingUsersTemplate" typingUsersTemplate="#typingUsersContent" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
@@ -37,10 +38,7 @@
 
 <script>
     var chatUIObj;
-    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(Model.TypingUsers));
-    typingUsers.forEach(user => {
-        user = new UserModel(user);
-    });
+    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(ViewBag.TypingUsers));
     function onCreated() {
         var chatUiEle = document.getElementById('typingUsersTemplate');
         chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
@@ -58,4 +56,4 @@
         }).join(' ');
         return usersList
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/razor
index abb7ca050f..20f6d16dbe 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/razor
@@ -1,5 +1,5 @@
-@using Syncfusion.EJ2.InteractiveChat
-@using Newtonsoft.Json
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
     @Html.EJS().ChatUI("chatUser").ShowTimeBreak(true).Created("onCreated").User(ViewBag.CurrentUser).Render()
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/tagHelper
index fc5c8c85b2..83e008b45b 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/tagHelper
@@ -1,5 +1,5 @@
 @using Syncfusion.EJ2.InteractiveChat;
-@using Newtonsoft.Json
+@using Newtonsoft.Json;
 
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser" created="onCreated" showTimeBreak=true>
@@ -9,7 +9,7 @@
 
 <script>
     var chatUIObj;
-    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(Model.ChatMessagesData));
+    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(ViewBag.ChatMessagesData));
     chatMessages.forEach(message => {
         message.timeStamp = new Date(message.timeStamp);
     });
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/timestamp.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/timestamp.cs
index 4b2fab31ed..46acdce19d 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/timestamp.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timebreak/timestamp.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Timestamp()
 {
@@ -26,13 +26,7 @@ public ActionResult Timestamp()
         Author = CurrentUserModel,
         TimeStamp = new DateTime(2024,12,25,11,0,0)
     });
-    return View();
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
+    return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/razor
index 0ed13166bd..02b9865656 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/razor
@@ -1,5 +1,5 @@
-@using Syncfusion.EJ2.InteractiveChat
-@using Newtonsoft.Json
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
     @Html.EJS().ChatUI("chatUser").ShowTimeStamp(false).Created("onCreated").User(ViewBag.CurrentUser).Render()
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/tagHelper
index 809e2380d1..fdd6c5debc 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/tagHelper
@@ -1,5 +1,5 @@
 @using Syncfusion.EJ2.InteractiveChat;
-@using Newtonsoft.Json
+@using Newtonsoft.Json;
 
 <div style="height:380px; width:450px">
     <ejs-chatui id="chatUser" created="onCreated" showTimeStamp=false>
@@ -9,7 +9,7 @@
 
 <script>
     var chatUIObj;
-    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(Model.ChatMessagesData));
+    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(ViewBag.ChatMessagesData));
     chatMessages.forEach(message => {
         message.timeStamp = new Date(message.timeStamp);
     });
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/timestamp.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/timestamp.cs
index 4b2fab31ed..46acdce19d 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/timestamp.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timestamp/timestamp.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 Timestamp()
 {
@@ -26,13 +26,7 @@ public ActionResult Timestamp()
         Author = CurrentUserModel,
         TimeStamp = new DateTime(2024,12,25,11,0,0)
     });
-    return View();
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
+    return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/razor
index ea7897350e..e8d9ce5236 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/razor
@@ -1,5 +1,5 @@
 @using Syncfusion.EJ2.InteractiveChat
 
 <div class="chatui-container" style="height:380px; width:450px">
-    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).TimeStampFormat("MMMM hh:mm a")Render()
+    @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).TimeStampFormat("MMMM hh:mm a").Render()
 </div>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/tagHelper
index 3e7f92b8bb..71b6600f3e 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/tagHelper
@@ -4,7 +4,7 @@
     <ejs-chatui id="chatUser" timeStampFormat="MMMM hh:mm a">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/timestampFormat.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/timestampFormat.cs
index 8f55d8c4fc..5df23fee13 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/timestampFormat.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/timestampFormat/timestampFormat.cs
@@ -1,9 +1,9 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
+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 TimestampFormat()
 {
@@ -27,9 +27,3 @@ public ActionResult TimestampFormat()
     ViewBag.CurrentUser = CurrentUser;
     return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/razor
index af50eb9ebb..c0621a2dad 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/razor
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/razor
@@ -1,5 +1,5 @@
-@using Syncfusion.EJ2.InteractiveChat
-@using Newtonsoft.Json
+@using Syncfusion.EJ2.InteractiveChat;
+@using Newtonsoft.Json;
 
 <div class="chatui-container" style="height:380px; width:450px">
     @Html.EJS().ChatUI("chatUser").Messages(ViewBag.ChatMessagesData).Created("onCreated").User(ViewBag.CurrentUser).Render()
@@ -8,13 +8,10 @@
 <script>
     var chatUIObj;
     var typingUsers = @Html.Raw(JsonConvert.SerializeObject(ViewBag.TypingUsers));
-    typingUsers.forEach(user => {
-        user = new UserModel(user);
-    });
     function onCreated() {
         var chatUiEle = document.getElementById('chatUser');
         chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
         chatUIObj.typingUsers = typingUsers;
         chatUIObj.dataBind();
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/tagHelper
index cb5f113bfb..69c22e6aa0 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/tagHelper
@@ -1,11 +1,11 @@
 @using Syncfusion.EJ2.InteractiveChat;
-@using Newtonsoft.Json
+@using Newtonsoft.Json;
 
 <div style="height: 380px; width: 450px">
     <ejs-chatui id="chatUser" created="onCreated">
         <e-chatui-user id="user1" user="Albert"></e-chatui-user>
         <e-chatui-messages>
-            @foreach (var message in Model.ChatMessagesData)
+            @foreach (var message in ViewBag.ChatMessagesData)
             {
                 <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
             }
@@ -15,10 +15,7 @@
 
 <script>
     var chatUIObj;
-    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(Model.TypingUsers));
-    typingUsers.forEach(user => {
-        user = new UserModel(user);
-    });
+    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(ViewBag.TypingUsers));
     function onCreated() {
         var chatUiEle = document.getElementById('chatUser');
         chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/timestamp.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/timestamp.cs
index 5227c06aed..a61128c96d 100644
--- a/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/timestamp.cs
+++ b/ej2-asp-core-mvc/code-snippet/chat-ui/typingUsers/timestamp.cs
@@ -1,10 +1,10 @@
 using Syncfusion.EJ2.InteractiveChat;
 
-public UserModel CurrentUser { get; set; }
+public ChatUIUser CurrentUser { get; set; }
 public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
-public UserModel CurrentUserModel { get; set; } = new UserModel() { id = "user1", user = "Albert" };
-public UserModel MichaleUserModel { get; set; } = new UserModel() { id = "user2", user = "Michale Suyama" };
-public List<UserModel> TypingUsers { get; set; }
+public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
+public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
+public List<ChatUIUser> TypingUsers { get; set; }
 
 public ActionResult Timestamp()
 {
@@ -24,14 +24,8 @@ public ActionResult Timestamp()
         Text = "I’ll review it and send feedback by today.",
         Author = CurrentUserModel
     });
-    TypingUsers = new List<UserModel>() { MichaleUserModel };
-    return View();
+    ViewBag.TypingUsers = new List<ChatUIUser>() { MichaleUserModel };
     ViewBag.ChatMessagesData = ChatMessagesData;
     ViewBag.CurrentUser = CurrentUser;
+    return View();
 }
-
-public class UserModel
-{
-    public string id { get; set; }
-    public string user { get; set; }
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/getting-started.md
index 96099b1ba2..74a1a460a0 100644
--- a/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/getting-started.md
+++ b/ej2-asp-core-mvc/multicolumn-combobox/EJ2_ASP.NETCORE/getting-started.md
@@ -94,6 +94,9 @@ Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Multi
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/multicolumn-combobox/getting-started/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="LocalData.cs" %}
+{% include code-snippet/multicolumn-combobox/getting-started/gettingstarted.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core MultiColumn ComboBox control will be rendered in the default web browser.
@@ -112,6 +115,9 @@ In the following sample, popup list's width and height are configured.
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/multicolumn-combobox/popup/tagHelper %}
 {% endhighlight %}
+{% highlight c# tabtitle="LocalData.cs" %}
+{% include code-snippet/multicolumn-combobox/popup/popup.cs %}
+{% endhighlight %}
 {% endtabs %}
 
 ![Popup](images/popup.png)
diff --git a/ej2-asp-core-mvc/stepper/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/stepper/EJ2_ASP.NETCORE/getting-started.md
index 13838301d2..ca7247b049 100644
--- a/ej2-asp-core-mvc/stepper/EJ2_ASP.NETCORE/getting-started.md
+++ b/ej2-asp-core-mvc/stepper/EJ2_ASP.NETCORE/getting-started.md
@@ -93,7 +93,7 @@ Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Stepp
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
 
-<ejs-stepper id="stepper"><ejs-stepper>
+<ejs-stepper id="stepper"></ejs-stepper>
 
 {% endhighlight %}
 {% endtabs %}