Вызовите метод действия в контроллере на функцию успеха Ajax для визуализации частичного представления

Question

Я пытаюсь вызвать метод действия контроллера для частичного просмотра, чтобы обновить часть большой веб-страницы.Я пытаюсь сделать это с помощью функции успеха Ajax.Поток управления кодом: Jquery Ajax вызывает веб-API для добавления чего-либо в базу данных. В функции успеха вызова Ajax я вызываю метод действия контроллера, который возвращает частичное представление.

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
                            }
                        });
                    }
                });
            });
        });

Метод контроллера для обновления частичного представления

    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>
            }
        }      

Главное представление, которое имеет другой HTML, а также отображает частичное представление _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>

Когда я отлаживаю код, поток управления работает должным образом, наконец, он переходит к _MessageView, но никогда не переходит к MainView, чтобы отобразить частичное представление функции успеха Ajax.Что я делаю не так?

Answer 1

вы возвращаете частичное представление return PartialView("_MessagesView", bvm); из ajax, частичное представление возвращает только ту часть, которая содержится в нем, а не основное представление, если ваше требование - это частичное представление из ajax, тогда вы можете получить частичное представлениепросмотрите ответ в вашем успешном ajax и замените ваш main view div частичным ответом.

действие ваших контроллеров SendMessagesTest(int? MessageID) верните частичное представление строки в вашем ответе ajax.

как показано ниже, ваш Main Представление

<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>

и ваш ajax только для вашего частичного обратного просмотра похож на

$(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);
                        }
                    });
                }
            });
        });
    });

Я надеюсь, это поможет вам сообщить мне, если потребуется дополнительная информация.