我已经开发了一个个人项目已经有几个星期了,在过去的一周中,发生了一些变化,并且由于某些原因HTML Hidden helper函数停止提交,我找不到原因。
这是视图。
@model GolfTracker.ViewModels.NewRoundViewModel
@{
ViewBag.Title = "NewRound";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>New Round</h2>
@using (Html.BeginForm("Finish", "Rounds"))
{
<div class="form-group">
<p>Select course:</p>
@Html.DropDownListFor(m => m.Round.Course, new SelectList(Model.Courses), "Select course", new { @class = "form-control", @id = "courseDropdown" })
</div>
<table class="table-dark" id="scorecard" style="text-align: center; border: 2px solid #00bc8c; table-layout: fixed">
<thead class="table-secondary">
<th style="vertical-align: middle; padding: 0px; border: 0px">
#
</th>
@for (int i = 1; i < 19; i++)
{
<th style="padding-left: 0px; padding-right: 0px; vertical-align: middle; padding: 0px; border: 0px" width="4.5%">
<div>
@i
</div>
</th>
}
<th style="padding: 0px; border: 0px">
Total
</th>
</thead>
<tr class="table-secondary">
<td style="vertical-align: middle">
Par
</td>
@for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px; vertical-align: middle">
<div id="hole-@i-par">
</div>
</td>
}
<td>
<div id="par-sum">
</div>
</td>
</tr>
<tr class="table-secondary">
<td style="vertical-align: middle">
Yardage
</td>
@for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px;">
<div id="hole-@i-yardage">
</div>
</td>
}
<td id="yard-sum"></td>
</tr>
<tr id="scores-array" class="table-secondary">
<td style="vertical-align: middle">
Score
</td>
@for (int i = 1; i < 19; i++)
{
Model.Round.Scores.Add(new GolfTracker.Models.HoleScore()
{
Score = 0
});
<td style="padding-left: 0px; padding-right: 0px;" align="center">
@Html.TextBoxFor(m => m.Round.Scores[i - 1].Score, new { @class = "form-control", @id = "tb-h" + i, @style = "padding-left: 0px; padding-right: 0px; text-align: center; display: block" })
</td>
}
<td id="score-sum"></td>
</tr>
<tr id="putts-array" class="table-secondary">
<td style="vertical-align: middle">
Putts
</td>
@for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px;" align="center">
@Html.TextBoxFor(m => m.Round.Scores[i - 1].Putts, new { @class = "form-control", @id = "tb-p" + i, @style = "padding-left: 0px; padding-right: 0px; text-align: center; display: block" })
</td>
}
<td id="putts-sum"></td>
</tr>
<tr id="uad-array" class="table-secondary">
<td style="vertical-align: middle">
Up-and-Down
</td>
@for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px; text-align: center; vertical-align: middle;">
@Html.CheckBoxFor(m => m.Round.Scores[i - 1].UAD, new { @class = "form-check-input", @id = "chb-uad" + i, @style = "margin: 0px; position: relative; width: 20px; height: 20px;" })
</td>
}
<td id="uad-sum"></td>
</tr>
<tr id="ss-array" class="table-secondary">
<td style="vertical-align: middle">
Sand Save
</td>
@for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px; text-align: center; vertical-align: middle;">
@Html.CheckBoxFor(m => m.Round.Scores[i - 1].SS, new { @class = "form-check-input", @id = "chb-ss" + i, @style = "margin: 0px; position: relative; width: 20px; height: 20px;" })
</td>
}
<td id="ss-sum"></td>
</tr>
</table>
<div class="form-group">
@Html.LabelFor(m => m.Round.Date)
@Html.TextBoxFor(m => m.Round.Date, "{0:d MMM yyyy}", new { @class = "form-control", Type = "date" })
</div>
@Html.Hidden("numHoles", Model.Round.Holes)
@Html.Hidden("score", Model.Round.Score)
@Html.Hidden("putts", Model.Round.Putts)
@Html.Hidden("uad", Model.Round.UAD)
@Html.Hidden("ss", Model.Round.SS)
<div class="form-group">
@Html.LabelFor(m => m.Round.Fairways)
@Html.TextBoxFor(m => m.Round.Fairways, new { @class = "form-control" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.Round.GIR)
@Html.TextBoxFor(m => m.Round.GIR, new { @class = "form-control" })
</div>
<button type="submit" class="btn btn-primary" id="save">Save</button>
}
这是脚本。到用户按下“保存”按钮时,所有数据已被计算并保存到各自的元素中。隐藏的输入确实具有数据,但它们不会在提交时将其发送回模型。
编辑:我知道可以通过使用循环来创建多个重复的脚本,但是我尝试了这一点,但由于每次迭代都使用最终索引而不是正确的索引,所以它不起作用。我不得不手动声明它们。
@section scripts
{
<script>
$(document).ready(function () {
$("#courseDropdown").change(function () {
$.ajax({
type: "GET",
url: "/api/coursesapi/" + $(this).val(),
contentType: "application/json",
success: function (course) {
$("#scorecard").show();
if (course != null) {
var yardSum = 0;
var holeYardage;
var holePar;
for (var i = 1; i < 19; i++) {
holeYardage = document.getElementById("hole-" + i + "-yardage");
holePar = document.getElementById("hole-" + i + "-par");
holeYardage.innerText = course.Holes[i - 1].Length;
holePar.innerText = course.Holes[i - 1].Par;
yardSum += course.Holes[i - 1].Length;
}
document.getElementById("par-sum").innerText = course.Par;
document.getElementById("yard-sum").innerText = yardSum;
}
}
});
});
$("#save").click(function () {
console.log("numHoles: " + $("#numHoles").val());
console.log("score: " + $("#score").val());
console.log("putts: " + $("#putts").val());
console.log("uad: " + $("#uad").val());
console.log("ss: " + $("#ss").val());
});
$("#scores-array").change(function () {
var score;
var sum = 0;
var numHoles = 0;
for (var i = 1; i < 19; i++) {
if (parseInt($("#tb-h" + i).val()) > 0) {
numHoles++;
}
score = $("#tb-h" + i);
sum += parseInt(score.val());
}
document.getElementById("score-sum").innerText = sum;
$("#score").val(sum);
$("#numHoles").val(numHoles);
});
$("#putts-array").change(function () {
var putts;
var sum = 0;
for (var i = 1; i < 19; i++) {
putts = $("#tb-p" + i);
sum += parseInt(putts.val());
}
document.getElementById("putts-sum").innerText = sum;
$("#putts").val(sum);
});
$("#uad-array").change(uadEval);
$("#ss-array").change(function () {
var sum = 0;
for (var i = 1; i < 19; i++) {
if ($("#chb-ss" + i).is(":checked")) {
sum++;
}
}
document.getElementById("ss-sum").innerText = sum;
$("#ss").val(sum);
});
$("#chb-ss1").change(function () {
if ($("#chb-ss1").is(":checked")) {
$("#chb-uad1").prop("checked", true);
$("#chb-uad1").prop("disabled", true);
}
else {
$("#chb-uad1").prop("checked", false);
$("#chb-uad1").prop("disabled", false);
}
uadEval();
});
$("#chb-ss2").change(function () {
if ($("#chb-ss2").is(":checked")) {
$("#chb-uad2").prop("checked", true);
$("#chb-uad2").prop("disabled", true);
}
else {
$("#chb-uad2").prop("checked", false);
$("#chb-uad2").prop("disabled", false);
}
uadEval();
});
$("#chb-ss3").change(function () {
if ($("#chb-ss3").is(":checked")) {
$("#chb-uad3").prop("checked", true);
$("#chb-uad3").prop("disabled", true);
}
else {
$("#chb-uad3").prop("checked", false);
$("#chb-uad3").prop("disabled", false);
}
uadEval();
});
$("#chb-ss4").change(function () {
if ($("#chb-ss4").is(":checked")) {
$("#chb-uad4").prop("checked", true);
$("#chb-uad4").prop("disabled", true);
}
else {
$("#chb-uad4").prop("checked", false);
$("#chb-uad4").prop("disabled", false);
}
uadEval();
});
$("#chb-ss5").change(function () {
if ($("#chb-ss5").is(":checked")) {
$("#chb-uad5").prop("checked", true);
$("#chb-uad5").prop("disabled", true);
}
else {
$("#chb-uad5").prop("checked", false);
$("#chb-uad5").prop("disabled", false);
}
uadEval();
});
$("#chb-ss6").change(function () {
if ($("#chb-ss6").is(":checked")) {
$("#chb-uad6").prop("checked", true);
$("#chb-uad6").prop("disabled", true);
}
else {
$("#chb-uad6").prop("checked", false);
$("#chb-uad6").prop("disabled", false);
}
uadEval();
});
$("#chb-ss7").change(function () {
if ($("#chb-ss7").is(":checked")) {
$("#chb-uad7").prop("checked", true);
$("#chb-uad7").prop("disabled", true);
}
else {
$("#chb-uad7").prop("checked", false);
$("#chb-uad7").prop("disabled", false);
}
uadEval();
});
$("#chb-ss8").change(function () {
if ($("#chb-ss8").is(":checked")) {
$("#chb-uad8").prop("checked", true);
$("#chb-uad8").prop("disabled", true);
}
else {
$("#chb-uad8").prop("checked", false);
$("#chb-uad8").prop("disabled", false);
}
uadEval();
});
$("#chb-ss9").change(function () {
if ($("#chb-ss9").is(":checked")) {
$("#chb-uad9").prop("checked", true);
$("#chb-uad9").prop("disabled", true);
}
else {
$("#chb-uad9").prop("checked", false);
$("#chb-uad9").prop("disabled", false);
}
uadEval();
});
$("#chb-ss10").change(function () {
if ($("#chb-ss10").is(":checked")) {
$("#chb-uad10").prop("checked", true);
$("#chb-uad10").prop("disabled", true);
}
else {
$("#chb-uad10").prop("checked", false);
$("#chb-uad10").prop("disabled", false);
}
uadEval();
});
$("#chb-ss11").change(function () {
if ($("#chb-ss11").is(":checked")) {
$("#chb-uad11").prop("checked", true);
$("#chb-uad11").prop("disabled", true);
}
else {
$("#chb-uad11").prop("checked", false);
$("#chb-uad11").prop("disabled", false);
}
uadEval();
});
$("#chb-ss12").change(function () {
if ($("#chb-ss12").is(":checked")) {
$("#chb-uad12").prop("checked", true);
$("#chb-uad12").prop("disabled", true);
}
else {
$("#chb-uad12").prop("checked", false);
$("#chb-uad12").prop("disabled", false);
}
uadEval();
});
$("#chb-ss13").change(function () {
if ($("#chb-ss13").is(":checked")) {
$("#chb-uad13").prop("checked", true);
$("#chb-uad13").prop("disabled", true);
}
else {
$("#chb-uad13").prop("checked", false);
$("#chb-uad13").prop("disabled", false);
}
uadEval();
});
$("#chb-ss14").change(function () {
if ($("#chb-ss14").is(":checked")) {
$("#chb-uad14").prop("checked", true);
$("#chb-uad14").prop("disabled", true);
}
else {
$("#chb-uad14").prop("checked", false);
$("#chb-uad14").prop("disabled", false);
}
uadEval();
});
$("#chb-ss15").change(function () {
if ($("#chb-ss15").is(":checked")) {
$("#chb-uad15").prop("checked", true);
$("#chb-uad15").prop("disabled", true);
}
else {
$("#chb-uad15").prop("checked", false);
$("#chb-uad15").prop("disabled", false);
}
uadEval();
});
$("#chb-ss16").change(function () {
if ($("#chb-ss16").is(":checked")) {
$("#chb-uad16").prop("checked", true);
$("#chb-uad16").prop("disabled", true);
}
else {
$("#chb-uad16").prop("checked", false);
$("#chb-uad16").prop("disabled", false);
}
uadEval();
});
$("#chb-ss17").change(function () {
if ($("#chb-ss17").is(":checked")) {
$("#chb-uad17").prop("checked", true);
$("#chb-uad17").prop("disabled", true);
}
else {
$("#chb-uad17").prop("checked", false);
$("#chb-uad17").prop("disabled", false);
}
uadEval();
});
$("#chb-ss18").change(function () {
if ($("#chb-ss18").is(":checked")) {
$("#chb-uad18").prop("checked", true);
$("#chb-uad18").prop("disabled", true);
}
else {
$("#chb-uad18").prop("checked", false);
$("#chb-uad18").prop("disabled", false);
}
uadEval();
});
function uadEval() {
var sum = 0;
for (var i = 1; i < 19; i++) {
if ($("#chb-uad" + i).is(":checked")) {
sum++;
}
}
document.getElementById("uad-sum").innerText = sum;
$("#uad").val(sum);
}
});
</script>
}
答案 0 :(得分:0)
我以前常常通过在未获取值之前将所有字段都隐藏起来,然后在完成所有操作后将其隐藏起来来解决jquery序列化的问题。
答案 1 :(得分:0)
我发现了问题。由于某些原因,HTML hidden()帮助函数没有正确的模型绑定名称。我认为它之所以可行,是因为viewmodel的结构不同,并且当我更新viewmodel时,隐藏字段的“名称”属性不再指向有效变量。