Show Hide Button in Table based on Role using WebService in AngularJS

on Jul 17, 2019 12:14 AM

How to show hide Button in table row based on Role in ASP.Net using AngularJS

Show Hide Edit Button in GridView based on Role in ASP.Net using C# and VB.Net

Download FREE API for Word, Excel and PDF in ASP.Net: Download
on Jul 17, 2019 04:39 AM

Hi rani,

Using the below article i have created the example.

Show Hide Edit Button in GridView based on Role in ASP.Net using C# and VB.Net

Check this example. Now please take its reference and correct your code.

For binding record i have used Northwind database that you can download using the link given below.

Download Northwind Database



<html xmlns="">
    <link type="text/css" rel="stylesheet" href='' />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var loginApp = angular.module('LoginApp', []);
        loginApp.controller('LoginController', function ($scope, $http, $window) {
            $scope.Submit = function () {
                var userData = { username: $scope.Username, password: $scope.Password }
                $'WebService.asmx/ValidateUser', userData)
                .then(function (response) {
                    if ( != "") {
                        $window.location.href = 'Home.htm?Role=' +;
<body ng-app="LoginApp" ng-controller="LoginController">
    <section class="container">
        <div class="main_cont register">
            <div class="login-panel">
                <h3 class="login-heading"></h3>
                <div class="row">                       
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group">
                            <input type="text" class="form-control" ng-model="Username" name="Name" placeholder="Username" value="" autocomplete="off" required/>
                        <div class="form-group">
                            <input type="password" class="form-control" ng-model="Password" name="Password" placeholder="Password" value="" autocomplete="off" required/>
                        <div class="float-right">
                            <input type="button" class="btn btn-primary" ng-click="Submit()" value="Login" />


<html xmlns="">
    <link type="text/css" rel="stylesheet" href='' />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Role = $'=')[1];
            $"WebService.asmx/BindEmployees", { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Employees = eval(;
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-bordered table-responsive">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th ng-show="Role=='Administrator'">Action</th>
                <tr ng-repeat="employee in Employees">
                    <td>{{ employee.EmployeeId }}</td>
                    <td>{{ employee.FirstName }}</td>
                    <td>{{ employee.LastName }}</td>
                    <td>{{ employee.City }}</td>
                    <td>{{ employee.Country }}</td>
                    <td ng-show="Role=='Administrator'">
                        <input type="button" class="btn-primary" value="Edit" />



using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

[WebService(Namespace = "")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
public class WebService : System.Web.Services.WebService
    public string ValidateUser(string username, string password)
        int userId = 0;
        string roles = string.Empty;
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        SqlConnection con = new SqlConnection(constr);
        SqlCommand cmd = new SqlCommand("Validate_User");
        cmd.CommandType = System.Data.CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@Username", username);
        cmd.Parameters.AddWithValue("@Password", password);
        cmd.Connection = con;
        SqlDataReader reader = cmd.ExecuteReader();
        userId = Convert.ToInt32(reader["UserId"]);
        roles = reader["Roles"].ToString();
        return roles;

    public string BindEmployees()
        List<object> employees = new List<object>();
        string sql = "SELECT TOP 5 EmployeeID,FirstName,LastName,City,Country FROM Employees";
        using (SqlConnection conn = new SqlConnection())
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr1"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand(sql))
                cmd.Connection = conn;
                using (SqlDataReader sdr = cmd.ExecuteReader())
                    while (sdr.Read())
                            EmployeeId = sdr["EmployeeID"],
                            FirstName = sdr["FirstName"],
                            LastName = sdr["LastName"],
                            City = sdr["City"],
                            Country = sdr["Country"]
            return (new JavaScriptSerializer().Serialize(employees));


Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService
    Public Function ValidateUser(ByVal username As String, ByVal password As String) As String
        Dim userId As Integer = 0
        Dim roles As String = String.Empty
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim con As SqlConnection = New SqlConnection(constr)
        Dim cmd As SqlCommand = New SqlCommand("Validate_User")
        cmd.CommandType = System.Data.CommandType.StoredProcedure
        cmd.Parameters.AddWithValue("@Username", username)
        cmd.Parameters.AddWithValue("@Password", password)
        cmd.Connection = con
        Dim reader As SqlDataReader = cmd.ExecuteReader()
        userId = Convert.ToInt32(reader("UserId"))
        roles = reader("Roles").ToString()
        Return roles
    End Function

    Public Function BindEmployees() As String
        Dim employees As List(Of Object) = New List(Of Object)()
        Dim sql As String = "SELECT TOP 5 EmployeeID,FirstName,LastName,City,Country FROM Employees"
        Using conn As SqlConnection = New SqlConnection()
            conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr1").ConnectionString
            Using cmd As SqlCommand = New SqlCommand(sql)
                cmd.Connection = conn
                Using sdr As SqlDataReader = cmd.ExecuteReader()
                    While sdr.Read()
                        employees.Add(New With {
                            .EmployeeId = sdr("EmployeeID"),
                            .FirstName = sdr("FirstName"),
                            .LastName = sdr("LastName"),
                            .City = sdr("City"),
                            .Country = sdr("Country")
                    End While
                End Using
            End Using

            Return (New JavaScriptSerializer().Serialize(employees))
        End Using
    End Function
End Class