ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Show Hide Button in Table based on Role using WebService in AngularJS<p>Hi&nbsp;rani,</p> <p>Using the below article i have created the example.</p> <h1 class="header"><a title="Show Hide Edit Button in GridView based on Role in ASP.Net using C# and VB.Net'a" href="https://www.aspsnippets.com/Articles/Show-Hide-Edit-Button-in-GridView-based-on-Role-in-ASPNet-using-C-and-VBNet.aspx" target="_blank">Show Hide Edit Button in GridView based on Role in ASP.Net using C# and VB.Net</a></h1> <p>Check this example. Now please take its reference and correct your code.</p> <p>For&nbsp;binding record i have used&nbsp;Northwind database that you can download using the link given below.</p> <p><a href="https://www.aspsnippets.com/Articles/Install-Microsoft-Northwind-and-Pubs-Sample-databases-in-SQL-Server-Management-Studio.aspx" target="_blank">Download Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <p><strong>Login</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link type=&#34;text/css&#34; rel=&#34;stylesheet&#34; href=&#39;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css&#39; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var loginApp = angular.module(&#39;LoginApp&#39;, []); loginApp.controller(&#39;LoginController&#39;, function ($scope, $http, $window) { $scope.Submit = function () { var userData = { username: $scope.Username, password: $scope.Password } $http.post(&#39;WebService.asmx/ValidateUser&#39;, userData) .then(function (response) { if (response.data.d != &#34;&#34;) { $window.location.href = &#39;Home.htm?Role=&#39; + response.data.d; } }); } }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;LoginApp&#34; ng-controller=&#34;LoginController&#34;&gt; &lt;section class=&#34;container&#34;&gt; &lt;div class=&#34;main_cont register&#34;&gt; &lt;div class=&#34;login-panel&#34;&gt; &lt;h3 class=&#34;login-heading&#34;&gt;&lt;/h3&gt; &lt;div class=&#34;row&#34;&gt; &lt;div class=&#34;col-md-12 col-sm-12&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;input type=&#34;text&#34; class=&#34;form-control&#34; ng-model=&#34;Username&#34; name=&#34;Name&#34; placeholder=&#34;Username&#34; value=&#34;&#34; autocomplete=&#34;off&#34; required/&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;input type=&#34;password&#34; class=&#34;form-control&#34; ng-model=&#34;Password&#34; name=&#34;Password&#34; placeholder=&#34;Password&#34; value=&#34;&#34; autocomplete=&#34;off&#34; required/&gt; &lt;/div&gt; &lt;div class=&#34;float-right&#34;&gt; &lt;input type=&#34;button&#34; class=&#34;btn btn-primary&#34; ng-click=&#34;Submit()&#34; value=&#34;Login&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>Home</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link type=&#34;text/css&#34; rel=&#34;stylesheet&#34; href=&#39;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css&#39; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []); app.controller(&#39;MyController&#39;, function ($scope, $http, $window) { $scope.Role = $window.location.search.split(&#39;=&#39;)[1]; $http.post(&#34;WebService.asmx/BindEmployees&#34;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { $scope.Employees = eval(response.data.d); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;table class=&#34;table table-bordered table-responsive&#34;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;th&gt;City&lt;/th&gt; &lt;th&gt;Country&lt;/th&gt; &lt;th ng-show=&#34;Role==&#39;Administrator&#39;&#34;&gt;Action&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&#34;employee in Employees&#34;&gt; &lt;td&gt;{{ employee.EmployeeId }}&lt;/td&gt; &lt;td&gt;{{ employee.FirstName }}&lt;/td&gt; &lt;td&gt;{{ employee.LastName }}&lt;/td&gt; &lt;td&gt;{{ employee.City }}&lt;/td&gt; &lt;td&gt;{{ employee.Country }}&lt;/td&gt; &lt;td ng-show=&#34;Role==&#39;Administrator&#39;&#34;&gt; &lt;input type=&#34;button&#34; class=&#34;btn-primary&#34; value=&#34;Edit&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">WebService</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System; using System.Collections.Generic; using System.Configuration; using System.Data.SqlClient; using System.Web.Script.Serialization; using System.Web.Services; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { [WebMethod] public string ValidateUser(string username, string password) { int userId = 0; string roles = string.Empty; string constr = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; SqlConnection con = new SqlConnection(constr); SqlCommand cmd = new SqlCommand(&#34;Validate_User&#34;); cmd.CommandType = System.Data.CommandType.StoredProcedure; cmd.Parameters.AddWithValue(&#34;@Username&#34;, username); cmd.Parameters.AddWithValue(&#34;@Password&#34;, password); cmd.Connection = con; con.Open(); SqlDataReader reader = cmd.ExecuteReader(); reader.Read(); userId = Convert.ToInt32(reader[&#34;UserId&#34;]); roles = reader[&#34;Roles&#34;].ToString(); con.Close(); return roles; } [WebMethod] public string BindEmployees() { List&lt;object&gt; employees = new List&lt;object&gt;(); string sql = &#34;SELECT TOP 5 EmployeeID,FirstName,LastName,City,Country FROM Employees&#34;; using (SqlConnection conn = new SqlConnection()) { conn.ConnectionString = ConfigurationManager.ConnectionStrings[&#34;constr1&#34;].ConnectionString; using (SqlCommand cmd = new SqlCommand(sql)) { cmd.Connection = conn; conn.Open(); using (SqlDataReader sdr = cmd.ExecuteReader()) { while (sdr.Read()) { employees.Add(new { EmployeeId = sdr[&#34;EmployeeID&#34;], FirstName = sdr[&#34;FirstName&#34;], LastName = sdr[&#34;LastName&#34;], City = sdr[&#34;City&#34;], Country = sdr[&#34;Country&#34;] }); } } conn.Close(); } return (new JavaScriptSerializer().Serialize(employees)); } } } </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System Imports System.Collections.Generic Imports System.Configuration Imports System.Data.SqlClient Imports System.Web.Script.Serialization Imports System.Web.Services &#39; To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. &lt;System.Web.Script.Services.ScriptService()&gt; _ &lt;WebService(Namespace:=&#34;http://tempuri.org/&#34;)&gt; _ &lt;WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)&gt; _ &lt;Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()&gt; _ Public Class WebService Inherits System.Web.Services.WebService &lt;WebMethod()&gt; 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(&#34;constr&#34;).ConnectionString Dim con As SqlConnection = New SqlConnection(constr) Dim cmd As SqlCommand = New SqlCommand(&#34;Validate_User&#34;) cmd.CommandType = System.Data.CommandType.StoredProcedure cmd.Parameters.AddWithValue(&#34;@Username&#34;, username) cmd.Parameters.AddWithValue(&#34;@Password&#34;, password) cmd.Connection = con con.Open() Dim reader As SqlDataReader = cmd.ExecuteReader() reader.Read() userId = Convert.ToInt32(reader(&#34;UserId&#34;)) roles = reader(&#34;Roles&#34;).ToString() con.Close() Return roles End Function &lt;WebMethod()&gt; Public Function BindEmployees() As String Dim employees As List(Of Object) = New List(Of Object)() Dim sql As String = &#34;SELECT TOP 5 EmployeeID,FirstName,LastName,City,Country FROM Employees&#34; Using conn As SqlConnection = New SqlConnection() conn.ConnectionString = ConfigurationManager.ConnectionStrings(&#34;constr1&#34;).ConnectionString Using cmd As SqlCommand = New SqlCommand(sql) cmd.Connection = conn conn.Open() Using sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() employees.Add(New With { .EmployeeId = sdr(&#34;EmployeeID&#34;), .FirstName = sdr(&#34;FirstName&#34;), .LastName = sdr(&#34;LastName&#34;), .City = sdr(&#34;City&#34;), .Country = sdr(&#34;Country&#34;) }) End While End Using conn.Close() End Using Return (New JavaScriptSerializer().Serialize(employees)) End Using End Function End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/syZ6LvE.gif" alt="" width="435" height="320" /></span></strong></p>https://www.aspforums.net:443/Threads/160497/Show-Hide-Button-in-Table-based-on-Role-using-WebService-in-AngularJS/https://www.aspforums.net:443/Threads/160497/Show-Hide-Button-in-Table-based-on-Role-using-WebService-in-AngularJS/Wed, 17 Jul 2019 04:39:00 GMT