POST 操作后视图不显示更新的数据答案

【问题标题】：View doesn't show updated data after POST actionPOST 操作后视图不显示更新的数据
【发布时间】：2020-11-11 07:11:44
【问题描述】：

我正在尝试加载部分视图并通过 POST Ajax 对其进行更改，但模型不会在视图中更新。

这就是我加载部分内容的方式：

@{
    Html.RenderAction("UltimeNovità", "User");
}

我在 UserController 中的操作是：

 public ActionResult UltimeNovità()
    {
        _UltimeNovitàViewModel model = new _UltimeNovitàViewModel();
        model.NumeroPagina = 1;

        return PartialView("~/Views/User/Partial/_UltimeNovità.cshtml",model);
    }

这里是部分：

@model Mine.Models._UltimeNovitàViewModel

<script>

$(document).ready(function () {
});

function nextPage() {
    $.ajax({
        url: '@Url.Action("UltimeNovitàPaginaSuccessiva")',
        type: 'POST',
        data: { pagina: @Model.NumeroPagina },
        success: function (data) {
            $('#x').text('@Model.NumeroPagina');
        },
        error: function (xhr) {
            alert('error');
        }
    });
}

</script>

<p id="x">1</p>

最后，同一控制器中的 POST 动作：

[HttpPost]
    public ActionResult UltimeNovitàPaginaSuccessiva(int pagina)
    {            
        _UltimeNovitàViewModel model = new _UltimeNovitàViewModel();
        ModelState.Clear();
        model.NumeroPagina = pagina + 1;
        model.UltimeNovità = UserControllerMethods.GetUltimeNovità(model.NumeroPagina);

        return PartialView("~/Views/User/Partial/_UltimeNovità.cshtml", model);
    }

我的问题是：为什么在 POST 操作之后 @Model.NumeroPagina 始终为 1？我希望每次按下使用 ajax 调用函数的按钮时，@Model.NumeroPagina 都会增加 1，并显示在我的段落中。

该按钮位于包含部分的主页中，总是点击操作，在调试期间我可以看到 model.NumeroPagina 为 2，但 view 始终为 1。

【问题讨论】：

标签： javascript c# ajax asp.net-mvc model-view-controller

【解决方案1】：

您的代码中存在一些问题。我看不到您在哪里更新 HTML 内容，而且您每次都在生成 nextPage 函数等等。

查看这个示例，它应该很容易使用。

控制器/视图模型

public class NovitàController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult UltimeNovità(int? page)
    {
        var model = new UltimeNovitàViewModel
        {
            NumeroPagina = 1
        };
        return PartialView("_UltimeNovità", model);
    }

    [HttpPost]
    public ActionResult UltimeNovitàPaginaSuccessiva(int pagina)
    {
        var model = new UltimeNovitàViewModel
        {
            NumeroPagina = pagina + 1,
            UltimeNovità = GetUltimeNovità(pagina + 1)
        };

        return PartialView("_UltimeNovità", model);
    }

    public string GetUltimeNovità(int page)
    {
        return $"Ultime Novità: {page}"; //FOR DEMO
    }

    public class UltimeNovitàViewModel
    {
        public int NumeroPagina { get; set; }
        public string UltimeNovità { get; set; }
    }
}

_UltimeNovità局部视图：

@model NovitàController.UltimeNovitàViewModel

@if (Model.UltimeNovità != null)
{
    <div>
        UltimeNovità: @Model.UltimeNovità
    </div>
}

<div>
    Pagina: @Model.NumeroPagina
</div>

<div>
    <a class="next-page-link" href="@Url.Action("UltimeNovitàPaginaSuccessiva", "Novità", new {pagina = Model.NumeroPagina})">
        Pagina Successiva
    </a>
</div>

还有Index 页面：

@{
    ViewBag.Title = "Novità";
}

<div id="RootDiv">
    @{ Html.RenderAction("UltimeNovità", "Novità");}
</div>

@section scripts{
    <script>
        $(function() {
            function bindNextPageLink() {
                $("#RootDiv a.next-page-link").click(function(event) {
                    event.preventDefault();

                    $.post($(this).attr("href"),
                        function(data) {
                            $("#RootDiv").html(data);
                            bindNextPageLink();
                        }
                    );
                });
            }

            bindNextPageLink();
        });
    </script>
}

我尝试编写与您的代码非常相似的示例。

【讨论】：