How can a Json return be sent from a controller to the frontend in Asp.NET Core MVC application?

Question

So, I have a JS script that sends a request to the server and that works fine. However, I want the frontend to recieve a response containing some information and read it on the frontend and execute a function.

    uploadButton.addEventListener("click", () => {
        var formData = new FormData();
        var request = new XMLHttpRequest();
        request.open("POST", "/Page/Upload");
        request.send(formData);

        if (request.response.result == "Success") {
            console.log("Result is success")
            window.location = request.response.url;
        }
}

My controller looks like this.

[HttpPost("/page/upload")]
public IActionResult Upload()
        {
            *working parts pertaining to reading the request are omitted*

            var redirectUrl = Request.Host + "/" + page.PageURL;
            return Json(new { result = "Success", url = redirectUrl});
        }

What I want is for my JS script to access the returned Json and its contents. How would I do this?

Answer 1

Try using the following code. It will subscribe the readystatechange event and run when API response has been received

uploadButton.addEventListener("click", () => {

        var formData = new FormData();
        var request = new XMLHttpRequest();
        request.open("POST", "/Page/Upload");
        request.send(formData);

        request.addEventListener("readystatechange", function () {

            if (this.readyState === 4) {

                var responseData = JSON.parse(this.responseText);

                if (responseData.result == "Success") {
                    console.log("Result is success")
                    window.location = responseData.url;
                }             
            }
        });
    });