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

_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

使用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);

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

2 个答案: