Post
Ask Question
mohan gowtham

mohan gowtham

  • NA
  • 23
  • 2.6k

showing data in grid using angular js and web apis

Feb 7 2018 6:08 AM
my aps page::::: 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="trail.aspx.cs" Inherits="practice.Pages.trail" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="JavaScript1.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server"></asp:GridView>
<div ng-controller="TestCtrl" ng-init="firstCall()">
<div class="table-responsive com-table">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th width="5%">Customer ID</th>
<th width="15%">Customer Name</th>
<th width="15%">Email</th>
<th width="20%">Mobile No.</th>
<th width="25%">Address</th>
<th width="20%">Registration Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="CU in CustomerList">
<td width="5%">{{CU.CustomerId}}</td>
<td width="15%">{{CU.Name}}</td>
<td width="15%">{{CU.Email}}</td>
<td width="20%">{{CU.PhoneNumber}}</td>
<td width="25%">{{CU.Address}}</td>
<td width="20%">{{CU.Date}}</td>
</tr>
</tbody>
</table>
<div class="collapse" >
<div class="well">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
 
 
 
model class:::
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace practice.Models
{
public class ModelClass
{
public int CustomerId { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Email { get; set; }
public string PhoneNumber { get; set; }
public string Date { get; set; }
}
}
 
 
Controller page
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace practice.Controller
{
[RoutePrefix("NewRoute")]
public class taskController : ApiController
{
public class GetAll: ModelClass
{
}
[Route("getDataForAngularGrid")]
[HttpGet]
public List<GetAll> getDataForAngularGrid(HttpRequestMessage requests)
{
DataTable dt = new DataTable();
List<GetAll> list = new List<GetAll>();
try
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
con.Open();
var query = "select * from SP_getAllData";
SqlCommand com = new SqlCommand(query, con);
//com.CommandType = CommandType.StoredProcedure;
com.ExecuteNonQuery();
con.Close();
SqlDataAdapter adptr = new SqlDataAdapter(com);
adptr.Fill(dt);
for (int i = 0; i < dt.Rows.Count; i++)
{
GetAll GetAll = new GetAll();
GetAll.CustomerId = Convert.ToInt32(dt.Rows[i]["Customerid"]);
GetAll.Name = dt.Rows[i]["name"].ToString();
GetAll.Address = dt.Rows[i]["address"].ToString();
GetAll.Email = dt.Rows[i]["email"].ToString();
GetAll.PhoneNumber = dt.Rows[i]["phno"].ToString();
GetAll.Date = dt.Rows[i]["date"].ToString();
list.Add(GetAll);
}
}
catch(Exception ex)
{
}
return list;
}
}
}
 
 
i copied it from someone on c# corner but i cant understand where he is calling the controller page in asp page.
 
 
i wrote the following code in .cs file using gridview tag it is giving me result,but i want the data to be displayed using angular js and web apis
 
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace practice.Pages
{
public partial class trail : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
con.Open();
var query = "select * from SP_getAllData";
SqlCommand com = new SqlCommand(query, con);
SqlDataReader sdr = com.ExecuteReader();
//com.CommandType = CommandType.StoredProcedure;
//com.ExecuteNonQuery();
con.Close();
SqlDataAdapter adptr = new SqlDataAdapter(com);
adptr.Fill(dt);
if (dt != null)
{
GridView1.DataSource = dt;
GridView1.DataBind();
}
else
{
Response.Write("Fail");
}
}
}
}
 
 
 

Answers (1)