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.