How To Delete Record From Database Using Textbox in TypeScript

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: 264 px;
}
#
ShowRecord
{
width: 67 px;
z - index: 1;
left: 53 px;
top: 167 px;
position: absolute;
height: 0 px;
}
#
showall
{
z - index: 1;
left: 175 px;
top: 165 px;
position: absolute;
}
#
delete {
z - index: 1;
left: 58 px;
top: 164 px;
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 & nbsp; & nbsp;
<
input id = "txtid"
type = "text" / > & nbsp; & nbsp;
<
input id = "delete"
type = "button"
value = "Delete" / > & nbsp;
<
input id = "showall"
type = "button"
value = "Show All Record" / > < table style = "width: 100%; height: 61px;" >
<
tr >
<
td > & nbsp; < /td>
<
td > & nbsp; < /td>
<
td > & nbsp; < /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