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>

我可以在不刷新网址的情况下点击我的操作方法。我可以处理请求，没关系。但是，我如何得到回应并采取相应行动？我收集了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);
}

用ajax提交后替换表单

1 个答案: