當ModelState使用Razor視圖中的ajaxPOST有效時顯示確認引導模式

我有一個場景，我需要在服務器上驗證主模型后顯示確認模式 - 使用資料注釋，但我希望實際提交到資料庫以在確認模式而不是主剃須刀視圖中發生：

一切都按預期作業，除了我無法理解如何在模式中顯示確認部分視圖。我可以重定向到部分視圖，但我只需要在模式中使用它：

請參閱下面的偽代碼：

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 物件并在此基礎上呈現表單？

uj5u.com熱心網友回復：

1.如果要顯示確認模式，則不能RedirectToAction在后端使用，因為ajax無法處理來自后端的重定向操作。

2.客戶端不能訪問ModelState，只能在服務器端使用。

我看到你在無效時使用模型（ return View(UserModel);）回傳當前視圖。如果沒有 ajax，此代碼用于顯示您填寫的表單和錯誤訊息。實際上，通過在您的場景中使用 ajax，它將始終保持填寫的表單并顯示錯誤訊息。ModelState

如果您只想顯示帶有模型資料和錯誤訊息的視圖，我建議您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>
}

確認用戶.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();
}

結果：

標籤：jQuery asp.net-mvc asp.net 核心 模型视图控制器 asp.net-ajax

上一篇：如何在C#MVC中使用AzureAD實作注銷后

下一篇：帶有try/catch的foreach回圈中的延遲加載例外