Asp.Net Core XpagedList Paging reload the page instead render inside a div

Question

I am writing and Asp.Net Core MVC 6 App and I am using X.PagedList

I render a PartialView inside a <div="dvBody"> in the parent View.

In parent View I fill that div using Ajax

 $.ajax(
            {
                    type: "POST",
                    data: model,
                    headers: {
                        "RequestVerificationToken":
                            $('input:hidden[name="__RequestVerificationToken"]').val()
                    },
                    url: '@Url.Action("Search", "Participant")',
                    success:function(result){
                        $("#dvBody").html(result);
                    },
                    error:function (req,status,error){
                        alert("error");
                    }
            });

That Partial Page has a table with PageList and when I change the PageNumer, I want to render the page in the same div

@Html.PagedListPager((IPagedList)Model.SearchResultViewPaging, page => Url.Action("ResultPaging", "Participant", new { page = page }),
                                     X.PagedList.Web.Common.PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions
                                    {
                                         HttpMethod = "GET",
                                         UpdateTargetId = "dvBody",
                                     }))

The Url of the Application is https://localhost:7063/Home/Participant

When it runs and click Page 2 the Page redirect the Url to https://localhost:7063/ResultPaging?page=2 instead of render it inside the div defined in the Parent View and keep the Url

My ResultPaging Mehtod looks like this

 [HttpGet("ResultPaging")]
    [ClientPartialWebError]
    public IActionResult ResultPaging(int? page)
    {
        try
        {
               resultViewModel.SearchResultViewPaging = data.ToPagedList(pageNumber, 10);
            return PartialView("SearchResult", resultViewModel);
        }
        catch (Exception ex)
        {
            
        }
    }

mi Program.cs looks like this

....

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/ErrorPage/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseSession();

app.UseDeveloperExceptionPage();

app.UseCors(ConstantValues.CORS_POLICY_NAME);

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Menu}/{id?}");

app.MapControllerRoute(
    name: "auth",
    pattern: "/{controller}/{action}",
    defaults: new { controller = "Auth", action = "Login" })
    .RequireCors(ConstantValues.CORS_POLICY_NAME);

app.MapControllerRoute(
    name: "logout",
    pattern: "{controller}/{action}",
    defaults: new { controller = "Auth", action = "Logout" });

app.MapControllerRoute(
    name: "refreshsession",
    pattern: "{controller}/{action}",
    defaults: new { controller = "Auth", action = "RefreshSession" });

app.MapControllerRoute(
    name: "changeprimarynavigation",
    pattern: "{controller}/{action}",
    defaults: new { controller = "Auth", action = "ChangePrimaryNavigation" });

app.Run();

What I am missing?

thanks

Answer 1

Be sure add the jquery.unobtrusive-ajax.js reference in your parent view:

<div id="dvBody">
    
</div>
    
@section Scripts
{    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js" integrity="sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=" crossorigin="anonymous"></script>

    <script>
        $(function(){
            $.ajax(
            {
                //....
                success: function (result) {
                    $("#dvBody").html(result);
                },
                error: function (req, status, error) {
                    alert("error");
                }
            });
        })      
    </script>
}