Note: This program will work only on Internet Explorer.
In this article I will explain how to delete a record from a database using a TextBox in 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.
Complete Program
Delete_Record.ts
class Delete_record
{
ShowAllRecord()
{
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 ", 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();
}
DeleteRecord()
{
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("delete from EmpSalary_Info where EmpId=" + txtid, connection);
alert("Delete Record Successfuly");
txtid = " ";
connection.close();
}
else
{
alert("Please Enter Employee Id in TextBox");
}
}
}
window.onload = () =>
{
var obj = new Delete_record();
var bttndelete = document.getElementById("delete");
var bttnshowall = document.getElementById("showall");
bttnshowall.onclick = function ()
{
obj.ShowAllRecord();
}
bttndelete.onclick = function ()
{
obj.DeleteRecord();
}
};
Delete_Record_From_Database.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Delete_Record_From_Database.aspx.cs" Inherits="Delete_Record.Delete_Record_From_Database" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Delete_Record.js" type="text/javascript"></script>
<style type="text/css">
#main
{
height: 264px;
}
#ShowRecord
{
width: 67px;
z-index: 1;
left: 53px;
top: 167px;
position: absolute;
height: 0px;
}
#showall
{
z-index: 1;
left: 175px;
top: 165px;
position: absolute;
}
#delete {
z-index: 1;
left: 58px;
top: 164px;
position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2 style="color:blue">Delete Record From Database In TypeScript</h2>
</form>
<div id="show"
style="font-size: x-large; font-weight: bold; height: 135px; color: #009999;">
Delete Employee Record<p style="font-size: medium; color: #000000;">
Enter Employee Id
<input id="txtid" type="text" />
<input id="delete" type="button" value="Delete"/>
<input id="showall" type="button" value="Show All Record" /><table style="width: 100%; height: 61px;">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</p>
</div>
</body>
</html>
Delete_Record.js
var Delete_record = (function () {
function Delete_record() { }
Delete_record.prototype.ShowAllRecord = function () {
alert("dfdf");
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 ", 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();
};
Delete_record.prototype.DeleteRecord = 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("delete from EmpSalary_Info where EmpId=" + txtid, connection);
alert("Delete Record Successfuly");
txtid = " ";
connection.close();
} else {
alert("Please Enter Employee Id in TextBox");
}
};
return Delete_record;
})();
window.onload = function () {
var obj = new Delete_record();
var bttndelete = document.getElementById("delete");
var bttnshowall = document.getElementById("showall");
bttnshowall.onclick = function () {
obj.ShowAllRecord();
};
bttndelete.onclick = function () {
obj.DeleteRecord();
};
};
//@ sourceMappingURL=Delete_Record.js.map
Output 1
![First-image.jpg]()
Click on the "Show All Record" button.
![Click-on-show-button.jpg]()
Output 2
Enter the employee id into the TextBox that you want to delete from the database. Then click on the "Delete" button.
![click-on-delete-button.jpg]()
Output 3
After deleting the record, click on the "Show All Record" button. You will see that the record was deleted successfully.
![again-click-on-show-button.jpg]()
Output 4
If you will click on the Delete button without entering any value into the TextBox then it will show the error.
![without-value-enter-click-delete-button.jpg]()
For more information, download the attached sample application.