Search code examples
asp.net-core-mvcunobtrusive-ajax

asp-route-xxx in mvc and unobtrusive ajax not working


I have a series of links using ajax link ('a' tag) like this:

@foreach (int i in Enumerable.Range(1, Model.PagingInfo.TotalPages))
{
    string aClass = (Model.PagingInfo.CurrentPage == i ? "btn btn-secondary" : "btn btn-primary");
    <li class="page-item @(Model.PagingInfo.CurrentPage == i ? "active" : "")">
        <a class="page-link"
            data-ajax="true" data-ajax-method="get" 
            data-ajax-url="@(Url.Action("GetUsers", "AccountAdmin"))"
            data-ajax-mode="replace" data-ajax-update="#TableDiv"
            data-ajax-loading="#ajax" data-ajax-failure="failed" 
            asp-route-page="@i" 
            asp-route-pageSize="@Model.PageSize"
            asp-route-search="@Model.Search" 
            asp-route-sortOrder="@Model.SortOrder"
            asp-route-sortExpression="@Model.SortExpression">                                       
            @i
        </a>
    </li>                               
}

when I inspect page 2 link, The asp-route variables are encoded in the ajax link's href property. the href is correct and for 2nd link there are correct values.

but when I click the 2nd link, no route value come to the action method. and the action method is executed with default values.

How to solve this?


Solution

  • I changed the a to:

     <a class="page-link"
         data-ajax="true" data-ajax-method="get" 
         data-ajax-url="@(Url.Action("GetUsers", "AccountAdmin", 
                        new { page = i, pageSize = Model.PageSize, search = Model.Search,
                        sortOrder = Model.SortOrder, sortExpression = Model.SortExpression}))"
         data-ajax-mode="replace" data-ajax-update="#TableDiv"
         data-ajax-loading="#ajax" data-ajax-failure="failed">                                  
         @i
     </a>
    

    And now works.