更新一个div整个页面的问题

Question

我在一个页面上有两个table，这两个table中的一个是根据时间更新的，我只需要更新允许更新的table . 但以下代码输出结果如下：

Before the update

after the update

代码：

public IActionResult Pre(int id)
{
    var model = new Test();
    model.cart = (from a in _context.liveSports
                       join b in _context.odds on a.Id equals b.GameId
                       select new Cart_test()
                       {
                           AwayTeam = a.AwayTeam,
                           HomeTeam = a.HomeTeam,
                       }).Take(40).ToList();
    model.sport = (from a in _context.sport
                       select new Sport_test()
                       {
                           SportName = a.sport_Name,
                       }).Take(20).ToList();

    return View(model);
}

以上代码用于家庭控制器

查看：

<div class="body row" style="background-color:#1e1e1e;">
    <div class="col-lg-5" id="NotRefresh">
        <table class="table" style="color:white">
            <thead>
                <tr>
                    <th scope="col">home</th>
                    <th scope="col">away</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.cart)
                {
                    <tr>
                        <td>@item.HomeTeam</td>
                        <td>@item.AwayTeam</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <div class="col-lg-5" id="Refresh">
        <table class="table" style="color:white;background-color:#808080">
            <thead>
                <tr>
                    <th scope="col">name sport</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.sport)
                {
                    <tr>
                        <td>@item.SportName</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

脚本：

$(document).ready(function () {
    setTimeout(function () {
        $("#Refresh").load('@Url.Action( "Pre","Home") ');
    }, 2300);
});

我可能需要使用Ajax来更新。

但是

我不知道如何从控制器获取数据并仅更新 div 与 id:Refresh

Answer 1

添加 ID 到 Table:

<table class="table" ID="RefreshTable" style="color:white;background-color:#808080">..

然后您可以 "ask" 仅针对此元素及其内容：

$(document).ready(function () {
    setTimeout(function () {
        $("#Refresh").load('@Url.Action( "Pre","Home") #RefreshTable');
    }, 2300);
});

Answer 2

已添加局部视图视图更改：

            $(document).ready(function () {
                setTimeout(function () {
                    $("#Refresh").load('@Url.Action( "test","Home") ');
                }, 2300);
            });

<div class="body row" style="background-color:#1e1e1e;">
        <div class="col-lg-5" id="NotRefresh">
            <table class="table" style="color:white">
                <thead>
                    <tr>
                        <th scope="col">home</th>
                        <th scope="col">away</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.cart)
                    {
                        <tr>
                            <td>@item.HomeTeam</td>
                            <td>@item.AwayTeam</td>

                        </tr>
                    }
                </tbody>
            </table>
        </div>
        @Html.Partial("_test", Model)


    </div>

_test.cshtml:

            $(document).ready(function () {
                setTimeout(function () {
                    $("#Refresh").load('@Url.Action( "test","Home") ');
                }, 2300);
            });

@model Winigoo_web.Models.ViewModels.Test



<div class="col-lg-5">
    <table class="table" style="color:white;background-color:#808080" id="Refresh">
        <thead>
            <tr>
                <th scope="col">name sport</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.sport)
            {
                <tr>
                    <td>@item.SportName</td>

                </tr>
            }
        </tbody>
    </table>
</div>

和

向 return 部分视图添加一项操作，例如：

        public IActionResult test(int id)
    {
        var model = new Test();
        model.cart = (from a in _context.liveSports
                      join b in _context.odds on a.Id equals b.GameId
                      select new Cart_test()
                      {
                          AwayTeam = a.AwayTeam,
                          HomeTeam = a.HomeTeam,
                      }).Take(40).ToList();
        model.sport = (from a in _context.sport

                       select new Sport_test()
                       {
                           SportName = a.sport_Name,
                       }).Take(20).ToList();

        return PartialView("_test",model);
    }

其工作正常

更新一个div整个页面的问题

The problem of updating a div of the entire page

c#

ajax

jquery

asp.net-core-2.1