Display database value into HTML table using jquery ajax call method in ASP.NET

Question

0.00/5 (No votes)

See more:

dear all,

i am trying to display database value into html table using jquery ajax call method in asp.net

but its not displaying. plese help me

What I have tried:

function Bindtable() {
$(document).ready(function () {

var row = "";
$.ajax({
type: "POST",
url: "wsc_common.asmx/bindtable",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$.each(msg.d, function (index, obj) {
row += "

" + obj.pid + "

" + obj.p_name + "

" + obj.p_mobile + "

" + obj.p_location + "

";

});

$("#tbDetails tbody").append(row);
}
});

});
}

Posted 11-Jun-16 2:09am

Rajiv.net40

Updated 17-Nov-17 7:14am

Add a Solution

Comments

Karthik_Mahalingam 11-Jun-16 9:42am

post your webmethod code
bindtable()

Rajiv.net40 11-Jun-16 9:46am

[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public string bindtable()
{
dllgetinfo info = new dllgetinfo();
return info.showdata();
}

//=======
public string showdata()
{
string qry = "select *from usr";
DataTable dt = dllmain.ExecuteselectQry_returns_datatable(qry);
return getdatatabletojson(dt);

}

public static string getdatatabletojson(DataTable dt)
{
string str = string.Empty;
JavaScriptSerializer serializer = new JavaScriptSerializer();
List<dictionary<string, object="">> rows = new List<dictionary<string, object="">>();
Dictionary<string, object=""> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object="">();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
str = serializer.Serialize(rows);
return str;

}

Karthik_Mahalingam 11-Jun-16 10:29am

check the solution

2 solutions

Solution 2

C#

class jamiu{
public string id{get; set;}
public string Name {get; set;}
}
public static List<jamiu> getdata(){
List<jamiu> jam=new  List<jamiu>();
SqlConnection con=new SqlConnection();
SqlCommand cmd=new SqlCommand();
cmd.connection=con;
cmd.CommandText="select *from Table";
 SqlDataReader dr=cmmd.ExecuteReader();
DataTable dt=new DataTable();
 for (Int32 i = 0; i < dt.Rows.Count; i++)
{dt.Load(dr);
jamiu jj=new jamiu();
jj.id=dt.Rows[1]["Id"].ToString();
}
 dr.Close();
        con.Close();
 


}

Posted 17-Nov-17 7:14am

Member 13527253

Updated 17-Nov-17 7:17am

v4

Comments

saranraj98 12-Dec-17 23:56pm

How to do this work in php?
first i have a php code with database. And i have some set of data in database.
how to fetch that data and convert that data to json .
then using jquery how to make the table using that json file?.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-06-11T04:27:00

Solution 1

try this

HTML

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

    <script src="jquery.min.js"></script>
    <script>

        function BindTable()
        {
            
            $.ajax({
                type: "POST",
                url: "WebService1.asmx/bindtable",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var json = JSON.parse(msg.d);
                    $.each(json, function (index, obj) { 
                        var row = '<tr><td> ' + obj.pid + ' </td> <td> ' + obj.p_name + ' </td> <td>' + obj.p_mobile + '</td> <td>' + obj.p_location + '</td> </tr>'
                        $("#tbDetails tbody").append(row);
                    }); 
                }
            });

        }


        $(document).ready(function () {
            BindTable();
        });
    </script>


</head>
<body>
    
    <table id="tbDetails">
        <tr>
            <td>ID</td> <td>Name</td> <td>Mobile</td> <td>Location</td>
        </tr>
        <tbody>

        </tbody>
    </table>

</body>
</html>

Posted 11-Jun-16 4:27am

Karthik_Mahalingam

Comments

Karthik_Mahalingam 11-Jun-16 10:28am

