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); 
} 

ビュー：

上で見たよう

@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：Shyjuの応答に基づいて

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

---

、私はこの作業を得ました。私は私のコードの更新を掲載します下：

ビューでは、私は、フォームにIDを与えることBeginForm宣言を修正し、その中に送信ボタンを移動：

@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

まず、あなたの送信ボタンを今すぐそれをシリアル化、フォームを取得し、フォームsubmitイベントに耳を傾けるフォーム

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

の内側に入れて、それを送る。これを行うには、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"}); 
} 

、このJSONデータを読み込むプロパティ値を検査し、何かをするためにあなたの$.postメソッドのコールバックを更新します。あなたはAJAXフォーム送信をサポートしたいと通常のフォームが提出した場合

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

、あなたは条件付きで異なる応答を返すようにRequest.IsAjaxRequest()の方法を使用することができます。また、モデルの検証エラーを返す場合は、モデル状態から読み込み、必要な情報（エラーメッセージ？）をJSONレスポンスに追加してユーザーに表示することができます。 Hereは、モデルのエラーを読み取る方法を説明する記事です。