Part consuming ASP. NET Web Service in AngularJS using $http

Last Update:2016-04-24 Source: Internet

Author: User

Tags connectionstrings

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Here's what we want
1. Create an ASP. NET Web service. This Web service retrieves the data from SQL Server database table, returns it in JSON formt.
2. Call the Web Service using AngularJS and display employee data on the Web page

Step 1: Create SQL Server table and insert employee data

Create Tabletblemployees (Idint Primary Key Identity, Namenvarchar( -), Gendernvarchar(Ten), Salaryint)Go Insert  intoTblemployeesValues('Ben','Male',55000)Insert  intoTblemployeesValues('Sara','Female',68000)Insert  intoTblemployeesValues('Mark','Male',57000)Insert  intoTblemployeesValues('Pam','Female',53000)Insert  intoTblemployeesValues('Todd','Male',60000)Go

Step 2: Create new Empty ASP. NET Web Application project. Name it Demo.

Step 3: Include the following settings in Web. config file.

<?xml version="1.0"encoding="Utf-8"?><configuration> <connectionStrings> <add name="DBCS"connectionString="server=.; Database=sampledb; Integrated SECURITY=SSPI"/> </connectionStrings> <system.web> <webServices> <protocols> <add name="HttpGet"/> </protocols> </webServices> </system.web></configuration>

Step 4: ADD a class file to the project. Name it Employee.cs. Copy and paste the following code.

namespacedemo{ Public classEmployee { Public intID {Get;Set; }  Public stringName {Get;Set; }  Public stringGender {Get;Set; }  Public intSalary {Get;Set; } }}

Step 5: Add a new WebService (ASMX). Name it employeeservice.asmx. Copy and paste the following code.

usingSystem;usingSystem.Collections.Generic;usingSystem.Configuration;usingSystem.Data.SqlClient;usingSystem.Web.Script.Serialization;usingSystem.Web.Services;namespacedemo{[WebService (Namespace="http://tempuri.org/")] [WebServiceBinding (ConformsTo=Wsiprofiles.basicprofile1_1)] [System.ComponentModel.ToolboxItem (false)] [System.Web.Script.Services.ScriptService] Public classEmployeeService:System.Web.Services.WebService {[WebMethod] Public voidgetallemployees () {List<Employee> listemployees =NewList<employee>(); stringCS = configurationmanager.connectionstrings["DBCS"].            ConnectionString; using(SqlConnection con =NewSqlConnection (CS)) {SqlCommand cmd=NewSqlCommand ("Select * from Tblemployees", con); Con.                Open (); SqlDataReader RDR=cmd.                ExecuteReader ();  while(RDR. Read ()) {Employee Employee=NewEmployee (); Employee.id= Convert.ToInt32 (rdr["Id"]); Employee.Name= rdr["Name"].                    ToString (); Employee.gender= rdr["Gender"].                    ToString (); Employee.salary= Convert.ToInt32 (rdr["Salary"]);                Listemployees.add (employee); }} JavaScriptSerializer js=NewJavaScriptSerializer (); Context.Response.Write (JS.        Serialize (listemployees)); }    }}

Step 6: add A new folder to the project. Name it Scripts. Download angular.js script file from http://angularjs.org, and past it in Scripts folder.

Step 7: add A new JavaScript file to the Scripts folder. Name it script.js . Copy and paste the following code.

// /<reference path= "Angular.min.js"/> var app = angular        . Module ("MyModule", [])        . Controller(function  ($ Scope, $http) {             $http. Get ("Employeeservice.asmx/getallemployees")                 . Then (function  (response) {                     = response.data;                 });        });

Step 8: Add a new stylesheet to the project. Name it styles.css. Copy and paste the following styles in it.

 body  { font-family :  Arial ;}  table  { Border-collapse :  collapse ;}  TD  { border :  1px solid black ;  padding :  5px ;}  th  { border :  1px solid black ;  padding :  5px ;  Text-align :  left ;}

Step 9: Add an HTML page to the ASP. Copy and paste the following HTML and Angular code

<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head>    <title></title>    <Scriptsrc= "Scripts/angular.js"></Script>    <Scriptsrc= "Scripts/script.js"></Script>    <Linkhref= "Styles.css"rel= "stylesheet" /></Head><BodyNg-app= "MyModule">    <DivNg-controller= "Mycontroller">        <Table>            <thead>                <TR>                    <th>Id</th>                    <th>Name</th>                    <th>Gender</th>                    <th>Salary</th>                </TR>            </thead>            <tbody>                <TRng-repeat= "Employee in Employees">                    <TD>{{Employee.id}}</TD>                    <TD>{{Employee.Name}}</TD>                    <TD>{{Employee.gender}}</TD>                    <TD>{{Employee.salary}}</TD>                </TR>            </tbody>        </Table>    </Div></Body></HTML>

Part consuming ASP. NET Web Service in AngularJS using $http

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More