In my Master page, I have included a Script Manager as shown below:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Within the content page, there is an Update Panel containing a DataList and a Button structured like this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" onitemdatabound="DataList1_ItemDataBound" RepeatLayout="Flow">
<ItemTemplate>
<div class="post-heading">
<div class="pull-left image">
<img src="http://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<a href="#"><b>Ryan Haywood</b></a>
made a post.
</div>
<h6 class="text-muted time">1 minute ago</h6>
</div>
</div>
<div class="post-description">
<asp:Image ID="Image2" class="img img-responsive" ImageUrl='<%#Eval ("pimg") %>' runat="server" />
<p><asp:Label ID="postlabel" class="postlabel" runat="server" Text='<%#Eval ("ptext") %>'></asp:Label></p>
<div class="stats">
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-thumbs-up icon"></i>2
</a>
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-share icon"></i>12
</a>
</div>
</div>
<div class="post-footer">
<div class="input-group">
<input class="form-control" placeholder="Add a comment" type="text">
<span class="input-group-addon">
<a href="#"><i class="fa fa-edit"></i></a>
</span>
</div>
</div>
</ItemTemplate>
</asp:DataList>
<asp:Button ID="Button2" class="btn-block btn-primary" runat="server" Text="Load More" onclick="Button2_Click" ClientIDMode="Static" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Upon clicking the Load More button, the issue arises where instead of partial postback, a full page reload occurs. How can this be fixed?