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

Question

我正在尝试创建一个表单，为创建新用户创建一个Ajax帖子。我的目标是显示一个弹出窗口，指出操作的结果。当前版本的动作方法会在模型状态出错时向模型状态添加错误，如果成功则重定向。 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> 

从上面可以看出，与 “usercreatebutton” 按钮的id是我发展的按钮，我希望把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是解释如何读取模型错误的文章。