Question

我正在尝试调用控制器操作方法以呈现部分视图以更新大网页的一部分。我正在尝试在Ajax成功功能上执行此操作。代码控制流程： jQuery Ajax调用Web api向数据库中添加一些内容，在Ajax调用的成功功能上，我正在调用返回部分视图的控制器操作方法。

jQuery脚本

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

我希望它可以帮助您让我知道是否需要更多信息。

在Ajax成功函数上的控制器中调用操作方法以渲染部分视图

1 个答案: