Call Action Method in controller on Ajax success function to Render partial view

Question

I am trying to call controller action method to render partial view to update the part of big web page. I am trying to do this on Ajax success function. Code Control Flow: Jquery Ajax calls a web api to add something to database, on the success function of the Ajax call, I am calling controller action method that returns partial view.

Jquery Script

 $(document).ready(function () {
            $("#sendMessage").on("click", function (e) {
                e.preventDefault();
                var MessageReplyParam = $('#messageToBeSent').val();
                var FromUserNameParam = $('#FromUserName').val();
                var FromUserIDParam = $('#FromUserID').val();
                var ToUserNameParam = $('#ToUserName').val();
                var ToUserIDParam = $('#ToUserID').val();
                var button = $(this);
                $.ajax({
                    //url: "/api/messages/SendMessages?MessageID=" + button.attr("data-message-id"),
                    url: "/api/messages/SendMessages",
                    method: "POST",
                    data: {
                        lngMessageID: button.data("message-id"),
                        Reply: MessageReplyParam,
                        FromUserID: FromUserIDParam,
                        FromUserName: FromUserNameParam,
                        ToUserID: ToUserIDParam,
                        ToUserName: ToUserNameParam
                    },
                    dataType: 'html',
                    success: function (data) {
                        $.ajax({
                            url: "/Booking/SendMessagesTest",
                            method: "POST",
                            data:
                            {
                                MessageID:2
                            }
                        });
                    }
                });
            });
        });

Controller method to update Partial View

    public ActionResult SendMessagesTest(int? MessageID)
        {          

            var messagesReplies = from mrp in _context.MessageReply
                                  where mrp.lngMessageID == MessageID
                                  select mrp;

            List<MessageReply> MessageReplies = new List<MessageReply>();
            MessageReplies = messagesReplies.ToList();

            BookingViewModel bvm = new BookingViewModel();

            bvm.MessageReplies = MessageReplies;

            return PartialView("_MessagesView", bvm);

        }

_MessagesView.cshtml

@model DatabaseMVCPractice.ViewModels.BookingViewModel
 @if (Model.MessageReplies != null)
        {
            foreach (var msg in Model.MessageReplies)
            {
                <p class="chatMessage">@msg.FromUserName: @msg.Reply</p>
            }
        }      

Main View that has other html and also render partial view of _MessageView

  <div id="partial">
            <div class="messages">
                <div class="bg-dark rounded padding-x4">
                    @{
                        Html.RenderPartial("_MessagesView", Model);
                    }
                </div>
                    <p>@Html.DisplayFor(model => model.Messages.Message)</p>
            </div>
         </div>

When I debug the code, control flow works properly, at last, it goes to _MessageView but it never goes to MainView to render the partial view on Ajax success function. What am I doing wrong?

Answer 1

you are returning partial view return PartialView("_MessagesView", bvm); from ajax , partial view is returning only that part contains in it not main view, if your requirement is render partial view from ajax then you can get partial view response in your ajax success and replace your main view div with partial response.

your controllers action SendMessagesTest(int? MessageID) return partial view string in your ajax response.

like below is your Main View

<div id="partial">
            <div class="messages">
                <div id="divMessages" class="bg-dark rounded padding-x4">
                    @{
                        Html.RenderPartial("_MessagesView", Model);
                    }
                </div>
                    <p>@Html.DisplayFor(model => model.Messages.Message)</p>
            </div>
         </div>

and your ajax only for your return partial view is like

$(document).ready(function () {
        $("#sendMessage").on("click", function (e) {
            e.preventDefault();
            var MessageReplyParam = $('#messageToBeSent').val();
            var FromUserNameParam = $('#FromUserName').val();
            var FromUserIDParam = $('#FromUserID').val();
            var ToUserNameParam = $('#ToUserName').val();
            var ToUserIDParam = $('#ToUserID').val();
            var button = $(this);
            $.ajax({
                //url: "/api/messages/SendMessages?MessageID=" + button.attr("data-message-id"),
                url: "/api/messages/SendMessages",
                method: "POST",
                data: {
                    lngMessageID: button.data("message-id"),
                    Reply: MessageReplyParam,
                    FromUserID: FromUserIDParam,
                    FromUserName: FromUserNameParam,
                    ToUserID: ToUserIDParam,
                    ToUserName: ToUserNameParam
                },
                dataType: 'html',
                success: function (data) {
                    $.ajax({
                        url: "/Booking/SendMessagesTest",
                        method: "POST",
                        data:
                        {
                            MessageID: 2
                        },
                        success: function (response) {
                            $("#divMessages").html("");
                            $("#divMessages").html(response);
                        }
                    });
                }
            });
        });
    });

i hope it should helps you let me know if require more information.