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#.

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.

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: 230 px;
top: 94 px;
position: absolute;
}
#
txtid
{
z - index: 1;
left: 230 px;
top: 54 px;
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.

Output 2

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

Output 3

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

Output 4

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

For more information, download the attached sample application.