如何使用 Ajax 调用此发布操作方法？

Question

我正在尝试创建一个执行 Ajax 发布以创建新用户的表单。我的目标是显示一个指示操作结果的弹出窗口。如果出现问题，当前版本的 action 方法会向 ModelState 添加错误，如果成功则重定向。

AdminController.cs 中的操作方法：

[HttpPost]
public async Task<ActionResult> Create(CreateModel model)
{
    if (ModelState.IsValid)
    {
        AppUser user = new AppUser { UserName = model.Name, Email = model.Email };
        IdentityResult result = await UserManager.CreateAsync(user,
            model.Password);
        if (result.Succeeded)
        {
            return RedirectToAction("Index");
        }
        else
        {
            AddErrorsFromResult(result);
        }
    }
   return View(model);
}

观点：

@model IdentityDevelopment.Models.CreateModel
@{ ViewBag.Title = "Create User";}

<h2>Create User</h2>
@Html.ValidationSummary(false)
@using (Html.BeginForm("Create", "Admin", new { returnUrl = Request.Url.AbsoluteUri }))
{
    <div class="form-group">
        <label>Name</label>
        @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Email</label>
        @Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Password</label>
        @Html.PasswordFor(x => x.Password, new { @class = "form-control" })
    </div>
    <button type="submit" onclick="return showDiv();" class="btn btn-primary">Create</button>
    @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-default" })


}


<button id="usercreatebutton">Create</button>

如上所见，id为“usercreatebutton”的按钮是我的开发按钮，我想把ajax函数放进去：

$("#usercreatebutton")
       .button()
       .click(function (event) {
           alert("ajax post call");
       });

另一个创建按钮用于常规表单提交。

CreateModel：

 public class CreateModel
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public string Email { get; set; }
        [Required]
        public string Password { get; set; }
    }

---

根据 Shyju 的回复，我得到了这个工作。下面我将发布对我的代码的更新：

在视图中，我修改了 BeginForm 声明以赋予表单一个 id 并将提交按钮移到其中：

@model IdentityDevelopment.Models.CreateModel
@{ ViewBag.Title = "Create User";}

<h2>Create User</h2>
@Html.ValidationSummary(false)
@using (Html.BeginForm("Create", "Admin", new { returnUrl = Request.Url.AbsoluteUri }, FormMethod.Post, new { @id = "signupform" }))
{
    <div class="form-group">
        <label>Name</label>
        @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Email</label>
        @Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Password</label>
        @Html.PasswordFor(x => x.Password, new { @class = "form-control" })
    </div>
   <!-- <button type="submit" onclick="return showDiv();" class="btn btn-primary">Create</button> -->

    <button type="submit" id="usercreatebutton">Create</button>
    @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-default" })


}

控制器代码被修改为来自 Shyju 的响应。

最后，javascript代码是：

 $("form#signupform").submit(function (event) {
         event.preventDefault();
         var form = $(this);
         $.post(form.attr("action"), form.serialize(), function (res) {
             if (res.status === "success") {
                 alert(res.message);
             }
             else {
                 alert(res.message);
             }
         });

     });

Answer 1

首先，将提交按钮放在表单中

@using (Html.BeginForm("Create", "Admin", new { returnUrl = Request.Url.AbsoluteUri }))
{   
  // Your existing form elements
  <button type="submit" id="usercreatebutton">Create</button>
}

现在收听表单submit 事件获取表单，序列化并发送。您可以使用 jQuery 序列化方法来做到这一点。

$.post 是 $.ajax 和 POST 方法类型的简写。让我们使用它。

$(function(){

  $("form#giveYourFormIdHere" ).submit(function(e) {

     e.preventDefault();
     var form=$(this);
     $.post(form.attr("action"),form.serialize(),function(res){
        //do something with the res
     });

  });

});

现在，在您的 HttpPost 操作中，由于我们正在进行 ajax 调用，我们应该返回一个 JSON 响应。

[HttpPost]
public async Task<ActionResult> Create(CreateModel model)
{
    if (ModelState.IsValid)
    {
        AppUser user = new AppUser { UserName = model.Name, Email = model.Email };
        IdentityResult result = await UserManager.CreateAsync(user,
            model.Password);
        if (result.Succeeded)
        {
            return Json(new { status="success"});
        }
        else
        {                
            return Json(new { status="error",message="Some error"});
        }
    }
    return Json(new { status="error", message="Model validation failed"});
}

更新您的 $.post 方法的回调以读取此 JSON 数据、检查属性值并执行一些操作。

$.post(form.attr("action"),form.serialize(),function(res){
        if(res.status==="success")
        {
          window.location.href="/Admin/Index";
        }
        else
        {
          alert(res.message);
        }
});

如果你想支持ajax表单提交和普通表单提交，你可以使用Request.IsAjaxRequest()方法有条件地返回不同的响应。此外，如果您想返回模型验证错误，您可以从模型状态中读取它并将所需的信息（错误消息？）添加到 JSON 响应并将其显示给用户。 Here 是一篇解释如何读取模型错误的帖子。