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 web a application and how to show data from the database in a TextBox value in TypeScript.

First I created a database called EmpDetail. Then I am created a table in this database. 

Query Code

CREATE TABLE [dbo].[emp](

      [id] [int] NULL,

      [name] [varchar](50) NULL,

      [salary] [int] NULL

) ON [PRIMARY]

Now insert some data in the emp table.

Complete Program

aap.ts

class DataConnectivity

{

    ShowDB(txtid: number)

    {

        var connection = new ActiveXObject("ADODB.Connection");

        var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";

        connection.Open(connectionstring);

        var rs = new ActiveXObject("ADODB.Recordset");

        rs.Open("select * from emp where id="+txtid, connection);

        rs.MoveFirst();

        var span = document.createElement("span");

        span.style.color = "Blue";

        span.innerText ="\n"+ "  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 obj = new DataConnectivity();

    var bttn = <HTMLButtonElement>document.getElementById("show");

    bttn.onclick = function ()

    {

        var txtid = parseInt((<HTMLTextAreaElement>document.getElementById("txtID")).value);

        obj.ShowDB(txtid);

    }

};

 

DataConnectivity_Demo.aspx

 

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

<!DOCTYPE html>

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

<head runat="server">

    <title></title>

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

</head>

<body>

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

    <div style="font-size: medium; font-weight: bold; color: #0000FF"> 

        Enter Employee ID

        <input id="txtID" type="text" /><br />

        <br />

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

        <input id="show" type="button" value="Show Record" style="font-weight: bold" /></div>

    </form>

</body>

</html>

 

app.js

 

var DataConnectivity = (function () {

    function DataConnectivity() { }

    DataConnectivity.prototype.ShowDB = function (txtid) {

        var connection = new ActiveXObject("ADODB.Connection");

        var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";

        connection.Open(connectionstring);

        var rs = new ActiveXObject("ADODB.Recordset");

        rs.Open("select * from emp where id=" + txtid, connection);

        rs.MoveFirst();

        var span = document.createElement("span");

        span.style.color = "Blue";

        span.innerText = "\n" + "  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 DataConnectivity;

})();

window.onload = function () {

    var obj = new DataConnectivity();

    var bttn = document.getElementById("show");

    bttn.onclick = function () {

        var txtid = parseInt((document.getElementById("txtID")).value);

        obj.ShowDB(txtid);

    };

};

//@ sourceMappingURL=app.js.map

 

Output

Animation1.gif

For more information, download the attached sample application.