javascript - 如何使用 Ajax 调用此后操作方法？

Question

我正在尝试创建一个表单，用于执行 Ajax 发布来创建新用户。我的目标是显示一个弹出窗口，指示操作的结果。当前版本的操作方法会在出现问题时向 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);
}

View :

@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>

如上所示，带有“usercreatebutton”id 的按钮是我的开发按钮，我想将 ajax 函数放入:

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

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

创建模型:

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

<小时/>

根据 Shyju 的回复，我成功了。下面我将发布我的代码的更新:

在 View 中，我修改了 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" })


}

Controller 代码已修改为 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 是具有 POST 方法类型的 $.ajax 的简写。让我们使用它。

$(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是一篇解释如何读取模型错误的帖子。