Post
Ask Question

Show Data Using Textbox in TypeScript

Show Data Using Textbox in TypeScript 

 
Note: This program will work only on Internet Explorer.
 
In this article, I will explain how to connect to a SQL database with TypeScript using the web application and how to show data from the database in a TextBox value in TypeScript.
 
First I created a database called EmpDetail. Then I have created a table in this database. 
 
Query Code
  1. CREATE TABLE [dbo].[emp](  
  2.       [id] [int] NULL,  
  3.       [name] [varchar](50) NULL,  
  4.       [salary] [int] NULL  
  5. ) ON [PRIMARY]  
Now insert some data in the emp table.
 

Complete Program

 
aap.ts
  1. class DataConnectivity  
  2. {
  3.  ShowDB(txtid: number)  
  4.  {  
  5.   var connection = new ActiveXObject("ADODB.Connection");  
  6.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";  
  7.   connection.Open(connectionstring);  
  8.   var rs = new ActiveXObject("ADODB.Recordset");  
  9.   rs.Open("select * from emp where id=" + txtid, connection);  
  10.   rs.MoveFirst();  
  11.   var span = document.createElement("span");  
  12.   span.style.color = "Blue";  
  13.   span.innerText = "\n" + "  ID " + "  Name " + "   Salary";  
  14.   document.body.appendChild(span);  
  15.   while (!rs.eof) {  
  16.    var span = document.createElement("span");  
  17.    span.style.color = "green";  
  18.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  19.    document.body.appendChild(span);  
  20.    rs.MoveNext();  
  21.   }  
  22.   rs.close();  
  23.   connection.close();  
  24.  }  
  25. }  
  26. window.onload = () =>  
  27.  {  
  28.   var obj = new DataConnectivity();  
  29.   var bttn = < HTMLButtonElement > document.getElementById("show");  
  30.   bttn.onclick = function()  
  31.   {  
  32.    var txtid = parseInt(( < HTMLTextAreaElement > document.getElementById("txtID")).value);  
  33.    obj.ShowDB(txtid);  
  34.   }  
  35.  };  
DataConnectivity_Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Show_Record.aspx.cs" Inherits="Show_Record_With_Value.Show_Record" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="app.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div style="font-size: medium; font-weight: bold; color: #0000FF">   
  12.         Enter Employee ID  
  13.                 <input id="txtID" type="text" />  
  14.                 <br />  
  15.                 <br />       
  16.                 <input id="show" type="button" value="Show Record" style="font-weight: bold" />  
  17.             </div>  
  18.         </form>  
  19.     </body>  
  20. </html>  
app.js
  1. var DataConnectivity = (function() {  
  2.  function DataConnectivity() {}  
  3.  DataConnectivity.prototype.ShowDB = function(txtid) {  
  4.   var connection = new ActiveXObject("ADODB.Connection");  
  5.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";  
  6.   connection.Open(connectionstring);  
  7.   var rs = new ActiveXObject("ADODB.Recordset");  
  8.   rs.Open("select * from emp where id=" + txtid, connection);  
  9.   rs.MoveFirst();  
  10.   var span = document.createElement("span");  
  11.   span.style.color = "Blue";  
  12.   span.innerText = "\n" + "  ID " + "  Name " + "   Salary";  
  13.   document.body.appendChild(span);  
  14.   while (!rs.eof) {  
  15.    var span = document.createElement("span");  
  16.    span.style.color = "green";  
  17.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  18.    document.body.appendChild(span);  
  19.    rs.MoveNext();  
  20.   }  
  21.   rs.close();  
  22.   connection.close();  
  23.  };  
  24.  return DataConnectivity;  
  25. })();  
  26. window.onload = function() {  
  27.  var obj = new DataConnectivity();  
  28.  var bttn = document.getElementById("show");  
  29.  bttn.onclick = function() {  
  30.   var txtid = parseInt((document.getElementById("txtID")).value);  
  31.   obj.ShowDB(txtid);  
  32.  };  
  33. };  
  34. //@ sourceMappingURL=app.js.map  
Output
 
Animation1.gif
 
For more information, download the attached sample application.


Similar Articles