Javascript 如何使用Ajax调用这个post-action方法？

我正在尝试创建一个表单，该表单为创建一个新用户提供一个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);
}

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

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，并将submit按钮移到了表单中：

@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" })


}

---

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

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

现在，在您的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"});
}

---

如果您想支持ajax表单提交和普通表单提交，可以使用

Request.IsAjaxRequest（）

方法有条件地返回不同的响应。另外，如果您想返回模型验证错误，您可以从模型状态读取它，并将所需信息（错误消息？）添加到JSON响应中，并将其显示给用户。是一篇解释如何读取模型错误的帖子。

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

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

现在，在您的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"});
}

---

如果您想支持ajax表单提交和普通表单提交，可以使用

Request.IsAjaxRequest（）

方法有条件地返回不同的响应。另外，如果您想返回模型验证错误，您可以从模型状态读取它，并将所需信息（错误消息？）添加到JSON响应中，并将其显示给用户。是一篇解释如何读取模型错误的文章。

您看过jquery

$.ajax（）的文档了吗@JonathanM是的，我有多次尝试，但都没有成功。请向我们展示您最近使用
$.ajax（）
进行的尝试，我相信我们可以帮助您使其正常工作。@JonathanM我已经用有效的答案更新了我的回答。您看过jquery
$.ajax（）
的文档了吗@JonathanM是的，我有多次尝试，但都没有成功。请使用
$.ajax（）
向我们展示您最近的尝试，我相信我们可以帮助您使其工作。@JonathanM我已用工作答案更新了我的回答。非常有用的答案，谢谢。我做的一个小改动是修改
e.preventDefault（）到
事件.preventDefault（）以显示警报。否则它只是重定向到json result.Yea。当我更新要提交的点击事件时，我错过了这一点。将更新答案。非常有用的答案，谢谢。我做的一个小改动是修改
e.preventDefault（）到
事件.preventDefault（）以显示警报。否则它只是重定向到json result.Yea。当我更新要提交的点击事件时，我错过了这一点。将更新答案。
$(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]
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(form.attr("action"),form.serialize(),function(res){
        if(res.status==="success")
        {
          window.location.href="/Admin/Index";
        }
        else
        {
          alert(res.message);
        }
});