如何解决如何从ASP.NET CORE中的弹出模式正确触发模型验证
我该如何解决验证在模式弹出窗口中无法正常工作的问题?
<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,然后单击“创建”按钮,如果有效,它将发布表格,如果无效,则显示错误消息):
<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");}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。