时间戳

首页 > 解决方案 > POST 操作后视图不显示更新的数据

javascript - POST 操作后视图不显示更新的数据

问题描述

我正在尝试加载部分视图并通过 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，但 in view 始终为 1。

标签： javascriptc#ajaxasp.net-mvcmodel-view-controller

解决方案

您的代码中存在一些问题。我看不到您在哪里更新 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>
}

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

推荐阅读