I have hardcoded the Service code like this, FYI


 [WebMethod]
        [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
        public string bindtable()
        {
            
            return this.showdata();
        }

        //=======
        public string showdata()
        {
           
            DataTable dt = new DataTable();
            dt.Columns.Add("pid");
            dt.Columns.Add("p_name");
            dt.Columns.Add("p_mobile");
            dt.Columns.Add("p_location"); 
            dt.Rows.Add(1, "karthik", 1234, "TamilNadu");
            dt.Rows.Add(1, "kavya", 456, "TamilNadu");
            return getdatatabletojson(dt);


        }

Rajiv.net40 12-Jun-16 0:11am

sir your code works fine but 1 thing is wrong with this. when i click getdata button it repeats complit table.if i click 2 time it repeats tables two times .....plz solve it

Karthik_Mahalingam 12-Jun-16 0:14am

Ok wait

Karthik_Mahalingam 12-Jun-16 0:23am

add this line
$("#tbDetails tbody").find('tr').remove(); ..
.-------------

function BindTable()
{
$("#tbDetails tbody").find('tr').remove();
var row = "";
$.ajax({
type: "POST",
url: "WebService1.asmx/bindtable",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var json = JSON.parse(msg.d);
$.each(json, function (index, obj) {
debugger;
var row = '<tr><td> ' + obj.pid + ' </td> <td> ' + obj.p_name + ' </td> <td>' + obj.p_mobile + '</td> <td>' + obj.p_location + '</td> </tr>'
$("#tbDetails tbody").append(row);
});

}
});

}

Rajiv.net40 12-Jun-16 0:28am

this is not working sir

Karthik_Mahalingam 12-Jun-16 0:29am

Post your full aspx code

Rajiv.net40 12-Jun-16 0:33am

<pre lang="C#">public static DataTable ExecuteselectQry_returns_datatable(string qry)
{
SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["con"].ToString());

DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter();
SqlCommand cmd = new SqlCommand(qry, con);
da.SelectCommand = cmd;
con.Open();
da.Fill(dt);

con.Close();
return dt;

}</pre>

<pre lang="C#">public string showdata()
{
string qry = "select *from usr";
DataTable dt = dllmain.ExecuteselectQry_returns_datatable(qry);
return getdatatabletojson(dt);

}

public static string getdatatabletojson(DataTable dt)
{
string str = string.Empty;
JavaScriptSerializer serializer = new JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
str = serializer.Serialize(rows);
return str;

}</pre>

<pre lang="C#">[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public string bindtable()
{
dllgetinfo info = new dllgetinfo();
return info.showdata();
}</pre>

Karthik_Mahalingam 12-Jun-16 0:35am

Sir
I have asked aspx code
Markup code

Rajiv.net40 12-Jun-16 1:45am

//=== aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test1.aspx.cs" Inherits="UserControls_test1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="~/UserControls/ucTabeltest.ascx" TagName="uct" TagPrefix="uctbl" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="script/jquery-3.0.0.js" type="text/javascript"></script>
<script src="script/bootstrap.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="script/npm.js" type="text/javascript"></script>

<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uctbl:uct ID="uct" runat="server" />
</div>
</form>
</body>
</html>

//====== controller

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucTabeltest.ascx.cs" Inherits="UserControls_ucTabeltest" %>

<script src="script/userdefiendfees.js" type="text/javascript"></script>
<div>
<input type="button" id="tbl" value="Get Data" class="btn btn-success"/>

<table id="tblselect" runat="server" clientidmode="Static" class="table table-striped">
<thead><tr>
<td></td>
</tr></thead>
<tbody >
<tr>
<td></td>
</tr>
</tbody>
<tfoot><tr>
<td></td>
</tr></tfoot>
</table>

</div>

Karthik_Mahalingam 12-Jun-16 1:50am

change the id
$("#tblselect tbody").find('tr').remove(); ..

Rajiv.net40 12-Jun-16 1:53am

thank you very much sir

Karthik_Mahalingam 12-Jun-16 1:54am

working?
if it works, please close this post by marking it as answer.

Rajiv.net40 12-Jun-16 1:55am

how can i also select column name in table ?

Karthik_Mahalingam 12-Jun-16 2:01am

means?

Rajiv.net40 12-Jun-16 2:06am

i want to show colunm name also dynamicly..not static becose i will use single table for multipupose

Karthik_Mahalingam 12-Jun-16 2:12am

this is off topic, close this post.
and post a new question with the detailed requirement. if i am aware of that i will help you..