Working with $http and json in asp.net angularjs application
In this article we are going to focus on working with $http and json data. In our ASP.NET page, we will first get the data from the Sql Server database and then convert this data into JSON format. We will then display this JSON data in the asp.net page and we will also consume this json data using $http.get in the html page.
In this article we are going to focus on working with $http and json in asp.net angularjs application.
Step 1: Create a Empty Web Application using Visual Studio 2013.
Step 2: From the solution explorer, Add a Html Page to the solution.
Step 3: Add the below code to the Html page. In this code snippet, we are first adding reference to angularjs script file and then adding styles for table,th,tr,td html tags in style element. Then in the div tag we are referencing the javascript customersController function. This function is calling the WorkingwithJson.aspx page of the specified website(http://localhost:43142/) - change as per your requirement, this should be the site from where you are getting the json data. Make sure that customersController function takes two parameters - $scope and $http(last parameter). Now using $http.get we are calling the aspx page and this page returns the response as json data which we are assigning to the names property of the scope object. In the div element in the body of the html page, we are creating the table element with headers and using ng-repeat we are iterating through the names property of the controller. then displaying the Id, Name, Salary of each employee. Notice that we have used the pipe symbol (|) along with the uppercase, which displays the name in uppercase. ng-repeat is performing sort on Name column using "| orderBy : 'Name'" expression.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with tables</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<style>
table,th,td{
border:1px solid grey;
border-collapse:collapse;
padding:5px;
}
table tr:nth-child(odd){
background-color:#f1f1f1;
}
table tr:nth-child(even){
background-color:#ffffff;
}
</style>
</head>
<body>
<div ng-app="" ng-controller="customersController">
<table>
<thead><tr><th>Emp Id</th><th>Name</th><th>Salary</th></tr></thead>
<tr ng-repeat="x in names | orderBy : 'Name'" >
<td>{{x.Id }}</td>
<td>{{x.Name | uppercase}}</td>
<td>{{x.Salary}}</td>
</tr></table>
</div><script type="text/javascript">
function customersController($scope, $http) {
var site = "http://localhost:43142/";
var page = "WorkingwithJson.aspx";
$scope.response = $http.get(site + page).success(function(response) {
$scope.names = response;
});
}
</script>
</body>
</html>
Step 4: Open solution explorer in visual studio and then Add a webform(.aspx page) to the solution. In this page we will return json data. Name this page as WorkingwithJson.aspx.
Step 5: Write the following code in this page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WorkingwithJson.aspx.cs" Inherits="FirstAngularJSApp.WorkingwithJson" %>
<%@import Namespace="System.IO" %>
<%@import Namespace="System.Data" %>
<%@import Namespace="System.Data.SqlClient" %>
<%@import Namespace="System.Collections.Generic" %>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*");
Response.AppendHeader("Content-type", "application/json");
SqlConnection con = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=EmpDB;Integrated Security=True");
SqlDataAdapter adapter = new SqlDataAdapter("select Id,Name,Salary from Emp",con);
DataSet ds = new DataSet();
DataTable dt = new DataTable();
adapter.Fill(ds,"Emp");
dt = ds.Tables[0];
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List
Dictionary
// DataRow dr;
foreach(DataRow dr in dt.Rows)
{
row = new Dictionary
foreach(DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
string jsonData = serializer.Serialize(rows);
Response.Write(jsonData);
con.Close(); %>
Above code connects to the sqlserver database. Gets the data using sqldataadapter and fills this data into the dataset.
then we are iterating through each row of the first table of the dataset and adding these rows to the List&t;Dictionary&t;string, object>> collection.
Now using the JavaScriptSerializer object, serialize it to json format and display it on the page(this is a sample code). Please modify this code as per your requirement. Now when you build the page and browse, it should display the json data. Now copy this url and paste it as the value for the site variable in the html page which we have created earlier.
Step 6: Now when you run the HTML page it should display the result as shown below. Notice that the Names are sorted in ascending order by default and displayed in uppercase format.
Follow