Проблема обновления div всей страницы

Question

У меня две таблицы на одной странице, одна из этих двух таблиц обновляется в зависимости от времени, мне нужно обновить только таблицу, которая разрешает обновление.Но вывод следующего кода выглядит следующим образом:

до обновления

после обновления

Код:

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 для обновления.

Но

Я не знаю, как получить данные с контроллера и только Обновлениеdiv с идентификатором: Обновить

Answer 1

При добавлении частичного вида было сделано изменение вида:

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

его работа по ядру

Answer 2

Добавить идентификатор в таблицу:

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

Тогда вы можете «запросить» только этот элемент вместе с его содержимым:

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