Angular JS , asmx File and Sql Server Database

AngularJs Connection with Database....

AngularJs is client Side script . So For database Connectivity  , You will required  server side script like  ASP , PHP , JSP and so on.... 

Here We are using web services . web services work as middle ware between front end and back end.



.asmx File


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Runtime.Serialization;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Configuration;
using System.Data.Sql;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script;
namespace Angularjs
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
[System.ComponentModel.ToolboxItem(false)]
public class WebService : System.Web.Services.WebService
{
public WebService()
{
}
string conn = ConfigurationManager.ConnectionStrings["XXXXXX"].ConnectionString;
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public void HelloWorld()
{
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Clear();
Context.Response.ContentType = "application/json";
HelloWorldData data = new HelloWorldData();
data.Message = ConvertDataTableTojSonString(GetDataTable());
Context.Response.Write(js.Serialize(data.Message));
}
public class HelloWorldData
{
public String Message;
}
public DataTable GetDataTable()
{
DataTable dataTable = new DataTable();
SqlConnection con= new SqlConnection (conn);
SqlCommand cmd = new SqlCommand("pro_select_all_active_user",con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd);
DataSet dataSet = new DataSet();
dataAdapter.Fill(dataSet);
con.Close();
return dataSet.Tables[0];
}
public String ConvertDataTableTojSonString(DataTable dataTable)
{ System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List> tableRows = new List>();
Dictionary row;
foreach (DataRow dr in dataTable.Rows)
{ row = new Dictionary();
foreach (DataColumn col in dataTable.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
tableRows.Add(row);
}
return serializer.Serialize(tableRows);
}
}
}

HTML FILE


<!DOCTYPE html>
<title>consume JSON web service</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<form>
<div>
<div ng-controller="questionsController">
search:<input type="text" ng-model="search" />
<table>
<tr ng-repeat="i in questions | filter:search">
<td>
{{i.name}}
</td>
<td>
{{i.add}}
</td>
</tr>
</table>
</div>
<br /> </div>
<script>
var app = angular.module('serviceConsumer', []);
app.controller('questionsController', function ($scope, $http) {
var url = "WebService.asmx/Helloworld";
$http.get(url)
.success(function (data) {
var myjson = JSON.parse(data);
$scope.questions = JSON.parse(myjson);
})
.error(function (data) {
alert(data);
})
})
</script>
</form>
</body> </html>


Share on facebook Google Twitter

Web Engineers here !


Grideb is the group of engineers who provide excellent solution for domain scenario with experienced, talented and high skilled engineers. We work hard to reduce complication of user interface and improve better quality of service.

-- Chief Executive Officer, GRIDEB SERVICES


www.grideb.com

Contact Us

GRIDEB SERVICES
Office-1,FF ,One Square Office Mall
Shaktikhand-III,Indirapuram,Ghaziabad
Uttar Pradesh 201004 (INDIA)
P: +91 (120) 260-6044
M: +91 90-1300-3421
Email ID
info@grideb.com




Grideb Services 2013-2014