gokce
Reputation: 31
I can't take matchId (f.k.) correctly in actionresult from a list in partial view with javascript
I am having a problem to getting correct matchId (foreign key) from partial view. There is 5 value and first one always coming true. Others always comes 0. But from console.log it always comes as true.
Can someone please help me? Many thanks.
here is my main page:
@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>
Here is partial view page:
@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");}
}
Here is partial views actionresult:
[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");
}
when I click this first one, I can get correct value from actionresult in edit as matchId. But when I click the others matchId comes 0.
Upvotes: 0
Views: 34
Answers (1)
Tiny Wang
Reputation: 16066
The reason why it worked for the first one but not other one is that you set <input asp-for="matchId" class="form-control" type="number" id="matchId" name="matchId" hidden/> in your partial view, and this will cause a result that there are several elements all have id matchId, then in your click event, it will always set value for the first one.
The solution is that you need to set matchId before load the view.
Here's my test model, I think you when can get Id before load the view, you can get matchId as well, so you don't need to set value in your click event. Or in other words, you don't need to use myFunction here.
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; }
}
Upvotes: 0
Related Questions
- Partial View Does not render correctly with dynamic id?
- .Net Core - Passing id to partial view, partial view needs to get more data from id and show results
- Passing an Id value to Partial View
- Id of a selectedlist from partialview is not passed to controller
- Pass HiddenFor ID from View to a another ActionResult which is a PartialView
- How to prevent duplicated ID in partial views and still reference them in the Javascript code?
- how to pass Id from parent to partial view in asp.net mvc3?
- Getting id's on elements in partial views
- value not being passed into partial view
- Accessing Route Value of Id inside a Partial View