havin havin - 1 year ago 131
ASP.NET (C#) Question

Bind Dataset to ASP.Net Div tag using jQuery AJAX

Iam Binding <%#Eval("message") %> inside Div tag.Now iam fetching data from db using dataset inside repeater .Each time page is loading fetching data from db which i want to avoid.So i decided to use Jquery ajax to bind dataset.My problem is how can we bind dataset inside div tag.

My code is :

<asp:Repeater ID="rep" runat="server"
OnItemDataBound="rep_ItemDataBound"> <ItemTemplate>
<p><%#Eval("message") %></p>

Code Behind:

public static string GetMessages()
string query = "GetMessageData";
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.StoredProcedure;
return GetData(cmd).GetXml();
private static DataSet GetData(SqlCommand cmd)
string strConnString = ConfigurationManager.ConnectionStrings["connectionng"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
using (SqlDataAdapter sda = new SqlDataAdapter())
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
return ds;



$(function () {
type: "POST",
url: "welcome.aspx/GetMessages",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
error: function (response) {

function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
--Iam stuck Here--


So if success how can i bind my dataset to div tag inside repeater.

Answer Source

All you really have to do is loop through the XML returned by the $.ajax call and append the results to an element on the page.

1.Add <div id="result"></div> anywhere on your page.We will write the output of the $.ajax call to this element.

2.Change your OnSuccess() function like this:

function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var length = xmlDoc.children[0].children.length;

    for(var i = 0; i < length; i++)
        var item = xmlDoc.children[0].children[i];
        var message = item.getElementsByTagName("message")[0].innerHTML;
        var div = "<div><p>" + message + "</p></div>";