I want to Bind div From the Parent Table and Get All Child item also in a div But I am not get that properly please help me.
Jquery Code with html.
Testing.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Testing.aspx.cs" Inherits="WebApplication14.Testing" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'Getdata.asmx/Getdatawebservice',
method: 'post',
dataType: 'json',
success: function (data) {
var temp = $('#Container');
$(data).each(function (index, item) {
var getdata = item.Id;
alert(getdata);
//========================Seconddatabound====================================//
$.ajax({
url: 'Getdata.asmx/GetDatafornested',
data: { emailid: getdata },
method: 'post',
dataType: 'json',
success: function (data1) {
var nestedttt = $('#Container #nesteddata');
$(data1).each(function (index, fetch) {
nestedttt.append('<h1><p>' + fetch.name + '</p></h1>');
});
},
Error: function (err) {
alert(err);
}
});
//========================Seconddatabound====================================//
temp.append('<div id ="DataId" style ="display:none;">' + item.Id + '</div><p id="Heading">' + item.Heading + '</p><p id="postedtime">' + item.postedTime + '</p><p id="Description">' + item.description + '</p><p id="IMAGE"><img src=' + item.Image + '/><div id="nesteddata"></div></p>');
});
},
Error: function (err) {
alert(err);
}
});
});
</script>
<style>
* {font:13px Arial;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Container">
</div>
</form>
</body>
</html>
Web method For Retriving Data From the Database.
Getdata.asmx:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;
namespace WebApplication14
{
/// <summary>
/// Summary description for Getdata
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Getdata : System.Web.Services.WebService
{
string cs = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
[WebMethod]
public void Getdatawebservice()
{
List<Data> lst = new List<Data>();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("sp_sampleproject_getdata", con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Data data = new Data();
data.Id = Convert.ToInt16(dr["Id"]);
data.Heading = Convert.ToString(dr["Heading"]);
data.postedTime = Convert.ToString(dr["postedTime"]);
data.description = Convert.ToString(dr["decription"]);
data.Image = Convert.ToString(dr["Image"]);
lst.Add(data);
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(lst));
}
}
[WebMethod]
public void GetDatafornested(int emailid)
{
List<allclass> lst = new List<allclass>();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("dataretrivebyid", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
cmd.Parameters.AddWithValue("@id", emailid);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
allclass data = new allclass();
data.childid = Convert.ToInt16(dr["id"]);
data.name = Convert.ToString(dr["name"]);
lst.Add(data);
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(lst));
}
}
}
}
Parent class
allclass.cs:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication14
{
public class allclass
{
public int childid { get; set; }
public string name { get; set; }
}
}
Data.cs:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication14
{
public class Data
{
public int Id { get; set; }
public string Heading { get; set; }
public string postedTime { get; set; }
public string description { get; set; }
public string Image { get; set; }
}
}
Parent Table Database.
Sql query:
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Sampleproject](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Heading] [nvarchar](500) NULL,
[postedTime] [nvarchar](500) NULL,
[decription] [nvarchar](500) NULL,
[Image] [nvarchar](500) NULL
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Sampleproject] ON
INSERT [dbo].[Sampleproject] ([Id], [Heading], [postedTime], [decription], [Image]) VALUES (1, N'Lorem Ipsum Dolor Sit Amet Consec.', N'Posted on May 13th, 2013 by Finibus Bonorum', N'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', N'images/page5-img2.jpg')
INSERT [dbo].[Sampleproject] ([Id], [Heading], [postedTime], [decription], [Image]) VALUES (2, N'Lorem Ipsum Dolor Sit Amet Consec.', N'Posted on May 13th, 2013 by Finibus Bonorum', N'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', N'images/page5-img2.jpg')
INSERT [dbo].[Sampleproject] ([Id], [Heading], [postedTime], [decription], [Image]) VALUES (3, N'Lorem Ipsum Dolor Sit Amet Consec.', N'Posted on May 13th, 2013 by Finibus Bonorum', N'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', N'images/page5-img2.jpg')
INSERT [dbo].[Sampleproject] ([Id], [Heading], [postedTime], [decription], [Image]) VALUES (4, N'Lorem Ipsum Dolor Sit Amet Consec.', N'Posted on May 13th, 2013 by Finibus Bonorum', N'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', N'images/page5-img2.jpg')
INSERT [dbo].[Sampleproject] ([Id], [Heading], [postedTime], [decription], [Image]) VALUES (5, N'Lorem Ipsum Dolor Sit Amet Consec.', N'Posted on May 13th, 2013 by Finibus Bonorum', N'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', N'images/page5-img2.jpg')
SET IDENTITY_INSERT [dbo].[Sampleproject] OFF
Child table.
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Sampleprojectparent](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [nvarchar](500) NULL,
[pid] [int] NULL,
PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Sampleprojectparent] ON
INSERT [dbo].[Sampleprojectparent] ([id], [name], [pid]) VALUES (1, N'amit', 1)
INSERT [dbo].[Sampleprojectparent] ([id], [name], [pid]) VALUES (2, N'Sumit', 1)
INSERT [dbo].[Sampleprojectparent] ([id], [name], [pid]) VALUES (3, N'Prateek', 2)
INSERT [dbo].[Sampleprojectparent] ([id], [name], [pid]) VALUES (4, N'amit', 2)
INSERT [dbo].[Sampleprojectparent] ([id], [name], [pid]) VALUES (5, N'subham', 3)
INSERT [dbo].[Sampleprojectparent] ([id], [name], [pid]) VALUES (6, N'Alok', 3)
INSERT [dbo].[Sampleprojectparent] ([id], [name], [pid]) VALUES (7, N'Akash', 4)
INSERT [dbo].[Sampleprojectparent] ([id], [name], [pid]) VALUES (8, N'Akshay', 4)
SET IDENTITY_INSERT [dbo].[Sampleprojectparent] OFF
Store Procedure For Get Parent Table Data
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
create proc [dbo].[Sp_sampleproject_getdata]
as
begin
select * from Sampleproject
end
GO
Child table data Retrive data based on parent table Id.
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE proc [dbo].[dataretrivebyid]
(
@id int
)
as
begin
select id, name from Sampleprojectparent where pid=@id
end
GO
Please Help me in this code how can we get data proper format like
parent table data show and this data parent id in child table this child table data also show with parent table.