如何从 ASP.NET CORE 中的弹出模式正确触发模型验证

Question

如何解决验证在模态弹出窗口中无法正常工作的问题？

这是我调用模态的代码：

<div id="showmodal" class="modal fade" tabindex="-1" role="dialog">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">

                                        @Html.Partial("CreateUnit")

                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                            <button id='open' data-toggle="modal" data-target="#showmodal">open modal</button>

这是我在控制器中的代码：

public IActionResult CreateUnit()
    {
        return PartialView();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> CreateUnit(UnitViewModel unit)
    {
        if (ModelState.IsValid)
        {
            var model = _mapper.Map<Unit>(unit);
            _context.Add(model);

            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return PartialView("CreateUnit", unit);
    }

这是我的部分代码：

@model intPOS.Models.Master.ViewModel.UnitViewModel

<div class="modal-body">
    <div class="row">
        <div class="col-md-4">
            <form asp-action="CreateUnit">
                /*input model here*/
            </form>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

这是示例输出：

Pop-up Sample

我故意触发验证后的输出：

After validation

Answer 1

这是一个演示： 单元视图模型：

 public class UnitViewModel 
    {
        [Required]
        public string UnitCode { get; set; }
        [Required]
        public string UnitName { get; set; }

        public string UnitDescription { get; set; }
        public bool Status { get; set; }
    }

控制器：

 public IActionResult Index1() 
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Index1(UnitViewModel unit)
        {
            
            return View();
        }

Index1.cshtml（添加js，点击创建按钮时，如果有效，会发布表单，如果无效，会显示错误信息）：

<div id="showmodal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            @Html.Partial("CreateUnit")

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<button id='open' data-toggle="modal" data-target="#showmodal">open modal</button>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

CreateUnit.cshtml：

<div class="modal-body">
    <div class="row">
        <div class="col-md-4">
            <form method="post">
                <div class="form-group">
                    <label asp-for="UnitCode" class="control-label"></label>
                    <input asp-for="UnitCode" class="form-control" name="UnitCode" />
                    <span asp-validation-for="UnitCode" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="UnitName" class="control-label"></label>
                    <input asp-for="UnitName" class="form-control" name="UnitName" />
                    <span asp-validation-for="UnitName" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="UnitDescription" class="control-label"></label>
                    <input asp-for="UnitDescription" class="form-control" name="UnitDescription" />
                    <span asp-validation-for="UnitDescription" class="text-danger"></span>
                </div>
                <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" asp-for="Status" /> Status
                    </label>                 
                </div>

        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-info" />
        </div>
        </form>
    </div>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

结果：