Post
Ask Question

How To Connect to a Database In TypeScript

Introduction 

 
Note: This program will work only on Internet Explorer.
 
In this article, I will explain how to connect to a SQL database with TypeScript in a web application and how to get data from the database in TypeScript. First I created a database "EmpDetail". Then I created a table in the database. 
 

Query Code

  1. CREATE TABLE[dbo]. [emp]([id][int] NULL, [name][varchar](50) NULL, [salary][int] NULL) ON[PRIMARY]  
Now Insert some Data in the emp table.
 

Complete Program

 
aap.ts
  1. class DataConnectivity  
  2. {  
  3.  LoadDB()  
  4.  {  
  5.   var connection = new ActiveXObject("ADODB.Connection");  
  6.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";  
  7.   connection.Open(connectionstring);  
  8.   var rs = new ActiveXObject("ADODB.Recordset");  
  9.   rs.Open("select * from emp", connection);  
  10.   rs.MoveFirst();  
  11.   var span = document.createElement("span");  
  12.   span.style.color = "Blue";  
  13.   span.innerText = "  ID " + "  Name " + "   Salary";  
  14.   document.body.appendChild(span);  
  15.   while (!rs.eof)  
  16.   {  
  17.    var span = document.createElement("span");  
  18.    span.style.color = "green";  
  19.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  20.    document.body.appendChild(span);  
  21.    rs.MoveNext();  
  22.   }  
  23.   rs.close();  
  24.   connection.close();  
  25.  }  
  26. }  
  27. window.onload = () =>  
  28.  {  
  29.   var obj = new DataConnectivity();  
  30.   var bttn = < HTMLButtonElement > document.getElementById("ShowData");  
  31.   bttn.onclick = function()  
  32.   {  
  33.    obj.LoadDB();  
  34.   }  
  35.  };  
DataConnectivity_Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataConnectivity_Demo.aspx.cs" Inherits="Data_Connectivity.DataConnectivity_Demo" %>  
  2.  <  
  3.  !DOCTYPE html >  
  4.  <  
  5.  html xmlns = "http://www.w3.org/1999/xhtml" >    
  6.  <  
  7.  head runat = "server" >   
  8.  <  
  9.  title > < /title>  
  10.  <  
  11.  script src = "app.js" > < /script>  
  12.  <  
  13.  /head>  
  14.  <  
  15.  body >  
  16.  <  
  17.  form id = "form1"  
  18. runat = "server" >  
  19.  <  
  20.  div style = "font-size: large; font-weight: bold" >  
  21.  Click on button  
  22. for show data < br / >  
  23.  <  
  24.  br / >  
  25.  <  
  26.  input id = "ShowData"  
  27. type = "button"  
  28. value = "Show Data"  
  29. style = "font-weight: bold" / >  
  30.  <  
  31.  /div>  
  32.  <  
  33.  /form>  
  34.  <  
  35.  /body>  
  36.  <  
  37.  /html>  
app.js
  1. var DataConnectivity = (function() {  
  2.  function DataConnectivity() {}  
  3.  DataConnectivity.prototype.LoadDB = function() {  
  4.   var connection = new ActiveXObject("ADODB.Connection");  
  5.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=*****;Provider=SQLOLEDB";  
  6.   connection.Open(connectionstring);  
  7.   var rs = new ActiveXObject("ADODB.Recordset");  
  8.   rs.Open("select * from emp", connection);  
  9.   rs.MoveFirst();  
  10.   var span = document.createElement("span");  
  11.   span.style.color = "Blue";  
  12.   span.innerText = "  ID " + "  Name " + "   Salary";  
  13.   document.body.appendChild(span);  
  14.   while (!rs.eof) {  
  15.    var span = document.createElement("span");  
  16.    span.style.color = "green";  
  17.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  18.    document.body.appendChild(span);  
  19.    rs.MoveNext();  
  20.   }  
  21.   rs.close();  
  22.   connection.close();  
  23.  };  
  24.  return DataConnectivity;  
  25. })();  
  26. window.onload = function() {  
  27.  var obj = new DataConnectivity();  
  28.  var bttn = document.getElementById("ShowData");  
  29.  bttn.onclick = function() {  
  30.   obj.LoadDB();  
  31.  };  
  32. };  
  33. //@ sourceMappingURL=app.js.map  
