Note: This program will work only on Internet Explorer.
In this article I will explain how to connect to a SQL database with TypeScript using web a application and how to show data from the database in a TextBox value in TypeScript.
First I created a database called EmpDetail. Then I am created a table in this 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
{
ShowDB(txtid: number)
{
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 where id="+txtid, connection);
rs.MoveFirst();
var span = document.createElement("span");
span.style.color = "Blue";
span.innerText ="\n"+ " 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("show");
bttn.onclick = function ()
{
var txtid = parseInt((<HTMLTextAreaElement>document.getElementById("txtID")).value);
obj.ShowDB(txtid);
}
};
DataConnectivity_Demo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Show_Record.aspx.cs" Inherits="Show_Record_With_Value.Show_Record" %>
<!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: medium; font-weight: bold; color: #0000FF">
Enter Employee ID
<input id="txtID" type="text" /><br />
<br />
<input id="show" type="button" value="Show Record" style="font-weight: bold" /></div>
</form>
</body>
</html>
app.js
var DataConnectivity = (function () {
function DataConnectivity() { }
DataConnectivity.prototype.ShowDB = function (txtid) {
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 where id=" + txtid, connection);
rs.MoveFirst();
var span = document.createElement("span");
span.style.color = "Blue";
span.innerText = "\n" + " 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("show");
bttn.onclick = function () {
var txtid = parseInt((document.getElementById("txtID")).value);
obj.ShowDB(txtid);
};
};
//@ sourceMappingURL=app.js.map
Output
![Animation1.gif]()
For more information, download the attached sample application.