Hi nauna,
Refer below code.
HTML
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="chat_container">
<asp:Timer ID="timer" runat="server" Interval="2000" OnTick="Timer1_Tick">
</asp:Timer>
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<div class="all-msgs d-inbox">
<asp:LinkButton ID="LinkButton1" runat="server">View</asp:LinkButton>
<asp:Label ID="Label3" runat="server" Text='<%#Eval("Id") %>' CssClass="badge pull-right theme-bg"></asp:Label>
</div>
</ItemTemplate>
</asp:ListView>
<asp:Label ID="lblID" runat="server" />
<asp:HiddenField ID="hfQuerStringID" runat="server" />
<asp:HiddenField ID="hfSelectedLabel" runat="server" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<style type="text/css">
.chat_container {
overflow-y: auto;
display: block;
max-height: 650px;
height: 100%;
min-height: 600px;
font-family: 'Roboto', sans-serif;
}
.selected {
background-color: #f44336;
color: white;
text-align: center;
text-decoration: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$('body').on('click', '[id*=LinkButton1]', function () {
$('[id*=Label3]').removeClass();
$('[id*=Label3]').addClass('badge pull-right theme-bg');
var id = $(this).closest('div').find('[id*=Label3]').html();
var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
if (history.pushState) {
var newUrl = oldURL + "?ID=" + id;
window.history.pushState({ path: newUrl }, '', newUrl);
$('#hfQuerStringID').val(id);
}
$('#hfSelectedLabel').val($(this).closest('div').find('[id*=Label3]').attr('id'));
$(this).closest('div').find('[id*=Label3]').addClass('selected');
return false;
});
function scroll() {
var ChatDiv = $('.chat_container');
var height = ChatDiv[0].scrollHeight;
ChatDiv.scrollTop(height);
}
//On UpdatePanel Refresh.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
var id = $('#hfSelectedLabel').val();
$('#' + id).removeClass();
$('#' + id).addClass('selected');
}
});
};
</script>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[] { new System.Data.DataColumn("Id") });
dt.Rows.Add(1);
dt.Rows.Add(2);
dt.Rows.Add(3);
dt.Rows.Add(4);
ListView1.DataSource = dt;
ListView1.DataBind();
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(hfQuerStringID.Value))
{
string id = hfQuerStringID.Value;
lblID.Text = id;
}
}