Output
Final-Result.jpg
 
For more information, download the attached sample application.
 

Query Code

  1. CREATE TABLE[dbo]. [emp]([id][int] NULL, [name][varchar](50) NULL, [salary][int] NULL) ON[PRIMARY]  
Now Insert some Data in the emp table.
 

Complete Program

 
aap.ts
  1. class DataConnectivity  
  2. {  
  3.  LoadDB()  
  4.  {  
  5.   var connection = new ActiveXObject("ADODB.Connection");  
  6.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";  
  7.   connection.Open(connectionstring);  
  8.   var rs = new ActiveXObject("ADODB.Recordset");  
  9.   rs.Open("select * from emp", connection);  
  10.   rs.MoveFirst();  
  11.   var span = document.createElement("span");  
  12.   span.style.color = "Blue";  
  13.   span.innerText = "  ID " + "  Name " + "   Salary";  
  14.   document.body.appendChild(span);  
  15.   while (!rs.eof)  
  16.   {  
  17.    var span = document.createElement("span");  
  18.    span.style.color = "green";  
  19.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  20.    document.body.appendChild(span);  
  21.    rs.MoveNext();  
  22.   }  
  23.   rs.close();  
  24.   connection.close();  
  25.  }  
  26. }  
  27. window.onload = () =>  
  28.  {  
  29.   var obj = new DataConnectivity();  
  30.   var bttn = < HTMLButtonElement > document.getElementById("ShowData");  
  31.   bttn.onclick = function()  
  32.   {  
  33.    obj.LoadDB();  
  34.   }  
  35.  };  
DataConnectivity_Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataConnectivity_Demo.aspx.cs" Inherits="Data_Connectivity.DataConnectivity_Demo" %>  
  2.  <  
  3.  !DOCTYPE html >  
  4.  <  
  5.  html xmlns = "http://www.w3.org/1999/xhtml" >    
  6.  <  
  7.  head runat = "server" >   
  8.  <  
  9.  title > < /title>  
  10.  <  
  11.  script src = "app.js" > < /script>  
  12.  <  
  13.  /head>  
  14.  <  
  15.  body >  
  16.  <  
  17.  form id = "form1"  
  18. runat = "server" >  
  19.  <  
  20.  div style = "font-size: large; font-weight: bold" >  
  21.  Click on button  
  22. for show data < br / >  
  23.  <  
  24.  br / >  
  25.  <  
  26.  input id = "ShowData"  
  27. type = "button"  
  28. value = "Show Data"  
  29. style = "font-weight: bold" / >  
  30.  <  
  31.  /div>  
  32.  <  
  33.  /form>  
  34.  <  
  35.  /body>  
  36.  <  
  37.  /html>  
app.js
  1. var DataConnectivity = (function() {  
  2.  function DataConnectivity() {}  
  3.  DataConnectivity.prototype.LoadDB = function() {  
  4.   var connection = new ActiveXObject("ADODB.Connection");  
  5.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=*****;Provider=SQLOLEDB";  
  6.   connection.Open(connectionstring);  
  7.   var rs = new ActiveXObject("ADODB.Recordset");  
  8.   rs.Open("select * from emp", connection);  
  9.   rs.MoveFirst();  
  10.   var span = document.createElement("span");  
  11.   span.style.color = "Blue";  
  12.   span.innerText = "  ID " + "  Name " + "   Salary";  
  13.   document.body.appendChild(span);  
  14.   while (!rs.eof) {  
  15.    var span = document.createElement("span");  
  16.    span.style.color = "green";  
  17.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  18.    document.body.appendChild(span);  
  19.    rs.MoveNext();  
  20.   }  
  21.   rs.close();  
  22.   connection.close();  
  23.  };  
  24.  return DataConnectivity;  
  25. })();  
  26. window.onload = function() {  
  27.  var obj = new DataConnectivity();  
  28.  var bttn = document.getElementById("ShowData");  
  29.  bttn.onclick = function() {  
  30.   obj.LoadDB();  
  31.  };  
  32. };  
  33. //@ sourceMappingURL=app.js.map  
Output
Final-Result.jpg
 
For more information, download the attached sample application.


Similar Articles