Page refreshed even after using Update Panel - AJAX

Question

I have a datalist where the huperlinks will be populated with list of article names. When clicking on any article link, i load the content inside

tag with ID = "POST"

The problem is, when i click on the link in my datalist, the page refreshed to load the content. How can i solve this ? Thanks

<asp:ScriptManager ID="scm" runat="server">
</asp:ScriptManager>
<table>
    <tr>
        <td>
            <asp:Panel ID="Panel1" runat="server" Width="800">
                <div id="divContent" runat="server" class="post">
                    <table id="tblPost" style="float" border="1" style="border-style: outset; border-width: thin"
                        width="250" height="200" align="right">
                        <tr>
                            <td class="style2">
                                <asp:Label ID="Label1" runat="server" Width="200" Font-Bold="True" Text="Article Sections"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                <asp:DataList ID="DLArticles" runat="server">
                                    <ItemTemplate>
                                        <table id="Table2" visible="true" align="left">
                                            <tr align="left">
                                                <td>
                                                    <asp:HyperLink ID="hypSubSections" runat="server" NavigateUrl='<%# "~/News.aspx?FID=" + DataBinder.Eval(Container.DataItem,"FID") + "&CID=" + DataBinder.Eval(Container.DataItem,"CID") %>'
                                                        Text='<%# DataBinder.Eval(Container.DataItem,"Title") %>'></asp:HyperLink>
                                                </td>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                <asp:HyperLink ID="HypViewALL" runat="server">View All</asp:HyperLink>
                            </td>
                        </tr>
                    </table>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <p id="POST" runat="server">
                            </p>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="DLArticles" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
            </asp:Panel>
        </td>
    </tr>
</table>

Answer 1

First of all you need to use data-driven control that allows to use multiple key field names. DataList doesn't has such feature so you need to use GridView or ListView control. As each post idetified with unique combination of FID and CID values set those fields as DataKeyNames. Then, change HyperLink to LinkButton control and set appropriate CommandName property value. After that you need to register each LinkButton as AsyncPostback control (on a page, not in UpdatePanel1's triggers collection) or just wrap whole ListView by an UpdatePanel. Then all you need is to handle SelectedIndexChanged event and update post content.

<asp:UpdatePanel runat="server" UpdateMode="Conditional" >
     <ContentTemplate>
          <asp:ListView runat="server" ID="ListView1" DataKeyNames="FID,CID">
               <LayoutTemplate>
                    <table>
                         <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
                    </table>
               </LayoutTemplate>
               <ItemTemplate>
                    <tr style="text-align: left;">
                         <td>
                              <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select" Text='<%# Eval("Title") %>' />
                         </td>
                    </tr>
               </ItemTemplate>
          </asp:ListView>
     </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
     <ContentTemplate>
          <p runat="server" id="POST">
          </p>
     </ContentTemplate>
     <Triggers>
          <asp:AsyncPostBackTrigger ControlID="ListView1" EventName="SelectedIndexChanged" />
     </Triggers>
</asp:UpdatePanel>

private static readonly List<Post> DataSource = new List<Post>
{
    new Post{FID = 1, CID = "1", Title="First", Content= Guid.NewGuid().ToString()},
    new Post{FID = 2, CID = "1", Title="Second", Content= Guid.NewGuid().ToString()},
    new Post{FID = 1, CID = "2", Title="Third", Content= Guid.NewGuid().ToString()},
    new Post{FID = 2, CID = "2", Title="Fourth", Content= Guid.NewGuid().ToString()},
};

protected void Page_Init(object sender, EventArgs e)
{
    ListView1.SelectedIndexChanging += ListView1_SelectedIndexChanging;
    ListView1.SelectedIndexChanged += ListView1_SelectedIndexChanged;
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        ListView1.DataSource = DataSource;
        ListView1.DataBind();
    }
}

void ListView1_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
{
    ListView1.SelectedIndex = e.NewSelectedIndex;
}

void ListView1_SelectedIndexChanged(object sender, EventArgs e)
{
    var dataKey = ListView1.SelectedDataKey;
    var fid = (int)dataKey["FID"];
    var cid = dataKey["CID"] as string;

    var post = DataSource.FirstOrDefault(p => p.FID == fid && p.CID == cid);
    if (post != null)
    {
        POST.InnerText = Server.HtmlEncode(post.Content);
    }

}

public class Post
{
    public int FID { get; set; }

    public string CID { get; set; }

    public string Title { get; set; }

    public string Content { get; set; }
}