Show Data Using Textbox in TypeScript

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 the web application and how to show data from the database in a TextBox value in TypeScript.

First I created a database called EmpDetail. Then I have 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

For more information, download the attached sample application.