Блог

Как я могу исправить, что проверка не работает должным образом в модальном всплывающем окне?

Вот мой код для вызова модального:

 <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");}
}
  

Вот пример вывода:

Образец всплывающего окна

Вывод после того, как я намеренно запускаю проверку:

После проверки

Вот демонстрация: UnitViewModel:

  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, и при нажатии кнопки Create, если она действительна, она отправит форму, если недействительна, отобразится сообщение об ошибке):

 <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");}
}
  

Результат:

Может быть, это кому-то поможет. Я удалил @section script {} и использую <script>< /script>