Post
Ask Question

Update record in Database using textbox in TypeScript

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

  1. CREATE TABLE [dbo].[EmpSalary_Info](  
  2.       [id] [int] NULL,  
  3.       [name] [varchar](50) NULL,  
  4.       [salary] [int] NULL  
  5. ) 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
  1. class Update_Record  
  2. {  
  3.  update_record()  
  4.  {  
  5.   var txtid = ( < HTMLTextAreaElement > document.getElementById('txtid')).value;  
  6.   var txtname = ( < HTMLTextAreaElement > document.getElementById('txtname')).value;  
  7.   if (txtid.length != 0 && txtname.length != 0) {  
  8.    var connection = new ActiveXObject("ADODB.Connection");  
  9.    var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  10.    connection.Open(connectionstring);  
  11.    var rs = new ActiveXObject("ADODB.Recordset");  
  12.    rs.Open("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid, connection);  
  13.    alert("Update Record Successfuly");  
  14.    connection.close();  
  15.   } else  
  16.   {  
  17.    alert("Please textbox's value");  
  18.   }  
  19.  }  
  20.  ShowAll()  
  21.  {  
  22.   var connection = new ActiveXObject("ADODB.Connection");  
  23.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  24.   connection.Open(connectionstring);  
  25.   var rs = new ActiveXObject("ADODB.Recordset");  
  26.   rs.Open("select * from EmpSalary_Info ", connection);  
  27.   rs.MoveFirst();  
  28.   var span = document.createElement("span");  
  29.   span.style.color = "Blue";  
  30.   span.innerText = "  ID " + "  Name " + "   Salary";  
  31.   document.body.appendChild(span);  
  32.   while (!rs.eof) {  
  33.    var span = document.createElement("span");  
  34.    span.style.color = "green";  
  35.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  36.    document.body.appendChild(span);  
  37.    rs.MoveNext();  
  38.   }  
  39.   rs.close();  
  40.   connection.close();  
  41.  }  
  42. }  
  43. window.onload = () =>  
  44.  {  
  45.   var bttnupdate = document.getElementById("update");  
  46.   var bttnshow = document.getElementById("showall");  
  47.   var obj = new Update_Record();  
  48.   bttnshow.onclick = function()  
  49.   {  
  50.    obj.ShowAll();  
  51.   }  
  52.   bttnupdate.onclick = function()  
  53.   {  
  54.    obj.update_record();  
  55.   }  
  56.  };  
Update_Record.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Update_Record.aspx.cs" Inherits="Update_Record_using_textbox.Update_Record" %>  
  2.  <  
  3.  !DOCTYPE html >  
  4.  <  
  5.  html xmlns = "http://www.w3.org/1999/xhtml" >  
  6.  <  
  7.  head runat = "server" >  
  8.  <  
  9.  title > < /title>  
  10.  <  
  11.  style type = "text/css" > 
  12.  #txtname  
  13. {  
  14.  z - index: 1;  
  15.  left: 230 px;  
  16.  top: 94 px;  
  17.  position: absolute;  
  18. } 
  19. #  
  20. txtid  
  21. {  
  22.  z - index: 1;  
  23.  left: 230 px;  
  24.  top: 54 px;  
  25.  position: absolute;  
  26. }  
  27. <  
  28. /style>  
  29. <  
  30. script src = "UpdateRecord.js" > < /script>  
  31.  <  
  32.  /head>  
  33.  <  
  34.  body style = "height: 89px" >  
  35.  <  
  36.  form name = "form1"  
  37. runat = "server" >  
  38.  <  
  39.  div id = "show"  
  40. style = "font-size: x-large; font-weight: bold; height: 185px; color: #0000FF;" >  
  41.  Update Employee Record < p style = "font-size: medium; color: #000000;" >  
  42.  Enter Employee ID & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
  43. &  
  44. nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
  45. <  
  46. input id = "txtid"  
  47. type = "text" / > < /p>  
  48.  <  
  49.  p style = "font-size: medium; color: #000000;" >  
  50.  Update Employee Name & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
  51. &  
  52. nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
  53. &  
  54. nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; < /p>  
  55. <  
  56. input id = "txtname"  
  57. type = "text" / > < p >  
  58.  &  
  59.  nbsp; < input id = "update"  
  60. type = "button"  
  61. value = "Update"  
  62. style = "font-weight: bold" / > & nbsp;  
  63. <  
  64. input id = "showall"  
  65. type = "button"  
  66. value = "Show All Record"  
  67. style = "font-weight: bold" / > < /p>  
  68.  <  
  69.  /div>  
  70.  <  
  71.  p style = "height: 1px" >  
  72.  &  
  73.  nbsp; < /p>  
  74. <  
  75. /form>  
  76. <  
  77. /body>  
  78. <  
  79. /html>  
UpdateRecord.js
  1. var Update_Record = (function() { 
  2.  function Update_Record() {}  
  3.  Update_Record.prototype.update_record = function() {  
  4.   var txtid = (document.getElementById('txtid')).value;  
  5.   var txtname = (document.getElementById('txtname')).value;  
  6.   if (txtid.length != 0 && txtname.length != 0) {  
  7.    var connection = new ActiveXObject("ADODB.Connection");  
  8.    var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  9.    connection.Open(connectionstring);  
  10.    var rs = new ActiveXObject("ADODB.Recordset");  
  11.    rs.Open("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid, connection);  
  12.    alert("Update Record Successfuly");  
  13.    connection.close();  
  14.   } else {  
  15.    alert("Please textbox's value");  
  16.   }  
  17.  };  
  18.  Update_Record.prototype.ShowAll = function() {  
  19.   var connection = new ActiveXObject("ADODB.Connection");  
  20.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  21.   connection.Open(connectionstring);  
  22.   var rs = new ActiveXObject("ADODB.Recordset");  
  23.   rs.Open("select * from EmpSalary_Info ", connection);  
  24.   rs.MoveFirst();  
  25.   var span = document.createElement("span");  
  26.   span.style.color = "Blue";  
  27.   span.innerText = "  ID " + "  Name " + "   Salary";  
  28.   document.body.appendChild(span);  
  29.   while (!rs.eof) {  
  30.    var span = document.createElement("span");  
  31.    span.style.color = "green";  
  32.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  33.    document.body.appendChild(span);  
  34.    rs.MoveNext();  
  35.   }  
  36.   rs.close();  
  37.   connection.close();  
  38.  };  
  39.  return Update_Record;  
  40. })();  
  41. window.onload = function() {  
  42.  var bttnupdate = document.getElementById("update");  
  43.  var bttnshow = document.getElementById("showall");  
  44.  var obj = new Update_Record();  
  45.  bttnshow.onclick = function() {  
  46.   obj.ShowAll();  
  47.  };  
  48.  bttnupdate.onclick = function() {  
  49.   obj.update_record();  
  50.  };  
  51. };  
  52. //@ 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 the 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 the "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.


Similar Articles