ASP.NET Core - 如何将 Javascript 变量从视图传递到控制器答案

【问题标题】：ASP.NET Core - How to pass a Javascript variable from View to ControllerASP.NET Core - 如何将 Javascript 变量从视图传递到控制器
【发布时间】：2020-12-09 12:22:20
【问题描述】：

我在 Javascript 函数中有一个变量，我想将其发送到控制器以激活指定的方法。

这是视图中 javascript 函数的代码：

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);
     }
                                            
  });

这是我想在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");
    }

每次我运行它时都会收到错误警报，我对 Ajax 还很陌生，所以我不知道如何处理它。谢谢。

【问题讨论】：

您遇到的错误是什么？
给Users而不是UsersController。并且 dataType 不是 HTML 删除它，并更新 URL tp url: '/Users/Login' 以获取更多信息，请参阅此 api.jquery.com/jquery.post/#entry-longdesc

标签： javascript c# ajax asp.net-core model-view-controller

【解决方案1】：

首先，ajax中url指定的控制器名称需要去掉Controller，即将UsersController改为Users。

并且在传递的参数数据中，更改{data:email} to {email:email}，或者将Login action接收到的参数名由email to data改为确保传递的参数名与接收到的参数名一致。

而如果要提示更新信息然后跳转到对应的视图，需要在Login动作中返回不同的信息给success方法，然后判断success方法中的数据再跳转.

 $.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);
     }

  });

行动：

[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");
    }

这里是测试结果：（gif中的代码是一个简化的判断。）

【讨论】：

【解决方案2】：

由于您在控制器中的参数名称命名为email，因此您也应该将要发送的对象中的属性命名为email。所以你的ajax调用应该是

$.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);
     }
                                            
  });

这将使$.ajax() 在请求正文中发送类似email=foo@bar.com 的字符串，MVC 可以解析。

【讨论】：