如何使用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是解釋如何讀取模型錯誤的文章。