ASP.NET Core MVC - VIew 未正確更新 - Ajax？

Question

我有一個 ASP.NET Core 6 MVC 應用程序。

在一頁上我有一張桌子； 我想支持其行的拖放。 之后，用戶可以單擊“提交”並使更改永久生效。

更改被發送到 controller 並保存到數據庫中，但是當我重定向到GET以再次顯示頁面時，其中一部分是錯誤的！

@model MyViewModel

<form>
    @Html.HiddenFor(y=>y.Id)
    <table id="orderTable" class="table">
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
              Order
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var data in Model.Data)
        {
            <tr id='@data.Id'>
                <td>@data.Name</td>
                <td>@data.Order</td>
            </tr>
        }
    </tbody>
</table>

<div class="form-group">
    <input type="submit" value="Save" id="SaveOrderButton" />

</div>
</form>

 <script>
     $(document).ready(function() {
        $('#orderTable tbody').sortable();
        $("#SaveOrderButton").click(function(e) {
           e.preventDefault();                  
                var newOrder =  $('#orderTable tbody').sortable('toArray');
                $.ajax({
                    url: '/Controller/Update',
                    type: 'POST',
                    data: { rowOrder: newOrder, id: @Html.Raw(Model.Id) },
                    success: function(response) {
                        console.log(response);        
                      },
                        error: function(xhr,status, error){
                             console.log("An error occurred: " + xhr.responseText);
                        }
                    });
            });
        });
    </script>

后端：

[HttpGet]
public async Task<IActionResult> Order(int id)
{
    var data= await context.Data
                           .AsNoTracking()
                           .Where(x => x.Id== id)
                           .ToListAsync();

    data = data.OrderByDescending(y => y.Order.HasValue)
               .ThenBy(y => y.Order)
               .ToList();

    var viewModel = new MyViewModel()
                        {
                            Data = data,
                            Id = id,
                        };

    ModelState.Clear();   // found on SO, but does not change anything

    return View(viewModel);
}

[HttpPost]
public async Task<IActionResult> Update(int[] rowOrder, int id)
{
    var data= await context.Data
                           .Where(y => rowOrder.Contains(y.Id))
                           .ToListAsync();

    for (int i = 0; i < rowOrder.Count(); i++)
    {
        data.First(y => y.Id == rowOrder[i]).Order = i;
    }

    try
    {
        context.UpdateRange(data);
        await context.SaveChangesAsync();
    }
    catch (Exception ex)
    {
        logger.LogError("..........");
        return Json(500, "Could not update new order.");
    }

    return RedirectToAction(nameof(Controller.Order), new { id= id});
}

好的，所以我 go 使用GET的視圖並且所有內容都正確顯示，然后我更改一些內容並單擊“保存”。 POST中的所有內容都將正確完成。 數據庫已更新。

然后我再次重定向到GET方法，那里的所有內容都以正確的順序從數據庫正確加載。

然后我在 View 中設置了一個斷點，for 中的內容也是正確的。

但是，當我在瀏覽器中查看時，“訂單”列是錯誤的。 該表仍然顯示數據在我重新排序之后和單擊“保存”之前的樣子。

這里發生了什么？ 可排序庫是否在后台使用了我必須使其無效的緩存？

順便說一句，我不會在我的項目中的任何地方使用緩存。

另外，當我 go 在POST后到控制台時，整個網站的 HTML 都在那里。

現在，當我使用GET重新加載頁面時，所有內容都顯示為應有的樣子。

跟Ajax有關系嗎？ 我已經刪除了成功和錯誤事件，這不會改變任何東西。

Answer 1

跟Ajax有關系嗎？ 我已經刪除了成功和錯誤事件，這不會改變任何東西。

是的，問題與 Ajax 方法有關。

眾所周知，當我們使用Ajax更新view page部分時，調用action方法后，會返回response結果為success function，然后在success function中，我們從response中獲取更新后的數據，並且然后動態填充表來更新頁面，實現部分頁面刷新行為。

所以，在你的場景中，你可以嘗試使用以下方法來顯示更新后的數據。

方法一：

在 Update Action 方法中，返回更新后的數據作為結果，而不是重定向到另一個操作結果。 然后，在Ajax success function，從response中獲取數據，然后先清空表內容，再用response數據重新填充。

方法二：

在Ajax成功function，使用location.reload(); 方法重新加載當前頁面，或使用window.location.href刷新當前頁面。