1
Answer

CheckBox Group in MVC Core

Adalat Khan

Adalat Khan
5y
2.5k
1
I have a View which is used to assign priviliges to a user. In the database i created two tables. The name of one table is MainMenuItems and the name of the second table is SubMenu Items. To assign sub menu items to a user i created a view that contains two dropdown lists. The first dropdown list displays the user Codes from the Employees table and the second dropdown list displays the main menu items from the MainMenuItems table. Now i want this view when i select a main menu item from the first DropDown list then all the sub menu items will display from the SubMenuItems table in from of a group of CheckBoxes. So first i will select an Employee Code from the first Dropdown list and select main menu item from the second dropdown list and when i select a main menu item from the second dropdown list then all the sub menu items related to the selected main menu item will display in the form of a group of CheckBoxes and i check one or more sub menu items from the list of check boxes and then press the submit button and this data will store in the database table UsersRightsAssignments. I created the complete view. I also created the checkboxes dynamically using Javascript but now i am confuse how to save the data of this View into the database table becase the first dropdown list has an attribute "asp-for" the second dropdown list contains an attribute "asp-for" but i am creating Checkboxes dynamily and they do not have the "asp-for" attribute so i confuse how can i take the values of all the selected CheckBoxes and store in the database table. Following is my comple code of View:
 
  1. <form asp-action="UserRightsAssignments" method="post">  
  2. <div class="row">  
  3. <div class="col-md-3">  
  4. <div class="form-group">  
  5. <label asp-for="UserCode" class="control-label">Select User Code</label>  
  6. <select asp-for="UserCode" id="cmbUserCode" class="form-control" asp-items="ViewBag.UserCodes">  
  7. </select>  
  8. </div>  
  9. </div>  
  10. <div class="col-md-3">  
  11. <div class="form-group">  
  12. <label asp-for="MainMenuId" class="control-label">Select Main Menu ID</label>  
  13. <select asp-for="MainMenuId" id="cmbMainMenuID" class="form-control control-size" asp-items="ViewBag.MainMenuIDs">  
  14. </select>  
  15. </div>  
  16. </div>  
  17. <div class="col-md-3">  
  18. <div class="form-group">  
  19. <div id="checkBoxesDiv"></div>  
  20. </div>  
  21. </div>  
  22. <div> @*End of first row*@  
  23. <div class="row">  
  24. <div class="col-md-3">  
  25. <div class="form-group">  
  26. <input type="submit" value="Create" class="btn btn-primary" /> <br />  
  27. </div>  
  28. </div>  
  29. </div>  
  30. </form>  
  31. <script type="text/javascript">  
  32. //Retrieve a List of Sub Menu Item Names by Main Menu Item ID  
  33. $.ajax({  
  34. url: "/Administration/RetrieveSubMenuNameByID",  
  35. type: "GET",  
  36. dataType: "json",  
  37. data: { "mainMenuID": mainMenuID },  
  38. success: function (response) {  
  39. $("#checkBoxesDiv").empty();  
  40. var checkBoxesDiv = document.getElementById("checkBoxesDiv");  
  41. for (var i = 0; i <response.length; i++) {  
  42. //Creating checkbox elements according to the retrieved sub menu items  
  43. var checkbox = document.createElement('input');  
  44. //Assigning the attributes to created checkbox  
  45. checkbox.type = "checkbox";  
  46. checkbox.name = "SubMenuItems" //The name of all CheckBoxes is same because it is group  
  47. checkbox.value = response[i].SubMenuName;  
  48. checkbox.id = "CheckBox" + i;  
  49. //Creating label for checkboxe  
  50. var label = document.createElement('label');  
  51. //Assigning attributes for the created label tag  
  52. label.htmlFor = response[i].SubMenuName;  
  53. //Appending the created text to the created label tag  
  54. label.appendChild(document.createTextNode(response[i].SubMenuName));  
  55. //Create the <br> tag and use after each Checkbox Control  
  56. var br = document.createElement('br');  
  57. //Appending the checkbox and label to div  
  58. checkBoxesDiv.appendChild(checkbox);  
  59. checkBoxesDiv.appendChild(label);  
  60. checkBoxesDiv.appendChild(br);  
  61. }  
  62. },  
  63. error: function (response) {  
  64. alert("The Sub Menu name does not display " + response.responseText);  
  65. }  
  66. });  
  67. }  
  68. </script>  
How to store the above form data in the database table that contains the following three fields:
 
UserCode
MainMenuId
SubMenuId
 
The UserCode and MainMenuId has one to many relation with SubMenuId because for a single UserCode and for a single MainMenuId there is one or more selected values of SubMenuId which is checked from the above list of CheckBoxes.
 
Your help will be highly apprecitres because this is part of my project. Thanks in advance
Please share your code in MVC Core
Answers (1)
Next Recommended Forum