When I want to add a question to my project in the project section, I want to be redirected to the questionFilter.cshtml page with the project’s ID. After that, I want to add and save the questions I click on with buttons related to this project ID. There is a many-to-many relationship between projects and questions. Is there anyone who can help me with this? Also, I am using Razor Pages with OnPost and OnGet methods, and I am using LINQ.
I could only write the button click part right now. I couldn’t figure out what to write in the onpost and onget part.
@section scripts
{
</script>
// An array to hold the IDs of the selected questions
let selectedQuestions = [];
function addQuestion(questionId, button) {
// Check the current class of the button
if (button.classList.contains('btn-outline-primary')) {
// Button selected, add ID and make button red
selectedQuestions.push(questionId);
button.classList.remove('btn-outline-primary');
button.classList.add('btn-danger');
console.log('Selected Question ID:', questionId);
} else {
// Button not selected, remove ID and revert button
selectedQuestions = selectedQuestions.filter(id => id !== questionId);
button.classList.remove('btn-danger');
button.classList.add('btn-outline-primary');
console.log('Removed from question, ID:', questionId);
}
// You can perform other operations here if necessary
// To add a hidden input, use the following code:
const form = document.getElementById('questionForm');
let hiddenInput = document.querySelector(`input[name="SelectedQuestionIds"][value="${questionId}"]`);
if (hiddenInput) {
form.removeChild(hiddenInput); // Remove if exists
} else {
hiddenInput = document.createElement('input');
hiddenInput.type="hidden";
hiddenInput.name="SelectedQuestionIds";
hiddenInput.value = questionId;
form.appendChild(hiddenInput); // Add new hidden input
}
}
</script>
}
<div class="col-md-9">
<!-- Question Table -->
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title">Questions</h5>
</div>
</div>
<!-- Select Questions Form -->
<h2>Select Questions</h2>
<form method="post" id="questionForm" asp-page-handler="OnPostAddSelectedQuestions">
<div class="table-responsive mt-2" style="max-height: 500px; overflow-y: auto;">
@if (!Model.questions.Any())
{
<p>No Questions Added Yet.</p>
}
else
{
<div class="row" id="questionsContainer">
<!-- Show the first 20 questions -->
@for (int i = 0; i < Math.Min(20, Model.questions.Count()); i++)
{
var q = Model.questions[i];
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<!-- Question image -->
<div style="padding: 10px;">
<img src="@($"{Url.Content("/Upload/")}{q.FilePath}")" alt="Question Image" style="width: 100%; height: auto; object-fit: cover;" />
</div>
<!-- Button for each question -->
<button type="button" onclick="addQuestion('@q.Id', this)" class="btn btn-outline-primary">Add Question</button>
</div>
</div>
</div>
}
</div>
}
</div>
<div>
<button type="submit" class="btn btn-primary mb-3" style="float: right;">Add Selected Questions</button>
</div>
</form>
</div>
</div>
</div>
You need to sign in to view this answers
Leave feedback about this