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

Posted 2023-04-01

【中文标题】POST 操作后视图不显示更新的数据

【英文标题】：View doesn't show updated data after POST action

【发布时间】：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。

【参考方案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>

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