• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

在ASP.NET核心加载AJAX的部分视图

用户头像
it1352
帮助37

问题说明

当我更改按ajax分页时,我希望每行加载我的部分视图。我的部分负责表格中每一行的按钮 我有一个如下的部分视图:

 @model Guid

<td style="width: 150px">
    <div   role="group">
        <a asp-action="Edit" asp-route-  class="btn btn-primary text-white"><i class="fas fa-edit"></i></a>
        <a asp-action="Details" asp-route-  class="btn btn-success text-white"><i class="fas fa-list-alt"></i></a>
        <a asp-action="Delete" asp-route-  class="btn btn-danger text-white"><i class="fas fa-trash-alt"></i></a>
    </div>
</td>

我在我的表中每行使用以下内容:

   <table   class="table table-striped border">
                <tr class="table-secondary">
                    <th>
                        @Html.DisplayNameFor(c => c.List.FirstOrDefault().Title)
                    </th>
                    <th></th>
                    <th></th>
                </tr>
                @foreach (var expertise in Model.List)
                {
                    <tr>
                        <td>@Html.DisplayFor(c => expertise.Title)</td>
                        <td>
                            <partial name="_TableButtonPartial" model="@expertise.Id" />
                        </td>
                    </tr>
                }
            </table>
            <div page-model="@Model.PagingInfo" page-classes-enabled="true" page- 
                 page-class-normal="btn btn-light" page-class-selected="btn btn-info active"
                 class="btn-group float-right">
            </div>

所以我想让AJAX分页,但我不知道如何在AJAX中加载每行的Patial

@section Scripts
{
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        function goToPage(param) {
            var url = '@Url.Content("~/")'   param;

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'text',
                success: function (data) {
                    var results = JSON.parse(data);
                    var items = '';
                    $('#exp').empty();
                    $.each(results.list,
                        function (i, expertise) {
                            items = "<tr>"  
                                "<td>"   expertise.title  
                                "</td>"  
                                "<td>"  
                                "<partial name='_TableButtonPartial' model='"  
                                expertise.id  
                                "'/>"  
                                "</td>"  
                                "</tr>";
                        });
                    $('#exp').html(items);
                }
            });
        }
    </script>
}

正确答案

#1

如何在AJAX中按行加载此部分

您可以修改代码以动态获取部分视图的html并填充表,如下所示。

$.each(results.list,
    function (i, expertise) {

        //make request to get the html of partial view
        //and generate new rows to populate table

        $.get("/Home/GetPartial/"   expertise.id, function (res) {
            var newrow = "<tr>"  
                "<td>"   expertise.title  
                "</td>"  
                "<td></td>"  
                res  
                "</tr>";

            items  = newrow;

            if (i == results.list.length - 1) {
                $('#exp').html(items);
            }

        });
    });

控制器操作

[Route("{controller}/{action}/{id:guid}")]
public IActionResult GetPartial(Guid id)
{
    return PartialView("_TableButtonPartial", id);
}

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /reply/detail/tanecef
系列文章
更多 icon
同类精品
更多 icon
继续加载