私は新しいユーザーの作成のためのAjax投稿を行うフォームを作成しようとしています。私の目標は、アクションの結果を示すポップアップを表示することです。現在のバージョンのアクションメソッドは、何かが間違っている場合はModelStateにエラーを追加し、成功した場合はリダイレクトします。 AdminController.cs内Ajaxを使用してこのポストアクションメソッドを呼び出す方法は?
対処方法:
[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);
}
});
});
jquery '$ .ajax()'のドキュメントを見ましたか? http://api.jquery。com/category/ajax/ –
@JonathanMはい私は持っていて、複数の試みはうまくいかなかった。 – ITWorker
最新の '$ .ajax()'を試してみてください。 –