Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

here i am calling a partial view in main page admin.cshtml and partial view is user.cshtml through ajax

<div class="col-sm-10 col-md-9 w-100" id="loadPartialView">
                @await Html.PartialAsync("~/Views/Shared/_userpage.cshtml")

here i am loading all partial view whenever i am clicking the link on sidebar of admin.cshtml

now whenver i am calling user.cshtml and when the count of user is 0 than this if block is not displayed in main admin.cshmtl page when code is executed

<div class="table-responsive">
    @if (Model.users.Count() == 0)
        <div class="d-flex mt-5 flex-column" id="nouser">
        <div class="mx-auto"><h3>No user found</h3></div>
    <table class="table">
        @if (Model.users.Count() == 0)
        <div class="d-flex mt-5 flex-column" id="nouser">
        <div class="mx-auto"><h3>No user found</h3></div>
        <thead>
                <th scope="col">Firstname</th>
                <th scope="col">Lastname</th>
                <th scope="col">Email</th>
                <th scope="col">Employee id</th>
                <th scope="col">Department</th>
        </thead>
        <tbody>
            @foreach (var user in Model.users)
                    <td>@user.FirstName</td>
                    <td>@user.LastName</td>
                    <td>@user.Email</td>
                    <td>@user.EmployeeId</td>
                    <td>@user.Department</td>
      </tbody>
    </table>
    <div class="d-flex justify-content-center page">
        @if (Model.users.PageCount > 1)
            <ul class="pagination use">
                @if (Model.users.HasPreviousPage && Model.users.PageNumber > 1)
                    <li class="page-item"> <a class="page-link" id="@Convert.ToInt32(@Model.users.PageNumber -1)"> &#60;&#60; </a></li>
                    <div class="page-item"> <a class="page-link disabled" id="@Convert.ToInt32(@Model.users.PageNumber -1)"> &#60;&#60; </a></div>
                @for (int i = 1; i <= Model.users.PageCount; i++)
                    if (i == Model.users.PageNumber)
                        <li class="page-item active"><a class="page-link" id="@i">@i</a></li>
                        <li class="page-item"><a class="page-link" id="@i">@i</a></li>
                @if (Model.users.HasNextPage && Model.users.PageNumber < Model.users.PageCount)
                    <li class="page-item"><a class="page-link" id="@Convert.ToInt32(@Model.users.PageNumber + 1)"> >></a></li>
                    <div class="page-item"><a class="page-link disabled" id="@Convert.ToInt32(@Model.users.PageNumber + 1) "> >></a></div>

this is the code that i ma displaying and this the ajax result for it the result is perfect but only when count is 0 nothing is appering not even no user found div

$.ajax({
        url: "/Admin/User",
        type: "POST",
        data: {
            SearchInputdata: keyword,
        success: function (response) {
            alert('called');
            console.log(response);
            console.log("the id element", $(response).find("#nouser").html());
            $('#nouser').html($(response).find('#nouser').html());
            $('.table').empty().html($(response).find('.table').html());
            $('.pagination').empty().html($(response).find('.pagination').html());

what is the problem with this?

Not quite sure, it's a bit difficult to to follow. That said, in your AJAX call's success handler, it looks like you are getting the nouser element's HTML from the response and attempting to place it in the nouser element's HTML that you expect to already exist on the page. I don't think you have the nouser element on the page so your AJAX success handler can't locate the element and update the HTML. So, are you sure your nouser element exists on the page at the time the AJAX success handler is run? This line is in question... $('#nouser').html($(response).find('#nouser').html()); – quaabaam Apr 17 at 19:15

Ok, so I think above code is getting really quite crazy and hard to follow. It's pretty hard to work out what is going on and the issue that you have.

I think in the core of what your doing is displaying a list of something and then wanting to paginatate that with ajax.

Essentially you have the right approach, load in a Model and use the PartialView to show the data that you want. But after that is where you run into the problems.

Issue 1. So rather than use your own pagination I would use something like X.PagedList it's super simple and easy to set up. Code like this would help.

@Html.PagedListPager(Model.Supervisions,
            page => Url.Action("MyAction", new { searchParam = Model.MySearch page }),
            PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions {  UlElementClasses = new[] { "pagination pagination-sm" } },new AjaxOptions()
                HttpMethod = "GET",
                UpdateTargetId = "loadPartialView",
                InsertionMode = InsertionMode.Replace

loadPartialView is the outside element id and myAction is an action that would send back the partialView. In your case it would go to /Admin/User and your controller might use the if (Request.IsAjaxRequest()) to determine the request type.

Issue 2. I wouldn't use your own code and use the jquery.unobtrusive-ajax.js should just plug and play with the pagination you have created.

After that it should all work.

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.