Show Whether a Textbox Value Exists in Database Using TypeScript

Note: This program will work only with Internet Explorer.

In this article, I explain how to show whether a TextBox value exists in the database using TypeScript.

First, I created a database "EmpSalary_Info". Then I created a table in this database.

Query Code

CREATE TABLE [dbo].[EmpSalary_Info](
[id] [int] NULL,
[name] [varchar](50) NULL,
[salary] [int] NULL
) ON [PRIMARY]

Now insert some data into the "EmpSalary_Info" table. Then use the following procedure.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give the name of your application as "Exit_value" and then click "Ok".

Step 2

After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and CSS files and the aspx page.

Complete Program

ExitValue.ts

class Exit_Value
{
ShowDB()
{
var txtid = ( < HTMLTextAreaElement > document.getElementById('txtid')).value;
if (txtid.length != 0)
{
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from EmpSalary_Info where EmpId=" + txtid, 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 = "Red";
span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2);
document.body.appendChild(span);
rs.MoveNext();
alert("Employee exit in Database");
}
rs.close();
connection.close();
} else {
alert("Please Enter Employee Id In TextBox");
}
}
}
window.onload = () =>
{
var showbttn = document.getElementById("ShowRecord");
showbttn.onclick = function()
{
var obj = new Exit_Value();
obj.ShowDB();
}
};

Default.html

<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="ExitValue.js"></script>
<style type="text/css">
#main
{
height: 264px;
}
</style>
</head>
<body>
<div id="show" style="font-size: x-large; font-weight: bold; height: 142px; color: #993333;">
Employee Details in TypeScript
<p style="font-size: medium; color: #000000;">
Enter Employee Id
<input id="txtid" type="text" />
</p>
<p>
<input id="ShowRecord" type="button" value="Check value" style="font-weight: bold" />
</p>
</div>
</body>
</html>

ExitValue.js

var Exit_Value = (function() {
function Exit_Value() {}
Exit_Value.prototype.ShowDB = function() {
var txtid = (document.getElementById('txtid')).value;
if (txtid.length != 0) {
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from EmpSalary_Info where EmpId=" + txtid, 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 = "Red";
span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2);
document.body.appendChild(span);
rs.MoveNext();
alert("Employee exit in Database");
}
rs.close();
connection.close();
} else {
alert("Please Enter Employee Id In TextBox");
}
};
return Exit_Value;
})();
window.onload = function() {
var showbttn = document.getElementById("ShowRecord");
showbttn.onclick = function() {
var obj = new Exit_Value();
obj.ShowDB();
};
};
//@ sourceMappingURL=ExitValue.js.map

Output 1

Enter an employee id and then click on the "Show" button.

Output 2

We are not entering a value into the TextBox and we click on the "Show" button.

For more information, download the attached sample application.