模态部分视图验证不起作用
Posted
技术标签:
【中文标题】模态部分视图验证不起作用【英文标题】：Modal PartialView validation doesn't work 【发布时间】：2020-10-13 13:40:37 【问题描述】：我有一个非常奇怪的问题，当我单击“编辑”按钮打开模态局部视图并从表中加载数据时，我的主表单带有数据表和编辑详细信息按钮，但是当我单击以保存数据时，验证根本不起作用。当我单击新建按钮时，一切正常，我不知道出了什么问题。我加了
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
在我的主视图中和
@section scripts
@Scripts.Render("~/bundles/jqueryval")
部分和结果是一样的
主视图
$(document).ready(function ()
dataTable = $('#userTable').DataTable(
"responsive": "true",
"ajax":
"type" : "GET" ,
"url" : "@Url.Action("GetData","Customers")" ,
"datatype" : "json"
,
"columns":
[
"data": "FirstName",
"data": "Id", "render": function (data)
return '<a class="btn btn-danger" onclick="Details(\'' + data + '\')" style="margin-right: 12px"><span class="glyphicon glyphicon-th-list" style=" margin-right: 2px;"></span>Details</a><a data-toggle="modal" data-target="#myModal" class="btn btn-success" onclick="Edit(\'' + data + '\')" style="margin-right: 12px"><span class="glyphicon glyphicon-pencil" style=" margin-right: 2px;"></span>Edit</a>';
],
"language":
"processing": "<img src='https://gph.is/2gESFHh' />",
"emptytable": "Няма данни за изжедане. Може да натиснете бутона <b> Нов </b>"
,
);
);
function Edit(Id)
//if (confirm("Наистина ли искате да промените този запис?"))
$.ajax(
type : 'Get' ,
url: '@Url.Action("AddOrEditPartial","Customers")/' + Id,
data: Id: Id
).done(function(result)
$('#modbody').html(result);
);
//
</script>
<h2>Users</h2>
<div class="col-md-12" style="background-color: white; padding-top: 20px; padding-bottom: 20px; border-radius: 3px;">
<a data-toggle="modal" data-target="#myModal" class="btn btn-success" style="margin-bottom: 12px; margin-top:12px "><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>
<table id="userTable" class="display" style="width: 100%;">
<thead>
<tr>
<th>
Name:
</th>
<th></th>
</tr>
</thead>
</table>
<div class="modal fade" id="myModal" role="dialog" style="margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Users</h4>
</div>
<div class="modal-body" id="modbody">
@Html.Partial("AddOrEditPartial")
</div>
</div>
</div>
</div>
</div>
<table class="table" id="userTable">
</table>
局部视图
@model Sfuk1.Models.Customer
<div class="panel-group">
<div class="panel-default">
<div class="panel panel-success">
<div class="panel-body" id="panbody">
<div class="col-sm-10 col-sm-offset-1">
@using (Html.BeginForm("AddOrEditPartial", "Customers", FormMethod.Post, new enctype = "multipart/for-data", id = "formsubmit" ))
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new @class = "text-danger" )
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.FirstName, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-success" id="btnSubmit" onclick="Validation()" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section scripts
@Scripts.Render("~/bundles/jqueryval")
<script>
var Validation = function ()
debugger
var data = $("formsubmit").serialize;
if (!$("formsubmit").valid())
console.log(false);
return false;
</script>
【问题讨论】：
【参考方案1】：部分视图中的@section scripts在主视图中不起作用，因为页面已经呈现，您需要在主视图中使用@section脚本。
另外，您需要在主视图中而不是在局部视图“<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>”中引用不显眼的验证 js 文件
考虑将所有 JS 代码放在主视图中。
还有一点，不要使用 HTML.BeginForm，尝试使用 Ajax.BeginForm
示例 Razor/HTML 代码（主视图）
@
ViewBag.Title = "Create";
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Create Blog
</button>
<!-- Modal -->
@using (Ajax.BeginForm("SaveBlog", "Home", new AjaxOptions() HttpMethod = "POST",UpdateTargetId = "frmEmp" ))
<div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create New Blog</h4>
</div>
<div class="modal-body" id="frmEmp">
@Html.Partial("_Blog")
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
</div>
</div>
</div>
</div>
局部视图；
@model BootstrapModalPopUp.Models.Blog
@Html.AntiForgeryToken()
@if (ViewBag.Message != null)
<span class="text-success">@ViewBag.Message</span>
<span class="alert-danger">
@Html.ValidationSummary()
</span>
<div class="form-group">
@Html.LabelFor(model => model.Name)
@Html.TextBoxFor(model => model.Name, new @class = "form-control" )
</div>
<div class="form-group">
@Html.LabelFor(model => model.CategoryName)
@Html.TextBoxFor(model => model.CategoryName, new @class = "form-control" )
</div>
主视图中所需的 JS 文件
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
来源：https://qawithexperts.com/article/asp.net/validate-pop-up-modal-using-ajaxbeginform-in-c-mvc/52 您还可以查看完整的工作示例或从上面的链接下载。
【讨论】：
@user12805845 好的，如果有帮助，请点赞回答，谢谢【参考方案2】：我安装了 unobtrusive-ajax 并将其添加到主脚本中
【讨论】：
以上是关于模态部分视图验证不起作用的主要内容，如果未能解决你的问题，请参考以下文章
MVC LoginPage 上的部分视图链接不起作用（用户尚未登录/授权）
react-bootstrap：模态的 dialogClassName 道具不起作用