使用来自 Razor View 的 ajax POST 在 ModelState 有效时显示确认 bootstrap 模态

Question

我有一个场景，我需要在服务器上验证主模型后显示一个确认模式 - 使用数据注释，但我想实际提交到数据库以在确认模式而不是主要剃须刀视图：

一切都按预期工作，除了我无法全神贯注地了解如何在模态中显示确认部分视图。我可以重定向到部分视图，但我只需要在模式中使用它：

参见下面的伪代码：

C# - actions

[HttpGet]
public IActionResult ConfirmUser()
{
    //Get TempData model here:
    return PartialView(model);
}


[HttpPost]
public IActionResult ConfirmUser(ConfirmUser usermodel)
{
   //UserService.ConfirmUser(usermodel)
}

[HttpPost]
public IActionResult AddNewUser(UserModel)
{
    if (ModelState.IsValid)
    {
        //Some TempData logic here:

        return RedirectToAction("ConfirmUser");

    }
    return View(UserModel);
}

Js -in Razor View

      $("#add-new-User-form").submit(function (e) {

       e.preventDefault();
        var $form = $(this);
        $.post($form.attr("action"),
 $form.serialize())
.done(function(dt, status, req)
        {

           if ($form.valid()) {

                $('#add-job-container').html(dt); //container
                $('#add-job-modal').modal('show'); //modal

            } else
            {
                //???

            }
         

        })

     });

$form.valid() 有效，但只是客户端。我也尝试在视图上使用 ViewData.ModelState.IsValid 无济于事。我假设我需要从操作中返回 Json 对象并在此基础上呈现表单 ?

Answer 1

1.If你想显示确认模式，你不能在后端使用RedirectToAction，因为ajax无法处理来自后端的重定向操作。

2.您无法在客户端访问ModelState，它只能在服务器端访问。

当 ModelState 无效时，我看到你 return 使用模型 (return View(UserModel);) 的当前视图。 如果没有 ajax，此代码用于显示您填写的表格和错误消息。实际上，通过在您的场景中使用 ajax ，它将始终保持填写的表格并显示错误消息。

如果你只想显示带有模型数据和错误消息的视图，我建议你在后端return BadRequest。然后进入ajax.error函数，不用判断$form.valid().

您可以遵循完整的工作演示：

型号：

public class UserModel
{
    [Required]
    public string Name { get; set; }
    [Required]
    public string Email { get; set; }
}

查看：

AddNewUser.cshtml

@model UserModel
<form asp-action="AddNewUser" id="add-new-User-form">
    <div>
        <label>Name</label>
        <input asp-for="Name" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div>
         <label>Email</label>
         <input asp-for="Email" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <input type="submit"  value="ADD" />
</form>


<div class="modal fade" id="add-job-modal" tabindex="-1"  aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        @*<button type="button" class="close" data-dismiss="modal" aria-label="Close">  bootstrap version 4.x*@
        <button type="button" class="close" data-bs-dismiss="modal"="modal" aria-label="Close"> @*bootstrap version 5.x*@

          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="add-job-container">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@section Scripts
{ 
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script>
        $("#add-new-User-form").submit(function (e) {
            e.preventDefault();
            var $form = $(this);
            $.post($form.attr("action"), $form.serialize())
                .done(function(dt, status, req)
                {
                    $('#add-job-container').html(dt); //container
                    $('#add-job-modal').modal('show'); //modal       
                })
                .fail(function(res){
                    //ModelState is invalid 
                    //do your stuff..
                    alert(res.statusText);
                })
         });
     </script>
}

ConfirmUser.cshtml

@model UserModel
<h1>Confirm User</h1>
@Model.Name
@Model.Email

控制器：

public IActionResult AddNewUser()
{
    return View();
}
[HttpPost]
public IActionResult AddNewUser(UserModel model)
{
    if (ModelState.IsValid)
    {
        //Some TempData logic here:
        return PartialView("ConfirmUser",model);
    }
    return BadRequest();
}

结果：

使用来自 Razor View 的 ajax POST 在 ModelState 有效时显示确认 bootstrap 模态

Display Confirmation bootstrap Modal when ModelState is valid using an ajax POST from Razor View

model-view-controller

asp.net-mvc

jquery

asp.net-ajax

asp.net-core