Johnrad Johnrad - 5 months ago 8
HTML Question

Remove table column based on user group membership

So technically what I have is working but it is EXTREMELY slow.

In a nutshell I am querying a database for data, then creating a viewmodel containing that data paired with an object containing user AD data.

Here is my ViewModel:

public class SearchViewModel
{

public List<Submission> submissionList { get; set; }
public LoggedInUser User
{
get
{
return new LoggedInUser();
}
}
}

public class Submission
{
//... All the things ...
}


LoggedInUser
is a helper class that I have that contain several different ad attributes, but for this matter I am looking at a bool value called
isAdmin
. If is admin is
True
I am wanting a specific column to be displayed.

This is how I am doing it via Razor/Html.

<table class="datatable table table-bordered table-condensed">
<thead>
<tr>
//. . . Column Headers . . .

@if(Model.User.isAdmin)
{
<th />
}
</tr>
</thead>
<tbody>
@foreach (var item in Model.submissionList )
{
<tr id="@item.ID">
//. . . Column Content . . .

@if(Model.User.isAdmin)
{
<td>
<div id="approvalBtn-@item.ID">
<a href="#" onclick="quickApprove(@item.ID)">
<i class="fa fa-check text-success fa-lg" data-toggle="tooltip" data-placement="top" title="Submit for approval!"></i>
</a>
</div>
</td>
}
</tr>
}
</tbody>
</table>


When I remove the checks for the
isAdmin
, the information displays MUCH faster. Going from 5 minutes down to roughly 10 seconds.

Is there possibly a better implementation with javascript?

Answer

How do you instantiate your SearchViewModel class? If you do it directly, you should create a specific property named isAdmin and set its value on instantiate, like this:

public class SearchViewModel
{
     public List<Submission> submissionList { get; set; }
     public bool isAdmin { get; set; }
}

And then..

var user = new LoggedInUser();
var viewModel = new SearchViewModel {
    submissionList = submissionList, //supose you already have this value
    isAdmin = user.isAdmin
};

Your razor would be modified to this:

<table class="datatable table table-bordered table-condensed">
    <thead>
        <tr>
            //. . . Column Headers . . .

            @if(Model.isAdmin)
            { 
                <th />
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.submissionList )
        {                 
            <tr id="@item.ID">
                //. . . Column Content . . .

                @if(Model.isAdmin)
                { 
                    <td>
                        <div id="approvalBtn-@item.ID">
                                <a href="#" onclick="quickApprove(@item.ID)">
                                    <i class="fa fa-check text-success fa-lg" data-toggle="tooltip" data-placement="top" title="Submit for approval!"></i>
                                </a>
                        </div>
                    </td>
                }
            </tr>
        }
    </tbody>
</table>