Using ASP.Net C# class object in Javascript and Web Service

Using ASP.Net C# class object in Javascript and Web Service

Download sample

Introduction

This sample demonstrates how you can use an an ordinary ASP.Net C# class instance as an object in Javascript. We can expose C# object to Javascript using web services. This sample first gets employee details from MS Access database using ADO.Net. Then use it to initiate Employee object and return it in a web method. Download attached sample and run it with Visual Studio 2010.

Sourcecode Explanation

• Employee.cs contains declaration for Employee class.
• EmployeeWebService.asmx.cs is a webservice file. It contains Web Methods that are used to initiate Employee object and return it.
  
  01.//Initiate connection string in constructoor

  02.public EmployeeWebService()

  03.{

  04.//Get server path for MS Access Database

  05.sDBPath = Server.MapPath(".") + @"\App_Data\MSAccessDB.mdb";

  06. 

  07.//Use server path to build connection string for access database.

  08.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + sDBPath + ";";

  09.}

  10. 

  11.//Following method takes employee id as parameter and returns employee object from database.

  12.[WebMethod]

  13.public Employee GetOneEmployee(int EmployeeId)

  14.{

  15.//Write query to get employee using employee id

  16.OleDbDataAdapter ADAP = new OleDbDataAdapter("select * from Employees where EmployeeId=" + EmployeeId.ToString(), ConnectionString);

  17.DataSet DS = new DataSet();

  18.ADAP.Fill(DS);

  19.DataTable DTEmployees = DS.Tables[0];

  20. 

  21.//Initiate Employee object using returned employee from database.

  22.Employee emp = new Employee();

  23.if (DTEmployees.Rows.Count > 0)

  24.{

  25.emp.EmployeeId = int.Parse(DTEmployees.Rows[0]["EmployeeId"].ToString());

  26.emp.EmployeeName = DTEmployees.Rows[0]["EmployeeName"].ToString();

  27.}

  28.return emp;

  29.}   

  30. 

  31.//Following method gets all employees from database and returns them as ArrayList object.

  32.[WebMethod]

  33.public ArrayList GetAllEmployees()

  34.{

  35.ArrayList Employees = new ArrayList();

  36.OleDbDataAdapter ADAP = new OleDbDataAdapter("select * from Employees", ConnectionString);

  37.DataSet DS = new DataSet();

  38.ADAP.Fill(DS);

  39.DataTable DTEmployees = DS.Tables[0];

  40.for (int i = 0; i < DTEmployees.Rows.Count; i++)

  41.{

  42.Employee emp = new Employee();

  43.emp.EmployeeId = int.Parse(DTEmployees.Rows[i]["EmployeeId"].ToString());

  44.emp.EmployeeName = DTEmployees.Rows[i]["EmployeeName"].ToString();

  45.Employees.Add(emp);

  46.}

  47. 

  48.return Employees;

  49.}
• Above web methods are used in Javascript inside Default.aspx page source. In order to consume web service in Javascript, we need to add reference to web service in Default.aspx source.
  1.<asp:ScriptManager ID="ScriptManager1" runat="server">

  2.<Services>

  3.<asp:ServiceReference Path="EmployeeWebService.asmx" />

  4.</Services>

  5.</asp:ScriptManager>
• Now call web service methods in Javascript code declared in Default.aspx.
  view sourceprint?

  01.//Pass function name as parameter. This function will be called once web service call is finished.

  02.function GetAllEmployees() {

  03.EmployeeWebService.GetAllEmployees(GotAllEmployees);

  04.}

  05. 

  06.//Pass function name as parameter. This function will be called once web service call is finished.

  07.function GetOneEmployee() {

  08.EmployeeWebService.GetOneEmployee(CurrentEmployee,GotOneEmployee);

  09.}

  10. 

  11.//Once web service call is finished, following function fires and it returns employees as array of Employee class object.

  12.function GotAllEmployees(employees) {

  13.for (var i = 0; i < employees.length; i++) {

  14.InsertEmployee(employees[i].EmployeeId, employees[i].EmployeeName);

  15.}

  16.}

  17. 

  18.//Once web service call is finished, following function fires and it returns Employee class object.

  19.function GotOneEmployee(employee) {

  20.InsertEmployee(employee.EmployeeId, employee.EmployeeName);

  21.CurrentEmployee++;

Summary

Using web service methods combined with Javascript can be very powerful in developing feature rich web applications.