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
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
class DataConnectivity
{
LoadDB()
{
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from emp", connection);
rs.MoveFirst();
var span = document.createElement("span");
span.style.color = "Blue";
span.innerText = " ID " + " Name " + " Salary";
document.body.appendChild(span);
while (!rs.eof)
{
var span = document.createElement("span");
span.style.color = "green";
span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2);
document.body.appendChild(span);
rs.MoveNext();
}
rs.close();
connection.close();
}
}
window.onload = () =>
{
var obj = new DataConnectivity();
var bttn = <HTMLButtonElement>document.getElementById("ShowData");
bttn.onclick = function ()
{
obj.LoadDB();
}
};
DataConnectivity_Demo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataConnectivity_Demo.aspx.cs" Inherits="Data_Connectivity.DataConnectivity_Demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="app.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="font-size: large; font-weight: bold">
Click on button for show data<br />
<br />
<input id="ShowData" type="button" value="Show Data" style="font-weight: bold" />
</div>
</form>
</body>
</html>
app.js
var DataConnectivity = (function () {
function DataConnectivity() { }
DataConnectivity.prototype.LoadDB = function () {
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=*****;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from emp", connection);
rs.MoveFirst();
var span = document.createElement("span");
span.style.color = "Blue";
span.innerText = " ID " + " Name " + " Salary";
document.body.appendChild(span);
while(!rs.eof) {
var span = document.createElement("span");
span.style.color = "green";
span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2);
document.body.appendChild(span);
rs.MoveNext();
}
rs.close();
connection.close();
};
return DataConnectivity;
})();
window.onload = function () {
var obj = new DataConnectivity();
var bttn = document.getElementById("ShowData");
bttn.onclick = function () {
obj.LoadDB();
};
};
//@ sourceMappingURL=app.js.map
Output
![]()
![Final-Result.jpg]()
For more information, download the attached sample application.