ajax with datalist giving error

I have a data list control which is placed inside a content place holder.

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:ScriptManager ID="MainScriptManager" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:DataList ID="dlProdocut" runat="server" RepeatColumns="3" EditItemIndex="-1"
                RepeatDirection="Horizontal" OnItemDataBound="dlProdocut_ItemDataBound">
                <ItemTemplate>
                    <asp:Table ID="Table1" runat="server" border="0" CellSpacing="0" CellPadding="0">
                        <asp:TableRow>
                            <asp:TableCell Height="10" HorizontalAlign="Center" VerticalAlign="Top">

                            </asp:TableCell>
                        </asp:TableRow>
                        <%--Image--%>
                        <asp:TableRow>
                            <asp:TableCell Height="150" Width="7" HorizontalAlign="left" VerticalAlign="top">
                                <asp:HyperLink ID="hyrProductImg" runat="server">
                              <img alt='<%# DataBinder.Eval(Container.DataItem,"Title")%>' src="../images/<%# DataBinder.Eval(Container.DataItem,"SmallImage") %>" border="0" width="226" height="166" />
                                </asp:HyperLink>
                            </asp:TableCell>
                            <asp:TableCell Width="5">  </asp:TableCell>
                        </asp:TableRow>
                        <%--Title--%>
                        <asp:TableRow>
                            <asp:TableCell Height="45" Width="7" CssClass="product-name" HorizontalAlign="Center"
                                VerticalAlign="Top">
                            <strong> <%# DataBinder.Eval(Container.DataItem, "Title")%></strong>
                            </asp:TableCell>
                        </asp:TableRow>
                        <%--ShortDescription--%>
                        <asp:TableRow>
                            <asp:TableCell Width="7" HorizontalAlign="Justify" VerticalAlign="Top" CssClass="testimonial-text">
                                <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"ShortDescription")%>'></asp:Label>
                            </asp:TableCell>
                        </asp:TableRow>
                        <%--Read More--%>
                        <asp:TableRow>
                            <asp:TableCell HorizontalAlign="Left">
                                <asp:HyperLink ID="lnkProductDetails" CssClass="read-more" runat="server">Read More &rarr;</asp:HyperLink>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell Height="60" HorizontalAlign="Justify" VerticalAlign="Top" CssClass="testimonial-text">

                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </ItemTemplate>
            </asp:DataList>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="dlProdocut" />
            <asp:AsyncPostBackTrigger ControlID="btnNext" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:Label ID="lblPage" runat="server" Text="" />
    <asp:Button ID="btnPrevious" runat="server" Text="&lt;&lt;" />
    <asp:Button ID="btnNext" runat="server" Text="&gt;&gt;" OnClick="btnNext_Click" />
    <asp:Panel ID="BottomPager_Panel" runat="server">
    </asp:Panel>
</asp:Content>

On click of next button i am doing paging on the control and navigating to the next page. On page load i am doing this

if (!IsPostBack)
    {
        pageCount = 1;
        PageNo =开发者_开发技巧 1;
        startPage = 6 * (PageNo - 1) + 1;
         lastPage = startPage + 5;
         bindDataList();
    }

This is my code for bindDataList

public void bindDataList()
{

    string source = ConfigurationManager.ConnectionStrings["Cad-B"].ToString();
    SqlConnection con = new SqlConnection(source);
    SqlCommand cmd = new SqlCommand("sp_GetProductPagingByMenuId", con);
    //cmd.CommandType = CommandType.StoredProcedure;
    //cmd.CommandText = "sp_GetProductPagingByMenuId";
    con.Open();
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.Add("@startPage", startPage);
    cmd.Parameters.Add("@lastPage", lastPage);
    SqlDataReader dr =    cmd.ExecuteReader();
    DataTable dt = new DataTable();
    dt.Load(dr);

    dlProdocut.DataSource = dt;
    dlProdocut.DataBind();
}

On click of next button i have written the following code

protected void btnNext_Click(object sender, EventArgs e)
{
    dlProdocut.DataSource = null;
    dlProdocut.DataBind();
    pageCount++;
    PageNo = pageCount;
    startPage = 6 * (PageNo - 1) + 1;
    lastPage = startPage + 5;
    bindDataList();
}

Problem i am facing is that it every time shows me the same content that is loaded the first time on the page. When i debug the code i can see that the data list is loaded with the new records but it is not reflected on the page i tried removing caching but it dint help. The moment i removed the next button from the trigger section it is giving me the proper record but the complete page is getting post back which i dont want. This is the removed code

<asp:AsyncPostBackTrigger ControlID="btnNext" />

Please help i am stuck with this since long. I am new to this technology. Thanks in advance.

Try :

<Triggers> 
<asp:AsyncPostBackTrigger ControlID="DatalistId$btnNext" />
</Triggers>