New to Telerik UI for ASP.NET MVC? Download free 30-day trial

ASP.NET MVC Chat Templates

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Change Theme
    meridian
    Meridian Theme
    • Main
    • Main Dark
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Ocean Blue A11Y accessibility
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Bootstrap 3
    • Bootstrap 3 Dark
    • Main Dark
    • Nordic
    • Turquoise
    • Turquoise Dark
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Material 2
    • Material 2 Dark
    • Nova
    Classic Theme
    • Main
    • Green
    • Green Dark
    • Lavender
    • Lavender Dark
    • Main Dark
    • Metro
    • Metro Dark
    • Moonlight
    • Opal
    • Opal Dark
    • Silver
    • Silver Dark
    • Uniform
    Fluent Theme
    • Main
    • Main Dark
    Launch Theme Builder
templates.cshtml
TemplatesController.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Description

The Telerik UI for ASP.NET MVC Chat component exposes a rich set of templates that let you fully customize how messages, statuses, timestamps, the empty state, and the header are rendered. For a complete reference of all available template options, refer to the Templates documentation article.

This demo uses the configurator to switch between the supported templates and observe how each one affects the rendering:

  • MessageContentTemplate - overrides the content of every message bubble regardless of the author.
  • AuthorMessageContentTemplate and ReceiverMessageContentTemplate - render the messages of the current user and the other participants with distinct markup.
  • MessageStatusTemplate - customizes the status indicator displayed under each outgoing message.
  • TimestampTemplate - controls how the date separators between messages are formatted.
  • NoDataTemplate - renders a custom empty-state view when the Chat has no messages.
  • HeaderTemplate - replaces the default header with arbitrary markup.

The demo also showcases additional customization APIs that work alongside the templates - MessageStatusSettings with custom icons and CSS classes per status (sent, delivered, seen, failed), MessageActions (context menu), MessageToolbarActions (inline toolbar), FileActions, FilesLayoutMode, AllowMessageCollapse, and the loading() client-side method. Send a message to see the status progression from sent to delivered to seen, or use the configurator buttons to add a failed message and toggle the loading indicator.

Additional Apps

This Chat example is part of a unique collection of hundreds of ASP.NET MVC demos, with which you can see all Telerik ASP.NET MVC components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in the ThemeBuilder.

Support & Learning Resources

Additional Resources