CODEWITHSUNDEEP
asp.net-coreasp.net-core-mvc
Lajith
Lajith

Reputation: 1867

Asp.net core View Design and ajax in view component

In my ASP.NET Core app, I have this customer view:

enter image description here

I have divided the view into Part 1 and Part 2. Actually I need to achieve these 2 things in ASP.NET Core MVC:

  1. When the user clicks the Search button, load the Part 2 component.

  2. When the user clicks pagination in part 2, I need to refresh only part 2 component.

I have decided do the part 1 as a Razor view and Part 2 as a view component. Also I want to achieve refreshing the component when the user clicks Search button (part1) and clicks the pagination (inside same component)

  1. Please let me know whether I did correct or not?
  2. How to send the page index to component to reload the the component with ajax when page index is clicked?

Thanks in advance. I don't expect entire code. Please let me know the logic to refresh the component.

This is the code for pagination.

<nav aria-label="Pagination" class="col-12">
    <ul class="pagination justify-content-end">
        <li class="page-item @prevDisabled">
            <a class="page-link" 
                asp-controller="Home"  asp-action="getcust" 
                asp-route-id="@(Model.Stocks.PageIndex - 1)"
                aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        @foreach (var i in Model.Stocks.PageIndexesToDisplay)
        {
            var activeClass = i.IsActive ? "active" : "";

            <li class="page-item @activeClass"><a class="page-link"  
                                         asp-controller="Home" asp-action="getcust" 
                                        asp-route-id="@(i.Index)">@i.Index</a></li>
        }
        <li class="page-item @nextDisabled">
            <a class="page-link" 
                 asp-controller="Home" asp-controller="Home" asp-action="getcust" 
                asp-route-Id="@(Model.Stocks.PageIndex + 1)"
                aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>

Upvotes: 0

Views: 434

Answers (1)

LazZiya
LazZiya

Reputation: 5729

Please let me know whether I did correct or not?

Nothing wrong with your implementation, looks okay. Just a side note; you may consider partial view as well instead of view component.

How to send the page index to component to reload the the component with ajax when page index is clicked?

Invoking a view component can be done via InvokeAsync method:

@await Component.InvokeAsync("PagingList", new { pageNo = 1, pageSize = 10, /* ..etc. */ })

or you can invoke the view component as a taghelper:

<vc:paging-list page-no="1" page-size="10">
</vc:priority-list>

For more details see Invoking a view component

Another approach can be done with partial view instead of view component. I've published a sample repo similar to what you want to achive but with Asp.Net Core Razor Pages and partial views and a reliable pagination control :) you can check it here:

Upvotes: 2

Related Questions