正在刷新主视图 table 和 ajax 中的局部视图

Question

我有一块模型需要每 5 秒更新一次，所以我将它卡在了局部视图中，但是当它刷新时我无法将它放置在正确的位置。

我只是不知道在哪里加载它，我需要在 headers 之后加载它，就像它最初的启动方式一样，但不幸的是它加载在 table 之上或其他不明显的地方.

索引

@model IEnumerable<Project.Models.User>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table">
                    <tr class="table-headers">
                        <th>
                            //Some Info
                        </th>
                        <th>
                            //More Info
                        </th>
                        <th>
                            //Even more Info
                        </th>
                    </tr>
                    @ { Html.RenderPartial("_Index");
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    setInterval(function()
    {
        var url = "@(Html.Raw(Url.Action("Refresh", "Users")))";

        $('.table-headers').after().load(url);
    }, 5000);

_Index

@model IEnumerable<Project.Models.User>

@foreach (var item in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => item.Id)</td>
        <td>@Html.DisplayFor(modelItem => item.Name)</td>
        <td>@Html.DisplayFor(modelItem => item.Password)</td>
    </tr>
}

控制器

public ActionResult Refresh()
{
    using DefaultConnection db = new DefaultConnection())
    {
        var model = from t in db.Calls where t.Name == "Joe" select t;

        return PartialView("_Index", model.ToList());
    }
}

Answer 1

您可以添加 tbody?:

<table class="table">
    <tr class="table-headers">
        <th>
           //Some Info
        </th>
        <th>
           //More Info
        </th>
        <th>
          //Even more Info
        </th>
    </tr>
    <tbody id="tableBody">
        @Html.Partial("_Index")
    </tbody>
</table>

并使用下一个 jquery 选择器：

$('#tableBody').load(url);

Answer 2

像下面这样使用 thead 和 tbody。

<table class="table">
    <thead>
        <tr class="table-headers">
            <th>
                //Some Info
            </th>
            <th>
                //More Info
            </th>
            <th>
                //Even more Info
             </th>
         </tr>
     </thead>
     <tbody>
            @ { Html.RenderPartial("_Index");
     </tbody> 
</table>

并在您的 js 中替换

$('.table-headers').after().load(url); 与 $('tbody').load(url);

正在刷新主视图 table 和 ajax 中的局部视图

Refreshing partial view in main view table with ajax

jquery

ajax

asp.net-mvc

asp.net-mvc-partialview