Edit bootstrap modal 可以工作，或者 Jquery .validate 函数可以工作
Posted
技术标签:
【中文标题】Edit bootstrap modal 可以工作，或者 Jquery .validate 函数可以工作【英文标题】：Either the Edit bootstrap modal works, or the Jquery .validate function works 【发布时间】：2019-01-12 04:06:36 【问题描述】：我的主视图中有一个编辑弹出模式
加载.cshtml
<div class="modal fade" id="EditVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<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" style="font-weight: bold; font-size: 25px">
Edit Volunteer Details
</h4>
</div>
<div class="modal-body">
<form id="EditForm"> @*ID of my form*@
</form>
</div>
</div>
</div>
</div>
这是我在 Load.cshtml
中的 Jquery$("#EditForm").validate(
errorClass: 'errors',
rules:
PhoneNumber:
required: true,
,
EmailAddress:
required: true,
,
DonationForWhom:
required: true,
,
DonationValue:
required: true,
,
messages:
PhoneNumber:
required: "Please Enter Phone Number",
color: "#FF0000"
,
EmailAddress:
required: "Please Enter Email Id",
,
DonationForWhom:
required: "Please enter whom the donation is for",
,
DonationValue:
required: "Please Enter Donation Value",
,
);
这是我在上面的编辑模式中加载视图的功能
function EditVolunteer(vId)
$.ajax(
url: '@Url.Action("EditVolunteerById","ViewEditVolunteer")',
data: id: vId ,
type: "GET"
).done(function(data)
$("#EditVolunteerModal .modal-body #EditForm").html(data);
);
我的问题：
当我进行编辑时，如果我在我的完成函数中使用它，它不会在数据库中更新
$("#EditVolunteerModal .modal-body #EditForm").html(data);
但是，如果我使用以下内容，我可以对我的数据库进行更新，但不会触发验证。
$("#EditVolunteerModal .modal-body").html(data);
我认为不需要我的局部视图，但如果需要，请告诉我。
我的尝试
-
尝试按照答案中的建议替换 div 标记以在我的模态中形成
尝试在我的模态中添加
@Html.PartialView("Name")，但没有成功
尝试了其他一些方法。
如何让这两个东西都工作？我的编辑和验证一起？请指导我。谢谢。
为更清晰而编辑
这是我的主视图 (Load.cshtml)
@model IEnumerable<VMS.Models.VolunteerInfo>
@
ViewBag.Title = "Load Volunteer";
<head>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<h2 style="margin-bottom: 1em">
Registered Volunteers
<button type="button" class="btn btn-group-sm btn-success pull-right" id="Excel_Btn">Export to Excel</button>
</h2>
<div id="VolunteerGrid">
<table class="table" id="tblVolunteers">
<thead>
<tr>
<th>
Name
</th>
@*<th>
Email
</th>*@
<th>
Phone Number
</th>
<th>
Donation For Whom
</th>
<th>
Date Donation To Be Used
</th>
<th>
Donation Kind
</th>
<th>
Donation Value
</th>
<th>
Date Volunteer Added
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
@foreach (var volunteer in Model)
<tr>
<td>
@Html.DisplayFor(modelItem => volunteer.Name)
</td>
@*<td>
@Html.DisplayFor(modelItem => volunteer.EmailAddress)
</td>*@
<td>
@Html.DisplayFor(modelItem => volunteer.PhoneNumber)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.DonationForWhom)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.DateDonationToBeUsed)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.DonationKind)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.DonationValue)
</td>
<td>
@Html.DisplayFor(modelItem => volunteer.DateWhenVolunteerWasAdded)
</td>
<td>
<a href="javascript:void(0)" class="Edit_btn" onclick="EditVolunteer(@volunteer.VolunteerId)">Edit</a> | <a href="javascript:void(0)" class="Delete_btn" id="Delete_btn" onclick="DeleteVolunteer(@volunteer.VolunteerId)">Delete</a>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="EditVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<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" style="font-weight: bold; font-size: 25px">
Edit Volunteer Details
</h4>
</div>
<div class="modal-body">
<form id="EditForm">@*ID of my form*@
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DeleteVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<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" style="font-weight: bold;font-size: 25px">
Delete Volunteer
</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
$('#Excel_Btn').on('click', function()
$.ajax(
url: '@Url.Action("ExportToExcel","ViewEditVolunteer")'
);
);
);
$("#EditForm").validate(
errorClass: 'errors',
rules:
PhoneNumber:
required: true,
,
EmailAddress:
required: true,
,
DonationForWhom:
required: true,
,
DonationValue:
required: true,
,
messages:
PhoneNumber:
required: "Please Enter Phone Number",
color: "#FF0000"
,
EmailAddress:
required: "Please Enter Email Id",
,
DonationForWhom:
required: "Please enter whom the donation is for",
,
DonationValue:
required: "Please Enter Donation Value",
,
);
$('#tblVolunteers').dataTable();
$(".Edit_btn").on('click', function()
$("#EditVolunteerModal").modal("show");
);
$(".Delete_btn").on('click', function()
$("#DeleteVolunteerModal").modal("show");
);
function EditVolunteer(vId)
$.ajax(
url: '@Url.Action("EditVolunteerById","ViewEditVolunteer")',
data: id: vId ,
type: "GET"
).done(function(data)
$("#EditVolunteerModal .modal-body").html(data);
);
function DeleteVolunteer(vId)
$.ajax(
url: '@Url.Action("DeleteVolunteerById","ViewEditVolunteer")',
data: id: vId ,
type: "GET"
).done(function(data)
$("#DeleteVolunteerModal .modal-body").html(data);
);
</script>
这是我的部分观点
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit Volunteer</title>
</head>
<body>
@using (Html.BeginForm())
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new @class = "text-danger" )
@Html.HiddenFor( model => model.VolunteerId)
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new htmlAttributes = new @class = "form-control", disabled = "disabled" )
@Html.ValidationMessageFor(model => model.Name, "", new @class = "text-danger" )
@Html.HiddenFor(model => model.Name)
</div>
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.BirthdayDay_AnniversaryDate, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.BirthdayDay_AnniversaryDate, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.BirthdayDay_AnniversaryDate, "", new @class = "text-danger" )
</div>
</div>*@
<div class="form-group">
@Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.PhoneNumber, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.PhoneNumber, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Address, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.TextAreaFor(model => model.Address, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.Address, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EmailAddress, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.EmailAddress, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.EmailAddress, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
@Html.Label("Who the donatin is for?*", htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.DonationForWhom, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.DonationForWhom, "", new @class = "text-danger" )
</div>
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.OccasionsID, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.OccasionsID, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.OccasionsID, "", new @class = "text-danger" )
</div>
</div>*@
<div class="form-group">
@Html.LabelFor(model => model.DonationKind, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.RadioButtonFor(v => v.DonationKind, "Money", new id = "RadioMoney", name = "RadioMoney" ) Money
@Html.RadioButtonFor(v => v.DonationKind, "Kind Donation", new id = "RadioKindDonation", name = "RadioKindDonation" ) Kind Donation
@Html.ValidationMessageFor(model => model.DonationKind, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
@Html.Label("Donation Value*", htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.DonationValue, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.DonationValue, "", new @class = "text-danger" )
</div>
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.DateWhenVolunteerWasAdded, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.DateWhenVolunteerWasAdded, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.DateWhenVolunteerWasAdded, "", new @class = "text-danger" )
</div>
</div>*@
<div class="form-group">
@Html.LabelFor(model => model.DateDonationToBeUsed, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.DateDonationToBeUsed, new htmlAttributes = new @class = "form-control", placeholder = "mm/dd/yyyy" )
@Html.ValidationMessageFor(model => model.DateDonationToBeUsed, "", 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" />
</div>
</div>
</div>
这是它在 HTML 中的呈现方式
<form action="/ViewEditVolunteer/EditVolunteerById?id=1063" method="post"><input name="__RequestVerificationToken" type="hidden" value="UQY-eF0sZ-3s1wFWFtmdeoHrY-IAcH9feGh0u9_EJiDHp0ilifxJbemVY7WEx3qtYHN0CL7z3IEqMS3acgKW-xnMM4iVGTECC4xbavo5Uxc1"> <div class="form-horizontal">
<input data-val="true" data-val-number="The field VolunteerId must be a number." data-val-required="The VolunteerId field is required." id="VolunteerId" name="VolunteerId" type="hidden" value="1063">
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-required="Name is required" disabled="disabled" id="Name" name="Name" type="text" value="Nikhil">
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
<input id="Name" name="Name" type="hidden" value="Nikhil">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="PhoneNumber">Phone Number*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Phone Number* must be a number." data-val-required="Phone number is required" id="PhoneNumber" name="PhoneNumber" type="number" value="0">
<span class="field-validation-valid text-danger" data-valmsg-for="PhoneNumber" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Address">Address</label>
<div class="col-md-10">
<textarea cols="20" htmlattributes=" class = form-control " id="Address" name="Address" rows="2">sndkas</textarea>
<span class="field-validation-valid text-danger" data-valmsg-for="Address" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="EmailAddress">Email*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-regex="Email is not valid" data-val-regex-pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]2,4|[0-9]1,3)(\]?)$" data-val-required="Email is required" id="EmailAddress" name="EmailAddress" type="text" value="naina@gmail.com">
<span class="field-validation-valid text-danger" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Who_the_donatin_is_for__">Who the donatin is for?*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="DonationForWhom" name="DonationForWhom" type="text" value="Nikhil">
<span class="field-validation-valid text-danger" data-valmsg-for="DonationForWhom" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="DonationKind">What kind of donation?*</label>
<div class="col-md-10">
<input data-val="true" data-val-required="Please select one" id="RadioMoney" name="DonationKind" type="radio" value="Money"> Money
<input checked="checked" id="RadioKindDonation" name="DonationKind" type="radio" value="Kind Donation"> Kind Donation
<span class="field-validation-valid text-danger" data-valmsg-for="DonationKind" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Donation_Value_">Donation Value*</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-required="Please Enter Value" id="DonationValue" name="DonationValue" type="text" value="50Kg Daal">
<span class="field-validation-valid text-danger" data-valmsg-for="DonationValue" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="DateDonationToBeUsed">What day the donation is to be used?</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="DateDonationToBeUsed" name="DateDonationToBeUsed" placeholder="mm/dd/yyyy" type="text" value="07/08/2018">
<span class="field-validation-valid text-danger" data-valmsg-for="DateDonationToBeUsed" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-success">
</div>
</div>
</div>
【问题讨论】：
您是否在另一个 感谢您的回复。在我使用的部分视图中，@using (Html.BeginForm())
好的，但您似乎在主页上也有一个<form> 标签。不能将
中
不，我真的不知道。你想看我的主视图和部分视图吗？
那时我很困惑。也不是 dotNet 开发人员，所以看到 html oultine 对我来说更简单。我看到你在做$("#EditVolunteerModal .modal-body #EditForm").html()，这是在其中插入了 html 的表单元素......并假设 Html.BeginForm() 也创建了一个表单元素，如果两者都是真的，那么最终会在表单中嵌套表单
【参考方案1】：
-
删除
<form id="EditForm"></form>
在此处输入 ID @using (Html.BeginForm("EditActionMethodName","ControllerName",FormMethod.Post,new @id = "EditForm")
剪切表单验证代码块表单主视图并复制到编辑志愿者局部视图
.
$("#EditForm").validate(
errorClass: 'errors',
rules:
PhoneNumber:
required: true,
,
EmailAddress:
required: true,
,
DonationForWhom:
required: true,
,
DonationValue:
required: true,
,
messages:
PhoneNumber:
required: "Please Enter Phone Number",
color: "#FF0000"
,
EmailAddress:
required: "Please Enter Email Id",
,
DonationForWhom:
required: "Please enter whom the donation is for",
,
DonationValue:
required: "Please Enter Donation Value",
,
);
应该可以。
【讨论】：
以上是关于Edit bootstrap modal 可以工作，或者 Jquery .validate 函数可以工作的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 .modal('hide') 不工作
在动态添加一些内容后，Bootstrap 5 Modal 在滚动时无法正常工作 - 这导致 Modal 的高度超过了以前
Draggable JS Bootstrap modal - 性能问题