如何使用Ajax调用这个post-action方法

How to call this post action method using Ajax?

本文关键字：post-action 方法 调用 何使用 Ajax      更新时间：2023-09-26

我正在尝试创建一个表单，该表单为创建新用户执行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响应中，并将其显示给用户。这是一篇解释如何读取模型错误的帖子。

相关文章：