用ajax提交后替换表单

Question

我设法让我的ajax 请求启动并运行，现在我想根据控制器操作返回的响应关闭表单。反正聊得够多了，我有以下几行：

控制器动作：

public IActionResult Create(MyviewModel model)
{
   if(!ModelState.IsValid)
   {
     return BadRequest(ModelState);
   }

   var r = _context.Save(model);

    if(r.IsError) 
       prepare error message and send them back

   return OK(r.Data);
}

剃须刀：

<form asp-controller="MyController" asp-action="Create" data-ajax" data-ajax-method="POST">
  <div class="form-group">
    <label asp-for="Email"></label>
    <input asp-for="Email" class="form-control">
  </div>
  <div class="form-group">
    <label asp-for="Comment"></label>
    <input asp-for="Comment" class="form-control">
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

我可以在不刷新 URL 的情况下点击我的操作方法。我可以处理请求，这很好。但是我如何才能得到响应并采取相应的行动呢？我收集到 data-ajax-success 和 -failure 可能是我的朋友，但我不知道怎么做。

我基本上想将成功的表单替换为：

<div class="alert alert-success" role="alert">Comment successfully submitted</div>.

如果出现错误，请读取从服务器返回的错误，并提醒用户。在这种情况下，请保留表单以防用户重试。

我是这个 javascript 世界的新手，谁能提供一个最小的工作解决方案或指出我正确的方向？

Answer 1

如果您愿意，可以远离 JavaScript 代码。

如示例所示，将data-ajax-mode 和data-ajax-update 属性添加到表单标签中。

在您设置正确的消息后，从您的控制器返回一个 PartialView。

<div id="myDiv">
    @if (ViewBag.SuccessMessage != null)
    {
        <div class="alert alert-success" role="alert">@Html.Raw(ViewBag.SuccessMessage)</div>
    }
    else
    {
        <form asp-controller="MyController" asp-action="Create" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#myDiv">
            <div class="form-group">
                <label asp-for="Email"></label>
                <input asp-for="Email" class="form-control">
            </div>
            <div class="form-group">
                <label asp-for="Comment"></label>
                <input asp-for="Comment" class="form-control">
            </div>
            @if (ViewBag.ErrorMessage != null)
            {
                <div class="alert alert-danger" role="alert">@Html.Raw(ViewBag.ErrorMessage)</div>
            }
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    }
</div>

在您的表单发布操作中，设置正确的消息并返回与 PartialView 相同的视图。

[HttpGet]
public IActionResult Create()
{
    return View();
}

[HttpPost]
public IActionResult Create(MyviewModel model)
{
   if(!ModelState.IsValid)
   {
       ViewBag.ErrorMessage = "Input not valid!";
       return PartialView(model);
   }

   var r = _context.Save(model);

    if(r.IsError) 
    {
       ViewBag.ErrorMessage = "Error when saving...";
       return PartialView(model);
    }

    ViewBag.SuccessMessage = "Created successfully!";
    return PartialView(model);
}