asp.netajaxasp.net-corerazorpagination

how to load partial view in ajax in asp.net core


I want to load my partial view per row when i change paging by ajax.my partial is responsible for buttons for each row in table i have an partial view like this below :

 @model Guid

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

and i use this in my table per row :

   <table id="exp" 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-class="btn border"
                 page-class-normal="btn btn-light" page-class-selected="btn btn-info active"
                 class="btn-group float-right">
            </div>

so i want to make paging ajax but i dont know how to load this patial per row in ajax

@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>
}

Solution

  • how to load this partial per row in ajax

    You can modify your code to dynamically get html of partial view and populate your table, like below.

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

    Controller action

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