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.Bind (Populate) ng-grid from Database using AngularJS in ASP.Net<p>Hi&nbsp;<a class="username" rel="rani">rani,</a></p> <p>Check this example. Now please take its reference and correct your code.</p> <p><span style="text-decoration: underline;"><strong>Database</strong></span></p> <p>For this example I have used of 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> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head id=&#34;Head1&#34; runat=&#34;server&#34;&gt; &lt;title&gt;ng-grid&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-2.2.3.js&#34;&gt;&lt;/script&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;link rel=&#34;stylesheet&#34; href=&#34;//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;ngGrid&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $http) { $http.post(&#34;Default.aspx/GetEmployees&#34;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { $scope.Employees = response.data.d; }, function error(response) { alert(response.responseText); }); $scope.GridOptions = { data: &#39;Employees&#39;, enablePinning: false, columnDefs: [{ field: &#34;Id&#34;,width: 50, pinned: true }, { field: &#34;Name&#34;, width: 150 }, { field: &#34;City&#34;, width: 100 }, { field: &#34;Country&#34;, width: 100}] }; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div ng-grid=&#34;GridOptions&#34; style=&#34;width: 400px; height: 500px&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Configuration; using System.Data.SqlClient; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Configuration Imports System.Data.SqlClient Imports System.Web.Services</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[WebMethod] public static List&lt;Employee&gt; GetEmployees() { List&lt;Employee&gt; employees = new List&lt;Employee&gt;(); string conString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; string query = &#34;SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees&#34;; using (SqlConnection con = new SqlConnection(conString)) { using (SqlCommand cmd = new SqlCommand(query)) { cmd.Connection = con; con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { employees.Add(new Employee { Id = Convert.ToInt32(sdr[&#34;EmployeeID&#34;]), Name = sdr[&#34;FirstName&#34;].ToString() + &#34; &#34; + sdr[&#34;LastName&#34;].ToString(), City = sdr[&#34;City&#34;].ToString(), Country = sdr[&#34;Country&#34;].ToString(), }); } con.Close(); } } return employees; } public class Employee { public int Id { get; set; } public string Name { get; set; } public string City { get; set; } public string Country { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; Public Shared Function GetEmployees() As List(Of Employee) Dim employees As List(Of Employee) = New List(Of Employee)() Dim conString As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Dim query As String = &#34;SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees&#34; Using con As SqlConnection = New SqlConnection(conString) Using cmd As SqlCommand = New SqlCommand(query) cmd.Connection = con con.Open() Dim sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() employees.Add(New Employee With { .Id = Convert.ToInt32(sdr(&#34;EmployeeID&#34;)), .Name = sdr(&#34;FirstName&#34;).ToString() &amp; &#34; &#34; + sdr(&#34;LastName&#34;).ToString(), .City = sdr(&#34;City&#34;).ToString(), .Country = sdr(&#34;Country&#34;).ToString() }) End While con.Close() End Using End Using Return employees End Function Public Class Employee Public Property Id As Integer Public Property Name As String Public Property City As String Public Property Country As String 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/UxWLoym.jpg" alt="" width="440" height="375" /></span></strong></p> <p>For more details refer below link.</p> <p><a href="https://www.c-sharpcorner.com/UploadFile/dev4634/using-ng-grid-in-angular-ui-pages/">https://www.c-sharpcorner.com/UploadFile/dev4634/using-ng-grid-in-angular-ui-pages/</a></p>https://www.aspforums.net:443/Threads/138156/Bind-Populate-ng-grid-from-Database-using-AngularJS-in-ASPNet/https://www.aspforums.net:443/Threads/138156/Bind-Populate-ng-grid-from-Database-using-AngularJS-in-ASPNet/Wed, 15 May 2019 05:44:40 GMT