How to Check/Unchecked the check box list by retrieving the data from database in ASP.NET MVC

Question

i am very new to ASP.NET MVC and trying to make a project tracking tool. i want to show a list of Questions from a table when page loads and it works.

but when a user click on the "Select Category Name" he should get all Questions as above and a check mark on the Questions which are related to specific category.as of now i am filtering and getting only the filtered Questions which is correct but the list should show all other categories questions as unchecked.

i have a table for Questions, Category and a one to many relationship between both of them hence i made a mapping table named QuestionCategoryMapping Table.

the problem i am facing that i don't know how to filter first all the questions and then later put a checkbox when a user select from list. i have made two separate functions both are working but i need the separated functionality together.

here are my code spinets.

// test code for partial view in project
    QuestionDataAccessLayer questionDataAccessLayer = new QuestionDataAccessLayer();

    //controller to add a partial view in create and edit question page
    public new PartialViewResult PartialView()
    {
        IEnumerable<Questions> questions = questionDataAccessLayer.GetAllQuestion();
        return PartialView("Partial_View", questions);
    }


    QuestionCategoryDataAccessLayer questionCategoryDataAccess = new QuestionCategoryDataAccessLayer();
    public new PartialViewResult PartialView1(int id)
    {
        IEnumerable<QuestionCategory> questionCategory = questionCategoryDataAccess.GetQuestionsPerCategory(id);
        return PartialView("Partial_View1", questionCategory);
    }

the JavaScript,HTML files are as below:

 <script> // code to update the partial view window.onload = function () { $.ajax({ url: 'PartialView', data: {}, type: 'Get', success: function (response) { $("#Questionpartial").html(response) } }); } //code to update the questions according to the selected chapter $("body").on("change", "#Qpartial", function () { var CatgId = $("#Qpartial").val(); $.ajax({ url: 'PartialView1', data: { id: CatgId }, type: 'Get', success: function (response) { $("#Questionpartial").html(response) console.log(CatgId); } }) }); </script>

 @model IEnumerable<EPQProjectTrackingTool.Models.QuestionCategory> <table @*border="1" class="table table-striped"*@> <thead> <tr> <th> @Html.DisplayNameFor(model => model.Question) </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @*@Html.DisplayFor(modelItem => item.Question)*@ <input name="AreChecked" type="checkbox" checked="checked" value="@item.Question" /> @item.Question<br /> </td> </tr> } </tbody> </table>

there is one more file which is same HTML but only showing the full list as show in the above pic.

and the stored procedure in sql is:

CREATE procedure [dbo].[spGetAllMapping_Question_Category]        
as        
Begin 
SELECT  
mpq.UID,mpq.Question_ID_FK_1,eq.Question ,mpq. Cat_ID_FK_2, ec.Description, mpq.Valid_From, 
mpq.Valid_To,c.Chapter_Name

FROM 
EPQ2.Category ec,EPQ2.Questions eq, EPQ2.Mapping_Question_Category mpq, EPQ2.Chapter c

WHERE 
mpq.Question_ID_FK_1 = eq.Question_ID_PK
and mpq.Cat_ID_FK_2 = ec.Cat_ID_PK 
and c.Chapter_Id = eq.Chapter_Id 
order by c.Ch_Sequence_ID , eq.Sequence_ID,ec.Cat_Name

End


CREATE procedure [dbo].[spGetQuestionsPerCategory](@category_Id int)       
as        
Begin  

SELECT  
eq.Question 

FROM 
EPQ2.Questions eq, EPQ2.Mapping_Question_Category mpq

WHERE 
mpq.Question_ID_FK_1 = eq.Question_ID_PK
and mpq.Cat_ID_FK_2 = @category_Id; 

End

the summary or similar example would be to select all the rows from a table and then put a filter which shows all the rows again but maybe make bold the filtered one and rest of them keep as it is.

Answer 1

Can't comment as I lack the reputation, so some liberties in assumption are gonna be taken and I can edit later if I made the wrong assumptions.

From my understanding you want a list of questions shown to the user, with all the questions matching the category from the dropdown to be selected.

If it's possible to change the return type from the stored procedure you could just have a sql function that returns question and whether it should be checked.

CREATE procedure [dbo].[spGetAllMapping_Question_Category](@category_Id int)
as
Begin
SELECT
mpq.UID,mpq.Question_ID_FK_1,eq.Question ,mpq.Cat_ID_FK_2, ec.Description, mpq.Valid_From, 
mpq.Valid_To,c.Chapter_Name,
    CASE
        WHEN mpq.Cat_ID_FK_2 = @category_Id THEN 1
        ELSE 0
    END as 'Checked'

FROM 
EPQ2.Category ec,EPQ2.Questions eq, EPQ2.Mapping_Question_Category mpq, EPQ2.Chapter c

WHERE 
mpq.Question_ID_FK_1 = eq.Question_ID_PK
and mpq.Cat_ID_FK_2 = ec.Cat_ID_PK 
and c.Chapter_Id = eq.Chapter_Id 
order by c.Ch_Sequence_ID , eq.Sequence_ID,ec.Cat_Name

End

Bit value can be set to boolean in the questionCategoryDataAccess. I know some readers have a GetBoolean function or you can use some ternary operators.

Then you can set up an checkbox using this boolean.

@foreach (var item in Model)
{
    <tr>
        <td>
            @if (item.Checked == true)
            {
                <input name="AreChecked" type="checkbox" checked="checked" value="@item.Question" /> @item.Question<br />
            }
            else
            {
                <input name="AreChecked" type="checkbox" value="@item.Question" /> @item.Question<br />
            }
        </td>
    </tr>
}

Might be easier to use Html helpers but I followed the standard you had.

Hope this helps and if I made some wrong assumptions let me know and I'll do my best to help get the right solution.