Invoking a Controller's ActionResult with Javascript

Question

Invoking a Controller's ActionResult with Javascript

I'm attempting to invoke an ActionResult from a Controller in JavaScript.

The ActionResult is located in my AdminController.

[HttpPost]
public ActionResult Logout()
{
    return RedirectToAction("Login", "Login");
}

This is the Logout button in AdminView.

<a class="navbar-link" id="logout" name="logout" href="#">
    ログアウト
</a>

Now, I am trying to create an event in JavaScript.

  $("#logout").click(function () {
        swal({
            title: "ログアウト?",
            text: "アカウントからサインアウトしますか？",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
            .then((willLogout) => {
                if (willLogout) {
                    //swal("Poof! Your imaginary file has been deleted!", {
                    //    icon: "success",
                    //});
                    $.ajax({
                        url: "/Admin/Logout",
                        type: 'POST',
                        success: function (result) {
                            document.location.reload(true);
                        }, 
                        error: function (result) {

                        }
                    });
                }
            });
    });

The main objective here is to redirect the user to the Login Page using the Controller.

I tried placing the swal("Poof")... inside the .then(willLogout) and it worked fine.

However, when I attempt to call the ActionResult using ajax, it doesn't work as expected.

Upon checking the console, it appears that nothing is being displayed.

I'm unsure of what mistake I might be making.

How can I effectively call the ActionResult from Controller to the JavaScript file using an Ajax call?

javascript ajax model-view-controller

Answer 1

Answer №1

For the benefit of newbies like myself, I wanted to share the solution that worked for me.

I quickly realized that each ActionResult needed a corresponding View.

So, within my AdminView.cshtml, I added a hidden button.

<button type="submit" id="submitLogout" name="button" value="logout" hidden>logout</button>

Next, in my JSFILE

I removed the erroneous ajax call.

$("#logout").click(function () {
    swal({
        title: "Logout?",
        text: "Do you want to sign out of your account?",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willLogout) => {
        if (willLogout) {
            $("#submitLogout").click();
        }
    });
});

This JavaScript function triggers the hidden button in .cshtml and activates the ActionResult in the Controller.

In my Controller, I made sure that every ActionResult had an associated View.

public ActionResult AdminView(string button)
{
    if (button == "logout")
    {
        FormsAuthentication.SignOut();
        Session.RemoveAll();
        Session.Abandon();
        return RedirectToActionPermanent("Login", "Login");
    }
    else
    {
        if (!(Session["UserInfo"] is UserModel))
        {
            return RedirectToActionPermanent("Login", "Login");
        }
        else
        {
            return View();
        }
    }
}

The parameter string button in the ActionResult represents the button's name that triggered the action. If the trigger is successful, the button's value is passed to the argument string button.

Answer 2

For the benefit of newbies like myself, I wanted to share the solution that worked for me.

I quickly realized that each ActionResult needed a corresponding View.

So, within my AdminView.cshtml, I added a hidden button.

<button type="submit" id="submitLogout" name="button" value="logout" hidden>logout</button>

Next, in my JSFILE

I removed the erroneous ajax call.

$("#logout").click(function () {
    swal({
        title: "Logout?",
        text: "Do you want to sign out of your account?",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willLogout) => {
        if (willLogout) {
            $("#submitLogout").click();
        }
    });
});

This JavaScript function triggers the hidden button in .cshtml and activates the ActionResult in the Controller.

In my Controller, I made sure that every ActionResult had an associated View.

public ActionResult AdminView(string button)
{
    if (button == "logout")
    {
        FormsAuthentication.SignOut();
        Session.RemoveAll();
        Session.Abandon();
        return RedirectToActionPermanent("Login", "Login");
    }
    else
    {
        if (!(Session["UserInfo"] is UserModel))
        {
            return RedirectToActionPermanent("Login", "Login");
        }
        else
        {
            return View();
        }
    }
}

The parameter string button in the ActionResult represents the button's name that triggered the action. If the trigger is successful, the button's value is passed to the argument string button.

Invoking a Controller's ActionResult with Javascript

Answer №1

Similar questions

Merge Various Ng-Loops

I am facing an issue with effectively passing properties from a parent state to its child component

Include a new key and its corresponding value to an already existing key within FormData

The function GetURLParameter(sParam) is displaying %20 as blank space in the webpage

A helpful guide on including an image file from a form in a jQuery ajax request

Exploring the method of implementing a "template" with Vue 3 HeadlessUI TransitionRoot

Node.js/Express - unable to retrieve client body data on server

Uncovering the deepest levels of nested arrays and objects in JavaScript without any fancy libraries - a step-by-step guide!

Having issues debugging in the browser as React seems to be undefined

switch out asterisk on innerhtml using javascript

Learning how to extract data from a JSON file using JavaScript

Steps on removing a file type from a Material UI textfield

How to customize XMLHttpRequest in Firefox's WebExtension

What is the best way to extract multiple return values from the $.post function in jQuery?

"Has the implementation of functions within the Serial API, specifically navigator.serial and SerialPort, not been completed

What is the best way to incorporate JavaScript code using Django tags in a Django template?

Authentication with PassportJS using Google OAuth2 strategy

Saving information on localStorage is not possible

Updating corresponding key values in two JavaScript objectsORModify matched key values

How to center scroll overflowed div vertically on element using Angular (5)