Redirect to another page after Ajax call?

Question

so this is a hard one for me to try and explain. I have a razor page that when a button is clicked it calls a javascript function which makes an ajax call to a handler in the back end. The handler does some stuff and gets a id that I want to pass to another page. I am trying to use the RedirectToPage function in the back end but the screen never opens. It successfully calls the handler but when the handler does its return, nothing happens. Is there a way to do this?

Here is the javascript/ajax code that gets called from a button being clicked.

@section scripts{
<script>

// Get the account ID Data from the row selected and return that to the program.
function getIDData(el) {        

    var ID = $(el).closest('tr').children('td:first').text();
    var iddata = {
        'ID': ID
    }        

    console.log(iddata);
    return iddata;
}

// Submit the data to a function in the .cs portion of this razor page.
$('.copybtn').click(function () {
    var accountid = JSON.stringify(getIDData(this));
    $.ajax({
        url: '/Copy_Old_Account?handler=CopyData',
        beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                },
        type: 'POST',
        dataType: 'json',            
        data: { offenderid: offenderid },    
        success: function (result) { 

        }, 
    });
});

</script>
}

For my code behind code that I am calling from the ajax call, that's below here:

public ActionResult OnPostCopyData (string accountid)
{
   // Do my other stuff here
   return RedirectToPage("Account_Information", new { id = account.Account_ID });
}

Any help would be appreciated and if doesn't make sense, I can try and clear up any questions.

Answer 1

I think this is what you want, I did something similar in an MVC 5 project and I haven't tested it in Razor Pages yet:

This would be your method, note that you should add your Controller to the Url.Action , and I personally haven't tried passing a parameter along with the url but I image it'll work just fine

[HttpPost]
public ActionResult SubmitSomething()
{
    return Json(new { redirectUrl = Url.Action("Account_Information", "YOUR_CONTROLLER_NAME", new { id = account.Account_ID }) });
}

And then this would be your Ajax request, I updated the success portion

// Submit the data to a function in the .cs portion of this razor page.
$('.copybtn').click(function () {
    var accountid = JSON.stringify(getIDData(this));
    $.ajax({
        url: '/Copy_Old_Account?handler=CopyData',
        beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                },
        type: 'POST',
        dataType: 'json',            
        data: { offenderid: offenderid },    
        success: function (result) { 
            if (result.redirectUrl !== undefined) {
                window.location.replace(result.redirectUrl);
            } else {
                // No redirect found, do something else
            }
        }, 
    });
});

This isn't tested, so I can only hope that it works for you right now

Edit: Updated the Url.Action to use OP's view names and parameters

Answer 2

Redirect to page returns a 301 response, which will be in the format:

HTTP/1.1 301 Moved Permanently
Location: http://www.example.org/index.asp

To redirect after the ajax call you can redirect to the requested url by:

success: function (result) { 
window.location = result.getResponseHeader('Location');
}