Incorrect asp:HiddenField value for data loaded through json.

Hi,

The post may seem quite lengthy, but I wasn't sure how to portray my issue. I tried to put most of the information here.

I am trying to fetch data from the table using json when the user gets to the bottom of the webpage using repeater control and then use the data later on.

I am using asp:Repeater control as below:

<div id="dvCustomers"><asp:Repeater ID="rptCustomers" runat="server"><ItemTemplate><table style="width:100%"><tr><td>
<label class="UserName" style='display:inline;color: #38ACEC;font-weight:bold;'> <%# Eval("UserName") %> </label><asp:HiddenField ID="hiddenID2" runat="server" Value='<%# Eval("UserId") %>' />
<asp:Button runat="server" ID="ClickBtn" OnClick="ClickBtn_Click" Text="Click" /></td></tr></table></ItemTemplate></asp:Repeater></div>

Initially on page load I am fetching 10 rows from table using a stored procedure as below:

rptCustomers.DataSource = GetCustomersData(1, SeriesName, SeasonNo);
rptCustomers.DataBind();

public static DataSet GetCustomersData(int pageIndex, string SeriesName, string SeasonNo)
    {   
        string query = "[dbo].[GetSpoilersPageWise]";
        SqlCommand cmd = new SqlCommand(query);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
        cmd.Parameters.AddWithValue("@PageSize", 10);
        cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
        return GetData(cmd);
     }

private static DataSet GetData(SqlCommand cmd)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["SpoilersVaultCS"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds, "SpoilersDB");
                    DataTable dt = new DataTable("PageCount");
                    dt.Columns.Add("PageCount");
                    dt.Rows.Add();
                    dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
                    ds.Tables.Add(dt);
                    return ds;
                }
            }
        }
    }

Above code is working fine. I am getting 10 rows as expected. No issue here.

Now, I am using below javascript & webmethod to fetch further data from the database in a chunk of 10 rows:

<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="scriptHolder"><script type="text/javascript" src="Scripts/jquery-2.1.0.min.js"></script><script type="text/javascript">
        var pageIndex = 1;
        var pageCount;$(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height().toFixed(0) - $(window).height()) {
                GetRecords();
            }
        });
        function GetRecords() {
            pageIndex++;
            if (pageIndex == 2 || pageIndex <= pageCount) {$("#loader").show();$.ajax({
                    type: "POST",
                    url: "Default.aspx/GetCustomers",
                    data: '{pageIndex: ' + pageIndex + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            }
        }
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var customers = xml.find("SpoilersDB");
            customers.each(function () {
                var customer = $(this);
                var table = $("#dvCustomers table").eq(0).clone(true);$(".UserName", table).html(customer.find("UserName").text());$(".hiddenID", table).html(customer.find("UserId").text());$("#dvCustomers").append(table).append("<br />");
            });$("#loader").hide();
        }</script>

Webmethod is as below:

[WebMethod]
    public static string GetCustomers(int pageIndex)
    {
        return GetCustomersData(pageIndex, GlobalVar.SeriesName, GlobalVar.SeasonNo).GetXml();
    }

Above code is working fine as well, I am getting 10 more rows from database when i scroll to the bottom. No issue here as well.

My problem lies when i try to access the HiddenField value on ClickBtn button click as below:

protected void ClickBtn_Click(object sender, EventArgs e)
{
    foreach (RepeaterItem curItem in rptCustomers.Items)
    {
        HiddenField hidden2 = new HiddenField();
        hidden2 = (((((Control)sender).NamingContainer) as RepeaterItem).FindControl("hiddenID2") as HiddenField);
        int UserID2 = Convert.ToInt32(hidden2.Value);
        //more processing..
    }
}

From the HTML at the top, it's clear that, in one repeater item I will be having a Label, a HiddenField, and a Button.

So when I click on the button of any of the initial 10 repeater items (loaded on Page Load), hidden2.Value comes as expected i.e. whatever fetched from database.

But when I click on the button of any of the repeater item created by javascript code above, lets suppose I click on 15th repeater item button, ideally i should be getting hiddenfield value corresponding to 15th repeater item but I am getting hiddenfield value of first element (fetched on page load) instead.

Issue seems to be that it's not able to pick repeater item loaded by javascript. But I have no idea why it's happening and how to make it correct.

The question seems a bit vague but it took me 20 minutes to draft and I am dead stuck here. So any help will be highly appreciated.

Thanks.