如何使用Ajax调用这个post-action方法
How to call this post action method using Ajax?
我正在尝试创建一个表单,该表单为创建新用户执行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>
如上所述,id为"usercreatebutton"的按钮是我的开发按钮,我想将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的回应,我做到了。下面我将发布我的代码更新:
在视图中,我修改了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);
}
});
});
首先,将提交按钮放入表单中
@using (Html.BeginForm("Create", "Admin", new { returnUrl = Request.Url.AbsoluteUri }))
{
// Your existing form elements
<button type="submit" id="usercreatebutton">Create</button>
}
现在听表单submit
事件获取表单,对其进行序列化并发送。您可以使用jQuery serialize方法来执行此操作。
$.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响应中,并将其显示给用户。这是一篇解释如何读取模型错误的帖子。
相关文章:
- WCF json POST请求方法:GET和405(方法不允许)
- 使用jquery的$.POST()方法在PHP页面上未接收到数据
- AngularJS和Go POST请求方法不允许
- 从 MVC Action 方法调用 jquery 函数
- 使用 jQuery $.post() 方法获取另一个网页的一部分
- JavaScript 中的范围(为什么在 $.post() 方法数组的作用域是本地的?)
- 如何在不带窗体的情况下从$.post(..)方法传递guid或字符串
- 如何通过javascript获取post()方法参数
- 在MVC4中使用Ajax调用Action方法
- 如何在asp.net mvc中向Action方法发布简单ID(jquery-ajax)
- 如何从angular js调用MVC控制器Action方法
- AngularJS$http://.NET Web API-获取400(错误请求)或NULL POST操作方法参数
- 将Ext.NET隐藏字段的值作为参数传递给Action方法
- 如何使用jquery$.post()方法提交表单值
- 基于DropDownList的值和模型调用Action方法
- 如何通过POST PHP方法从BeatPicker接收RANGE数据
- 角美元http.Post then方法不起作用
- POST 405(方法不允许)当尝试发布AJAX请求时
- asp.net MVC应用从javascript调用action方法时的安全问题
- 如何使用Ajax调用这个post-action方法