我正在尝试创建一个表单,用于执行 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);
}
View :
@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");
});
另一个“创建”按钮用于常规表单提交。
创建模型:
public class CreateModel
{
[Required]
public string Name { get; set; }
[Required]
public string Email { get; set; }
[Required]
public string Password { get; set; }
}
<小时/>
根据 Shyju 的回复,我成功了。下面我将发布我的代码的更新:
在 View 中,我修改了 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" })
}
Controller 代码已修改为 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);
}
});
});
最佳答案
首先,将提交按钮放在表单中
@using (Html.BeginForm("Create", "Admin", new { returnUrl = Request.Url.AbsoluteUri }))
{
// Your existing form elements
<button type="submit" id="usercreatebutton">Create</button>
}
现在监听表单submit
事件获取表单,序列化它并发送它。您可以使用 jQuery 序列化方法来做到这一点。
$.post
是具有 POST
方法类型的 $.ajax
的简写。让我们使用它。
$(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是一篇解释如何读取模型错误的帖子。
关于javascript - 如何使用 Ajax 调用此后操作方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38571762/