ASP.NET Core - How to pass a Javascript variable from View to Controller

Question

I have a variable in a Javascript function that I want to send to the controller in order to activate a specified method.

This is the code from the javascript function in the View:

var email = response.email;    //String with an email address

 $.ajax({
     type: "POST",
     url: '@Url.Action("Login", "UsersController")',
     dataType: "html",
     data: { data: email },
                                            
     success: function (data) {
         alert('Your data updated');
         return data;
     },
     error: function (jqXHR, textStatus) {
         alert(textStatus);
     }
                                            
  });

This the method that I want to be activated in the Controller:

[HttpPost]
    public IActionResult Login(string email)
    {
        var user = _context.User.FirstOrDefault(u => u.Email == email);

        if (user != null)
        {
            SignIn(user);
            return RedirectToAction("Index", "Home");
        }

        return View("Login", "Users");
    }

Everytime I run this I get the error alert, I'm pretty new to Ajax so I'm not sure how to handle it. Thanks.

Give Users instead of UsersController. and dataType is not HTML remove that, and update the URL tp url: '/Users/Login' for more info see this api.jquery.com/jquery.post/#entry-longdesc — Sowmyadhar Gourishetty
– Sowmyadhar Gourishetty, Commented Aug 20, 2020 at 7:45

LouraQ · Accepted Answer · 2020-08-20 08:14:11Z

First of all, the controller name specified in the url in ajax needs to remove the Controller, that is, change the UsersController to Users.

And in the passed parameter data, change {data:email} to {email:email}, or change the Login action received parameter name from email to data to ensure that the passed parameter name is consistent with the received parameter name.

And if you want to alert the update information and then jump to the correspond view, you need to return different information in the Login action to the success method, and then judge the data in the success method and then jump.

 $.ajax({
     type: "POST",
     url: '@Url.Action("Login", "Users")',
     dataType: "html",
     data: { email: email },
     success: function (data) {
         if (data == "Success") { 
           alert('Your data updated');
           window.location.href = "/Home/Index";
        } else {
           alert("Please enter correct email!");
     }
     },
     error: function (jqXHR, textStatus) {
         alert(textStatus);
     }

  });

Action:

[HttpPost]
    public IActionResult Login(string email)
    {
        var user = _context.User.FirstOrDefault(u => u.Email == email);

        if (user != null)
        {
            SignIn(user);
            return Content("Success");
        }

         return Content("Wrong");
    }

Here is the test result:( the code in the gif is a simplified judgment.)

Tsahi Asher · Accepted Answer · 2020-08-20 07:47:50Z

0

Since your parameter name in the controller is named email, you should name the property in the object you are sending email too. So your ajax call should be

$.ajax({
     type: "POST",
     url: '@Url.Action("Login", "UsersController")',
     dataType: "html",
     data: { email: email },                          //<-- here                                            
     success: function (data) {
         alert('Your data updated');
         return data;
     },
     error: function (jqXHR, textStatus) {
         alert(textStatus);
     }
                                            
  });

This will make $.ajax() send a string like [email protected] in the body of the request, that MVC can parse.

answered Aug 20, 2020 at 7:47

Tsahi Asher

1,83417 silver badges30 bronze badges

Collectives™ on Stack Overflow

ASP.NET Core - How to pass a Javascript variable from View to Controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related