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: 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&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

  

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.