更新整个页面的div的问题

Question

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

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);
}

上面的代码用于Homecontroller

视图：

<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来更新。

但

我不知道如何从控制器获取数据和仅更新id为：Refresh的div

Answer 1

在表中添加ID：

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

然后你可以“询问”这个元素及其内容：

$(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>



    

和

添加一个操作以返回部分视图，如：

        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);
    }

它的工作正常