How to Fetch & Show Sql Server database data in ASP.NET Page Using Ajax (Jquery).

Introduction

In this post, I am implementing how to Fetch & Show Sql Server database data in ASP.NET Page Using Ajax (Jquery).

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for fetch from Jquery function.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a Webpage and Design for show database data.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

HTML Code

     <h3>Load Database Data into Page using Jquery.</h3>
    <input id="btnLoadData" type="button" value="Load Database Data" onclick="GetCompanies()" />
    <div id="UpdatePanel">

    </div>

JS Code

     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script language="javascript" type="text/javascript">
        function GetCompanies() {
            $("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetCompanies",
                data: "{}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: OnSuccess,
                error: OnError
            });
        }
        function OnSuccess(data) {
            var TableContent = "<table border='0'>" +
                                    "<tr>" +
                                        "<td>Rank</td>" +
                                        "<td>Company Name</td>" +
                                        "<td>Revenue</td>" +
                                        "<td>Industry</td>" +
                                    "</tr>";
            for (var i = 0; i < data.d.length; i++) {
                TableContent += "<tr>" +
                                        "<td>"+ data.d[i].Rank +"</td>" +
                                        "<td>"+data.d[i].CompanyName+"</td>" +
                                        "<td>"+data.d[i].Revenue+"</td>" +
                                        "<td>"+data.d[i].Industry+"</td>" +
                                    "</tr>";
            }
            TableContent += "</table>";

            $("#UpdatePanel").html(TableContent);
        }
        function OnError(data) {

        }
    </script>

Step-6: Write this function page_load event for fetch different languages(hindi, english, bengali, marathi etc.) data from database and show in Page .

Write this function into your page behind.

            
        [WebMethod]
        [ScriptMethod(ResponseFormat= ResponseFormat.Json)]
        public static List<TopCompany> GetCompanies()
        {
            System.Threading.Thread.Sleep(5000);
            List<TopCompany> allCompany = new List<TopCompany>();
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                allCompany = dc.TopCompanies.ToList();
            }
            return allCompany;
        }