如何对控制器操作进行 ajax 调用

Posted 2023-03-27

【中文标题】如何对控制器操作进行 ajax 调用

【英文标题】：How to make an ajax call to controller action

【发布时间】：2018-05-20 06:09:20

【问题描述】：

这是我的第一次 Ajax 调用，我真的很困惑该怎么做。

我正在使用 ASP.NET MVC，身份在我的 website 中注册用户。用户注册后，我会向他发送一封电子邮件以确认他们的电子邮件地址。

这是我的注册操作方法：

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(RegisterViewModel model)

    if (ModelState.IsValid)
    
        var user = new ApplicationUser  UserName = model.Email.Trim(), Email = model.Email.Trim(), FirstName = model.FirstName.Trim(), LastName = model.LastName.Trim() ;
        var result = await UserManager.CreateAsync(user, model.Password);
        if (result.Succeeded)
        
            // Send an email with this link
            string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
            var callbackUrl = Url.Action("ConfirmEmail", "Account", new  userId = user.Id, code = code , protocol: Request.Url.Scheme);
            Email email = _emailBuilder.BuildConfirmationEmail(new MailAddress(model.Email.Trim(), model.FirstName.Trim() + " " + model.LastName.Trim()), callbackUrl, model.FirstName.Trim());
                    
            Session[SessionKeys.NewAccountConfirmationEmail.ToString()] = email;
            await _emailService.SendEmailAsync(email);

            return RedirectToAction("NewAccountCheckYourEmail");
        
        AddErrors(result);
    

    // If we got this far, something failed, redisplay the form
    return View(model);

register 方法发送确认邮件并重定向到 NewAccountCheckYourEmail 视图，用户看到此页面：

这是重定向用户以确认您的电子邮件页面的 Action 方法

[AllowAnonymous]
public ViewResult NewAccountCheckYourEmail()

    return View();

我要做的是将电子邮件存储在用户会话中，因此如果用户单击重新发送电子邮件，我会重新发送电子邮件。

我想进行 ajax 调用，所以当用户单击重新发送链接时，它会回发到控制器，从用户会话中获取电子邮件，重新发送并重新显示相同的视图。

我不知道该怎么做

我尝试的是进行这个 AJAX 调用：

$("#ResendEmailLink").click(function () 
    $.ajax(
        url: "/Account/NewAccountCheckYouEmail",
        datatype: "text",
        type: "POST",
        success: function (data) 
            $('#testarea').html("All OK");
        ,
        error: function () 
            $("#testarea").html("ERROR");
        
    );
);

并且我希望它达到这个动作方法：

[HttpPost]
[AllowAnonymous]
public async Task<ActionResult> NewAccountCheckYourEmail()

    Email email = Session[SessionKeys.NewAccountConfirmationEmail.ToString()] as Email;
    await _emailService.SendEmailAsync(email);
    return View();

但是由于我已经有另一个同名的 Action 方法，所以我无法添加它...我想我正在尝试做的事情没有多大意义，关于实现此目的的合理方法有什么建议吗？

【问题讨论】：

ajax 的全部意义在于保持在 same 页面上。如果要重定向，请不要使用 ajax

再次感谢斯蒂芬，我想留在同一页面上...所以用户单击重新发送电子邮件链接，我重新发送电子邮件并显示同一页面。你认为 Ajax 调用不适合我想做的事情吗？

如果你想留在同一个页面，那么是的，ajax 是正确的方法，但在这种情况下你想做什么？例如，您可以返回 JsonResult，其中包含要在当前页面中更新的某种消息，但目前您的方法正在返回一个没有意义的视图

所以ajax调用有这个成功条件，成功：function (data) $('#testarea').html("All OK"); ，我想做的就是在同一页面上成功显示 All OK 消息

那么你的 POST 方法应该返回一个JsonResult（如果成功，比如return Json(true);，然后你可以使用if(data) $('#testarea').html("All OK") ，但你还需要使用dataType: 'json'

【参考方案1】：

正如@Stephen Muecke 指出要返回Json 数据，所以这个基本更改应该有效。

重新发送电子邮件脚本：

$("#ResendEmailLink").click(function () 
$.ajax(
    url: "/Account/ResendEmailToUser",
    datatype:'json',
    type: "POST",
    success: function (data) 

if(data)  $('#testarea').html(data.Message) ;

    ,
    error: function () 
        $("#testarea").html("ERROR");
    
);

);

重发邮件操作方法：

[HttpPost]
[AllowAnonymous]
public async Task<ActionResult> ResendEmailToUser()


Email email = Session[SessionKeys.NewAccountConfirmationEmail.ToString()] as Email;
await _emailService.SendEmailAsync(email);

var jsonData = new  Message = "Done!, We have Resend the Email" ;

return Json(jsonData);

【讨论】：

什么是#testarea？

@Kiquenet ，这就是OP提到的html元素的ID。请阅读问题中的代码。