So i have a mesaging system that when a message is sent im currently reloading the whole view to see the new message in the conversation, however, i want to make it so jus the message partial reloads with AJAX as soon as a message is sent.

I’ve tried doing this and when i return the partial view in the controller, only the partial view returns as flat HTML. My code is as follows:

Controller that currently returns the full view:

        [HttpPost]
        public async Task<IActionResult> CreateTicketMessage(OverviewTicketSystemModel t)
        {
            t.Ticket.UserID = _securityHelper.CurrentUser.UserId;

            var sendMessage = await _TicketApiClient.CreateTicketMessageAsync(t.Ticket.UserID, t.Ticket.TicketID, t.Ticket.MessageTexts.MessageText);

            OverviewTicketSystemModel vm = new OverviewTicketSystemModel();

            t.Ticket = await _TicketApiClient.GetTicketByIDAsync(t.Ticket.TicketID);

            vm = t;

            return RedirectToAction("DisplayTicketView", vm);

        }

Message partial view that displays the message and holds the reply box which is appended via JS once a row in my Kendo grid is clicked:

<div class="card mt-3 ml-0 pl-0" style="min-height:95vh">
    <input type="hidden" asp-for="@Model.Ticket.TicketID" />
    <div class="card-header d-flex justify-content-between align-items-center pt-4" style="background-color:white; border-bottom:3px solid #f5f5f5; border-top-left-radius:6px; border-top-right-radius:6px;">
        @if (!string.IsNullOrEmpty(Model.Ticket.Subject))
        {
            <p class="mb-0" style="font-weight:bolder; font-size: 20px;">@Model.Ticket.Subject</p>
        }
    </div>
    <div class="card-body d-flex flex-column pb-0" style="max-height: 80vh;">
        <div class="message-container overflow-auto pr-2 flex-grow-1" id="message-container" style="max-height: calc(80vh - 100px);">
            <!-- Display Initial Message -->
            @if (!string.IsNullOrEmpty(Model.Ticket.Message))
            {
                <div class="follow-up-message @(Model.Ticket.UserID == SecurityHelper.CurrentUser.UserId ? "message-right" : "message-left")">
                    <p>@Model.Ticket.Message</p>
                </div>
            }

            <!-- Display Follow-up Messages -->
            @foreach (var message in Model.Ticket.MessageText)
            {
                <div class="follow-up-message @(message.UserID == SecurityHelper.CurrentUser.UserId ? "message-right" : "message-left")">
                    <p>@message.MessageText</p>
                    @* <p>Created Date: @message.CreateDate</p> *@
                </div>
            }
        </div>

        <!-- Reply Box -->
        <div class="reply-box mt-0" id="message-reply-form">
            @using (Html.BeginForm("CreateTicketMessage", "Ticket", FormMethod.Post))
            {
                <input type="hidden" asp-for="@Model.Ticket.TicketID" />
                <div class="form-group position-relative mb-0">
                    <label for="replyMessage"></label>
                    <textarea class="form-control" asp-for="@Model.Ticket.MessageTexts.MessageText" rows="1" style="min-height: 65px;"></textarea>
                    <button type="submit" class="btn btn-primary position-absolute mt-2" style="bottom: 10px; right: 10px;"><i class="fa-regular fa-paper-plane"></i></button>
                </div>
            }
        </div>
    </div>
</div>