How To Connect to a Database 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 in a web application and how to get data from the database in TypeScript.

First I created a database "EmpDetail". Then I created a table in the 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

{

    LoadDB()

    {

        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", 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 obj = new DataConnectivity();

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

    bttn.onclick = function ()

    {

        obj.LoadDB();

    }

};

 

DataConnectivity_Demo.aspx

 

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

<!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: large; font-weight: bold">

        Click on button for show data<br />

        <br />

        <input id="ShowData" type="button" value="Show Data" style="font-weight: bold" />

        </div>

    </form>

</body>

</html>

 

app.js

 

var DataConnectivity = (function () {

    function DataConnectivity() { }

    DataConnectivity.prototype.LoadDB = function () {

        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", 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 DataConnectivity;

})();

window.onload = function () {

    var obj = new DataConnectivity();

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

    bttn.onclick = function () {

        obj.LoadDB();

    };

};

//@ sourceMappingURL=app.js.map


 

Output


Final-Result.jpg


For more information, download the attached sample application.

Up Next
    Ebook Download
    View all
    Test
    Read by 16 people
    Download Now!
    Learn
    View all