October 24, 2024
Chicago 12, Melborne City, USA
javascript

Implementing Many-to-Many Relationship Between Projects and Questions in Razor Pages


Button
Button

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

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video