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

Question

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?

score 0 · Accepted Answer · answered Jul 23 '23 at 15:24

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.

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

1 Answers1