Implement a UI for managing user's groups/role in asp.net mvc

Question

I am developing a CRUD app in ASP.NET MVC, i have already implemented the security part which works with AD and now i want to make easier the assignment of the varius permission to the users. All groups and users are stored in a database they are bound by this relationship:

Below my current view, this does't work it is only graphic.

Here my view code:

<body>
<div class="container">
    <br />
    <table class="table table-responsive table-bordered">
        @{
            //inizialize my ef context
            dev_labelsEntities db = new dev_labelsEntities();
            //get all users stored in the db
            var users = from u in db.Users
                        orderby u.username
                        select new
                        {
                            u.username
                        };
            //get all groups from the db
            var groups = from g in db.Groups
                         orderby g.group_name
                         select new
                         {
                             g.group_name
                         };
            <tr>
                <th>Username</th>
                @foreach (var item in groups)
                {
                    <td>@Html.DisplayFor(model => item.group_name)</td>
                }
            </tr>
            foreach (var item in users)
            {
                
                int count = 1;
                <tr>
                    <td>@Html.DisplayFor(model => item.username)</td>
                    @foreach (var itemG in groups)
                    {
                      //for distinguish the varius checkbox i use the name
                      //of the group and a generic count which indicates
                      //the row number                           
                      <td>@Html.CheckBox(""+itemG.group_name+"_"+count)</td>
                    }
                </tr>
                count++;
            }
        }            
     </table>
   </div>
 </body>

The final result which i expect is: when the user check a checkbox, call insert operation in UserGrops table, so a user can have more then one group (only if the user belong to Admins group, all other checkboxes must be disabled), whereas when the user unchech the checkbox delete from the table the corresponding user with the specific permission (ex, the user Jonh belong to pc and printer groups, i uncheck the checkbox which correspond to the printer group, this entry will be delete from the table and so Jonh can access only to the pc part).

If someone has advices or tips of any kind for implementing it, I'll appreciate.

Leo

EDIT

I've add to my view this script as @Amine suggest:

$(document).ready(function () {
    $('.chkclass').click(function () {
        var getchkid = $(this).attr('id');
        var isChecked = $('#' + getchkid).is(':checked');
        if ($('#' + getchkid).is(':checked') == true) {

            // the value that i need
            var username = $(this).attr('username');
            var groupname = $(this).attr('groupname');

            //ajax for calling my action medthod
            $.ajax({
                type: 'Post',
                url: '/UserGroups/ManagePermission',
                cache: false,
                dataType: 'Json',
                data: { usr: username, grp: groupname },
                //success: function (data) {
                    
                //},
                //error: function (xhr, ajaxOptions, thrownError) {
                //    alert(thrownError);
                //}
            })
        }
    });
});

The method receives the right value but after a simple test this happen

Before:

After:

Why this behavior?

Assuming you're not already using a more modern front-end UI framework, jQuery seems to be your best bet. Place all checkboxes in the same css class, bind to the click event on the class and send a jQuery ajax call toward your server with the necessary data (userId, roleId, isChecked). Make a special case out of your 'admin' role. If you're new to jQuery and UI, you can use the $.data functions to get your appropriate Ids. See guide here: https://tutorialzine.com/2010/11/jquery-data-method — Andor Baranyi, Feb 28 '19 at 09:15
@AndorBaranyi what do yuo mean for "Place all checkboxes in the same css class"? — Leonardo Bassi, Feb 28 '19 at 09:37
You can define custom attributes for your checkbox with a different overload of @Html.CheckBox. Like this: `@Html.CheckBox(""+itemG.group_name+"_"+count, new {@class="submit-on-click"})`. You can then have an event binding in jQuery like this: `$('.submit-on-click').on('click', function(){ /*your code here*/ });` — Andor Baranyi, Feb 28 '19 at 09:44

score 1 · Answer 1 · answered Feb 28 '19 at 09:45

Use this in HTML

<input type="checkbox"   class="chkclass"  username="@item.username"  groupname="@itemG.group_name" id="@count"  />

inplace of

<td>@Html.CheckBox(""+itemG.group_name+"_"+count)</td>

Username and groupname will be data to pass to the action
all checkbox will have the same class to be used on jquery action
id will use the count to locate the checked box on

the script you can use something like this

$(document).ready(function () {   


    $('.chkclass').click(function () {   

        var getchkid = $(this).attr('id');   
        var isChecked = $('#' + getchkid).is(':checked');   
  if ($('#' + getchkid).is(':checked') == true) {

  // to be send to your call
    var username = $(this).attr('username');
    var groupname = $(this).attr('groupname');

  //here put your call ajax to your action
  $.ajax({
            type: "POST",
            url: //your URL
            data: '{}', // your Data
  ....
   }   
    });   

});

I tried this, but something went wrong. In a first time the parameters username and groupname have been sent in the right way, but after some simple operation (also things which don't edit the username and groupname, ex get all groups of an user) the groupname get the value of username, ex if username is 'leo' and groupname is 'Stats' after a sum of 2 other variables grouoname becomes 'leo'. Any idea what is happened? — Leonardo Bassi, Feb 28 '19 at 14:22

Implement a UI for managing user's groups/role in asp.net mvc

1 Answers1