Update record in Database using textbox in TypeScript

Note: This program will work only with Internet Explorer.

In this article I will explain how to update a record from a database using a TextBox in TypeScript.

First I created the database EmpDetail and 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 in 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#.

 application-name.jpg

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

Step 2

The project will then be created and 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 and aspx files.

 solution-explorer.jpg

Coding

UpdateRecord.ts

class Update_Record

{

    update_record()

    {

        var txtid =(<HTMLTextAreaElement>document.getElementById('txtid')).value;

        var txtname = (<HTMLTextAreaElement>document.getElementById('txtname')).value;

        if (txtid.length != 0 && txtname.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("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid, connection);

            alert("Update Record Successfuly");

           

            connection.close();

        }

        else

        {

            alert("Please textbox's value");

        }

    }

 

    ShowAll()

    {

        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();

    }

 

}

window.onload = () =>

{

    var bttnupdate = document.getElementById("update");

    var bttnshow = document.getElementById("showall");

    var obj = new Update_Record();

    bttnshow.onclick = function ()

    {

        obj.ShowAll();

    }

    bttnupdate.onclick = function ()

    {

        obj.update_record();

    }

};

 

Update_Record.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Update_Record.aspx.cs" Inherits="Update_Record_using_textbox.Update_Record" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

     <style type="text/css">

        #txtname

        {

            z-index: 1;

            left: 230px;

            top: 94px;

            position: absolute;

        }

        #txtid

        {

            z-index: 1;

            left: 230px;

            top: 54px;

            position: absolute;

        }

    </style>

    <script src="UpdateRecord.js"></script>

</head>

 <body style="height: 89px">

     <form name="form1" runat="server">

    <div id="show"

        style="font-size: x-large; font-weight: bold; height: 185px; color: #0000FF;">

       Update Employee Record<p style="font-size: medium; color: #000000;">

    Enter Employee ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input id="txtid" type="text" /></p>

        <p style="font-size: medium; color: #000000;">

            Update Employee Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>

        <input id="txtname" type="text" /><p>

    &nbsp;<input id="update" type="button" value="Update" style="font-weight: bold" />&nbsp;

    <input id="showall" type="button" value="Show All Record" style="font-weight: bold" /></p>

    </div>

         <p style="height: 1px">

             &nbsp;</p>

       

    </form>

    </body>

</html>
 

UpdateRecord.js

var Update_Record = (function () {

    function Update_Record() { }

    Update_Record.prototype.update_record = function () {

        var txtid = (document.getElementById('txtid')).value;

        var txtname = (document.getElementById('txtname')).value;

        if(txtid.length != 0 && txtname.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("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid, connection);

            alert("Update Record Successfuly");

            connection.close();

        } else {

            alert("Please textbox's value");

        }

    };

    Update_Record.prototype.ShowAll = function () {

        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();

    };

    return Update_Record;

})();

window.onload = function () {

    var bttnupdate = document.getElementById("update");

    var bttnshow = document.getElementById("showall");

    var obj = new Update_Record();

    bttnshow.onclick = function () {

        obj.ShowAll();

    };

    bttnupdate.onclick = function () {

        obj.update_record();

    };

};

//@ sourceMappingURL=UpdateRecord.js.map

 

Output 1

Click on the "Show All Records" button.


  click-on-showall.jpg


Output 2

Enter an employee id that you want to update into the TextBox and then enter employee name to be updated in the TextBox. Then click on the "Update" button.

 click-on-update.jpg


Output 3

After updating the record, click on the "Show All Records" button. You will see that the record was updated successfully.

 after-updation.jpg


Output 4

If you will click on "Update" button without entering a value in the TextBox then it will show the error.


error-msg.jpg


For more information, download the attached sample application.