我的主视图中有一个“编辑弹出窗口”模式
Load.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);
我认为不需要“部分视图”，但如果需要，请告诉我。
我的尝试
@Html.PartialView("Name")，但没有成功我如何使两者同时起作用？我一起编辑和验证？请指导我。谢谢。
编辑后更加清晰
这是我的MainView（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>
答案 0 :(得分：0)
<form id="EditForm"></form> @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",
},
}
});
应该工作。