使用ajax刷新主视图表中的局部视图

Question

我有一部分模型需要每5秒更新一次，因此我将其粘贴在局部视图中，但是刷新时无法将其放置在正确的位置。

我只是无法弄清楚它的加载位置，我需要在页眉之后加载它，就像它最初的开始方式一样，但是不幸的是它将它加载到桌子上方或其他晦涩的地方。

指数

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

_指数

@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

像下面那样使用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);

Answer 2

您可以添加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);