我不能接受matchId (f.k.)正确地使用javascript从部分视图中的列表中获得操作结果
我不能接受matchId (f.k.)正确地使用javascript从部分视图中的列表中获得操作结果
提问于 2022-04-08 15:28:47
从部分视图获得正确的matchId (外键)是有问题的。有5种价值，第一种总是实现的。其他人总是0。但从console.log来看，这一切总是一样的。
有人能帮帮我吗？非常感谢。
这是我的主页：
@model IEnumerable<match>
@{
ViewData["Title"] = "Home Page";
}
<head>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h4>Title List:</h4>
<table class="table table-hover">
@foreach (var item in Model)
{
<tr>
<td id="item_title">
<button class="accordion" id="title" onclick="myFunction(@item.Id)">@Html.DisplayFor(modelItem => item.title)</button>
<div class="panel">
<p id="modelId" hidden>@Html.DisplayFor(modelItem => item.Id)</p>
<p>@Html.DisplayFor(modelItem => item.context)</p>
@await Html.PartialAsync("Create", item.Exams@*, Exams*@)
</div>
</td>
</tr>
}
</table>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
//document.getElementById("title").addEventListener("click", myFunction);
//document.querySelectorAll('.accordion').forEach(link => this.addEventListener('click', myFunction))
//let buttonn = document.querySelector("accordion");
function myFunction(val) {
//document.getElementById("matchId").value = document.getElementById("modelId").innerHTML;
document.getElementById("matchId").value = val;
console.log("value"+document.getElementById("matchId").value);
}
//document.getElementById("matchId").value = document.getElementById("modelId").innerHTML;
//console.log(document.getElementById("matchId").innerHTML);
//console.log(document.getElementById("matchId").value);
document.getElementById("match_title").value = document.getElementById("title").innerHTML;
//console.log(document.getElementById("match_title").value);
//function displayAnswer1() {
// if (document.getElementById('option-11').checked) {
// document.getElementById('block-11').style.border = '3px solid limegreen'
// document.getElementById('result-11').style.color = 'limegreen'
// document.getElementById('result-11').innerHTML = 'Correct!'
// }
// if (document.getElementById('option-12').checked) {
// document.getElementById('block-12').style.border = '3px solid red'
// document.getElementById('result-12').style.color = 'red'
// document.getElementById('result-12').innerHTML = 'Incorrect!'
// showCorrectAnswer1()
// }
// if (document.getElementById('option-13').checked) {
// document.getElementById('block-13').style.border = '3px solid red'
// document.getElementById('result-13').style.color = 'red'
// document.getElementById('result-13').innerHTML = 'Incorrect!'
// showCorrectAnswer1()
// }
// if (document.getElementById('option-14').checked) {
// document.getElementById('block-14').style.border = '3px solid red'
// document.getElementById('result-14').style.color = 'red'
// document.getElementById('result-14').innerHTML = 'Incorrect!'
// showCorrectAnswer1()
// }
//}
//function showCorrectAnswer1() {
// let showAnswer1 = document.createElement('p')
// showAnswer1.innerHTML = 'Show Corrent Answer'
// showAnswer1.style.position = 'relative'
// showAnswer1.style.top = '-180px'
// showAnswer1.style.fontSize = '1.75rem'
// document.getElementById('showanswer1').appendChild(showAnswer1)
// showAnswer1.addEventListener('click', () => {
// document.getElementById('block-11').style.border = '3px solid limegreen'
// document.getElementById('result-11').style.color = 'limegreen'
// document.getElementById('result-11').innerHTML = 'Correct!'
// document.getElementById('showanswer1').removeChild(showAnswer1)
// })
//}
</script>
</body>以下是部分查看页面：
@model language_exam.Models.Exams
@using (Html.BeginForm("Create", "Home", FormMethod.Post))
{
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="card border-info">
<div class="card-header bg-info text-white">Question 1</div>
<div class="card-body">
<div>
<div class="form-group">
<input asp-for="matchId" class="form-control" type="number" id="matchId" name="matchId" hidden/>
<input hidden @*asp-for="match_title"*@ id="match_title" name="match_title" />
</div>
<input asp-for="question_1_text" id="question_1_text" name="question_1_text" class="form-control" type="text" placeholder="input a question" />
<p>choose a radio button for determine a correct answer</p>
</div>
<div class="form-check" id='block-11'>
<label for='option-11'>
A)<input asp-for="answer_1_a_text" class="form-control" type="text" id="answer_1_a_text" name="answer_1_a_text" placeholder="input an answer" />
</label>
<span id='result-11'></span>
</div>
<div class="form-check" id='block-12'>
<label for='option-12'>
B)<input asp-for="answer_1_b_text" class="form-control" type="text" id="answer_1_b_text" name="answer_1_b_text" placeholder="input an answer" />
</label>
<span id='result-12'></span>
</div>
<div class="form-check" id='block-13'>
<label for='option-13'>
C)
<input asp-for="answer_1_c_text" class="form-control" type="text" id="answer_1_c_text" name="answer_1_c_text" placeholder="input an answer" />
</label>
<span id='result-13'></span>
</div>
<div class="form-check" id='block-14'>
<label for='option-14'>
D)
<input asp-for="answer_1_d_text" class="form-control" type="text" id="answer_1_d_text" name="answer_1_d_text" placeholder="input an answer" />
</label>
<span id='result-14'></span>
</div>
<div>
please click for choose the correct answer
<select asp-for="correct_1_answer" id="correct_1_answer" name="correct_1_answer">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<a id='showanswer1'></a>
</div>
</div>
<br />
<div class="card border-info">
<div class="card-header bg-info text-white">Question 2</div>
<div class="card-body">
<div>
<input asp-for="question_2_text" class="form-control" type="text" id="question_2_text" name="question_2_text" placeholder="input a question" />
<p>choose a radio button for determine a correct answer</p>
</div>
<div class="form-check" id='block-11'>
<label for='option-11'>
A)
<input asp-for="answer_2_a_text" class="form-control" type="text" id="answer_2_a_text" name="answer_2_a_text" placeholder="input an answer" />
</label>
<span id='result-11'></span>
</div>
<div class="form-check" id='block-12'>
<label for='option-12'>
B)
<input asp-for="answer_2_b_text" class="form-control" type="text" id="answer_2_b_text" name="answer_2_b_text" placeholder="input an answer" />
</label>
<span id='result-12'></span>
</div>
<div class="form-check" id='block-13'>
<label for='option-13'>
C)
<input asp-for="answer_2_c_text" class="form-control" type="text" id="answer_2_c_text" name="answer_2_c_text" placeholder="input an answer" />
</label>
<span id='result-13'></span>
</div>
<div class="form-check" id='block-14'>
<label for='option-14'>
D)
<input asp-for="answer_2_d_text" class="form-control" type="text" id="answer_2_d_text" name="answer_2_d_text" placeholder="input an answer" />
</label>
<span id='result-14'></span>
</div>
<div>
please click for choose the correct answer
<select asp-for="correct_2_answer" id="correct_2_answer" name="correct_2_answer">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<a id='showanswer1'></a>
</div>
</div>
<br />
<div class="card border-info">
<div class="card-header bg-info text-white">Question 3</div>
<div class="card-body">
<div>
<input asp-for="question_3_text" class="form-control" type="text" id="question_3_text" name="question_3_text" placeholder="input a question" />
<p>choose a radio button for determine a correct answer</p>
</div>
<div class="form-check" id='block-11'>
<label for='option-11'>
A)
<input asp-for="answer_3_a_text" class="form-control" type="text" id="answer_3_a_text" name="answer_3_a_text" placeholder="input an answer" />
</label>
<span id='result-11'></span>
</div>
<div class="form-check" id='block-12'>
<label for='option-12'>
B)
<input asp-for="answer_3_b_text" class="form-control" type="text" id="answer_3_b_text" name="answer_3_b_text" placeholder="input an answer" />
</label>
<span id='result-12'></span>
</div>
<div class="form-check" id='block-13'>
<label for='option-13'>
C)
<input asp-for="answer_3_c_text" class="form-control" type="text" id="answer_3_c_text" name="answer_3_c_text" placeholder="input an answer" />
</label>
<span id='result-13'></span>
</div>
<div class="form-check" id='block-14'>
<label for='option-14'>
D)
<input asp-for="answer_3_d_text" class="form-control" type="text" id="answer_3_d_text" name="answer_3_d_text" placeholder="input an answer" />
</label>
<span id='result-14'></span>
</div>
<div>
please click for choose the correct answer
<select asp-for="correct_3_answer" id="correct_3_answer" name="correct_3_answer">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<a id='showanswer1'></a>
</div>
</div>
<br />
<div class="card border-info">
<div class="card-header bg-info text-white">Question 4</div>
<div class="card-body">
<div>
<input asp-for="question_4_text" class="form-control" type="text" id="question_4_text" name="question_4_text" placeholder="input a question" />
<p>choose a radio button for determine a correct answer</p>
</div>
<div class="form-check" id='block-11'>
<label for='option-11'>
A)
<input asp-for="answer_4_a_text" class="form-control" type="text" id="answer_4_a_text" name="answer_4_a_text" placeholder="input an answer" />
</label>
<span id='result-11'></span>
</div>
<div class="form-check" id='block-12'>
<label for='option-12'>
B)
<input asp-for="answer_4_b_text" class="form-control" type="text" id="answer_4_b_text" name="answer_4_b_text" placeholder="input an answer" />
</label>
<span id='result-12'></span>
</div>
<div class="form-check" id='block-13'>
<label for='option-13'>
C)
<input asp-for="answer_4_c_text" class="form-control" type="text" id="answer_4_c_text" name="answer_4_c_text" placeholder="input an answer" />
</label>
<span id='result-13'></span>
</div>
<div class="form-check" id='block-14'>
<label for='option-14'>
D)
<input asp-for="answer_4_d_text" class="form-control" type="text" id="answer_4_d_text" name="answer_4_d_text" placeholder="input an answer" />
</label>
<span id='result-14'></span>
</div>
<div>
please click for choose the correct answer
<select asp-for="correct_4_answer" id="correct_4_answer" name="correct_4_answer">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<a id='showanswer1'></a>
</div>
</div>
<br />
<button type='submit' class="btn btn-info btn-block">Submit</button>
}
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}以下是部分视图的操作结果：
[HttpPost]
public ActionResult Create(Exams exam)
{
Exams question_for_fill = new Exams();
question_for_fill.match = exam.match;
question_for_fill.Id = exam.Id;
question_for_fill.creator = User.Identity.Name;
question_for_fill.matchId = exam.matchId;
question_for_fill.question_1_text = exam.question_1_text;
question_for_fill.question_2_text = exam.question_2_text;
question_for_fill.question_3_text = exam.question_3_text;
question_for_fill.question_4_text = exam.question_4_text;
question_for_fill.correct_1_answer = exam.correct_1_answer;
question_for_fill.correct_2_answer = exam.correct_2_answer;
question_for_fill.correct_3_answer = exam.correct_3_answer;
question_for_fill.correct_4_answer = exam.correct_4_answer;
question_for_fill.creator = User.Identity.Name;
question_for_fill.answer_1_a_text = exam.answer_1_a_text;
question_for_fill.answer_1_b_text = exam.answer_1_b_text;
question_for_fill.answer_1_c_text = exam.answer_1_c_text;
question_for_fill.answer_1_d_text = exam.answer_1_d_text;
question_for_fill.answer_2_a_text = exam.answer_2_a_text;
question_for_fill.answer_2_b_text = exam.answer_2_b_text;
question_for_fill.answer_2_c_text = exam.answer_2_c_text;
question_for_fill.answer_2_d_text = exam.answer_2_d_text;
question_for_fill.answer_3_a_text = exam.answer_3_a_text;
question_for_fill.answer_3_b_text = exam.answer_3_b_text;
question_for_fill.answer_3_c_text = exam.answer_3_c_text;
question_for_fill.answer_3_d_text = exam.answer_3_d_text;
question_for_fill.answer_4_a_text = exam.answer_4_a_text;
question_for_fill.answer_4_b_text = exam.answer_4_b_text;
question_for_fill.answer_4_c_text = exam.answer_4_c_text;
question_for_fill.answer_4_d_text = exam.answer_4_d_text;
question_for_fill.created_date = DateTime.Now;
db.Exams.Add(question_for_fill);
db.SaveChanges();
return RedirectToAction("examslist");
}当我单击第一个命令时，我可以从作为matchId的编辑中的as结果中获得正确的值。但是，当我单击其他matchId时，则为0。
回答 1
Stack Overflow用户
发布于 2022-04-10 09:30:53
它在第一个视图中工作的原因是在您的部分视图中设置了<input asp-for="matchId" class="form-control" type="number" id="matchId" name="matchId" hidden/>，这将导致有几个元素都有id matchId，然后在您的click事件中，它总是为第一个元素设置值。
解决方案是在加载视图之前设置matchId。
下面是我的测试模型，我认为在加载视图之前您可以获得Id，您也可以获得matchId，所以您不需要在单击事件中设置值。换句话说，这里不需要使用myFunction。
public IActionResult Privacy()
{
List<PageModel> list = new List<PageModel>
{
new PageModel{ Id="1", context = "context1",title="title1",exams = new Exams{matchId="1",question_1_text="question1",answer_1_a_text="opt1a",answer_1_b_text="opt1b",correct_1_answer="answer1" } },
new PageModel{ Id="2", context = "context2",title="title2",exams = new Exams{matchId="2",question_1_text="question2",answer_1_a_text="opt2a",answer_1_b_text="opt2b",correct_1_answer="answer2" } },
new PageModel{ Id="3", context = "context3",title="title3",exams = new Exams{matchId="3",question_1_text="question3",answer_1_a_text="opt3a",answer_1_b_text="opt3b",correct_1_answer="answer3" } }
};
return View(list);
}
public class PageModel
{
public string Id { get; set; }
public string context { get; set; }
public Exams exams { get; set; }
public string title { get; set; }
}
public class Exams
{
public string matchId { get; set; }
public string question_1_text { get; set; }
public string answer_1_a_text { get; set; }
public string answer_1_b_text { get; set; }
public string correct_1_answer { get; set; }
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71799621
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号