return Page() in ASP.NET Core Razor Pages doesn't render the page after calling by RedirectToPage

Question

I'm new to ASP.NET Core Razor Pages.

In the index page I get the customers data and show them in a jQuery data table by ajax from the CustomerController. In the last column there are delete buttons. By these buttons I call delete method in the CustomerController.

JS Ajax file

$(document).ready(function() {
$("#customerDataTable").dataTable({
    "processing": true,
    "serverSide": true,
    "filter": true,
    "ajax": {
        "url": "/api/customer",
        "type": "post",
        "datatype": "json"
    },
    "columnDefs":[
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
    "columns":[
        { "data": "id", "name": "Id", "autoWidth": true },
        { "data": "firstName", "name": "First Name", "autoWidth": true },
        { "data": "lastName", "name": "Last Name", "autoWidth": true },
        { "data": "contact", "name": "Contact", "autoWidth": true },
        { "data": "email", "name": "Email", "autoWidth": true },
        { "data": "dateOfBirth", "name": "Date Of Birth", "autoWidth": true },
        {
            "render": function(data,type, row) {
                return "<a href='#' class='btn btn-danger' onclick=deleteCustomer('" + row.id + "'); 
        >Delete</a>"; }
                 }]
        });
    });

  function deleteCustomer(id) {
         $.ajax({
            url: "/api/customer",
            type: "GET",
            data: id
         });
    }

In the CustomerContoller I want to redirect to DeleteCustomer razor page with a parameter.

    [HttpGet]
    public IActionResult DeleteCustomer()
    {
        var id = Request.Query.Keys.ToList()[0];
        return RedirectToPage("/DeleteCustomer", new{id});
    }

In the DeleteCustomer Page there is a simple get method.

    [BindProperty]
    public int CustomerId { get; set; }

    public IActionResult OnGet(string id)
    {
        CustomerId = int.Parse(id);
        return Page();
    }

When I debug the app line by line CustomerControll redirect to DeleteCustomer page properly, and the OnGet method in the page return the Page() method, but browser doesn't render the HTML part of the page without any errors. Just Index page still showed with the table of data.

If I call DeleteCustomer page in address bar DeleteCustomer page will rendered.

Why return Page() doesn't render and show the page after calling by RedirectToPage in the browser?

Answer 1

Why return Page() doesn't render and show the page after calling by RedirectToPage in the browser?

You make Ajax request from your client side, which does not automatically reload/refresh page. To display returned page content, you can try to dynamically write it in success callback function, like below.

$.ajax({
    url: "/api/customer",
    type: "GET",
    data: id,
    success: function (res) {
        //console.log(res);
        document.write(res);
    }
});

Besides, you can also try to modify the approach to make your API action DeleteCustomer return an id, then do redirection on client side, like below.

[HttpGet]
public IActionResult DeleteCustomer()
{
    //your code logic here

    //var id = Request.Query["id"];
    //return RedirectToPage("/DeleteCustomer", new { id });

    return Ok(new { id });
} 

On client side

success: function (res) {
    console.log(res.id[0]);

    window.location.assign("/DeleteCustomer?id=" + res.id[0]);
    //document.write(res);
}