Hi RoshanMojo,
Please refer below sample.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
var lnkAddComment = $("#<%=lnkAddComment.ClientID%>");
lnkAddComment.click(function () {
divCommentForm.show();
lnkAddComment.hide();
ddlChooseComment.focus();
txtRemark.show();
lblCommentMessage.show();
if ($(ddlChooseComment).val() == "Other") {
txtRemark.show();
txtRemark.focus();
lblRemark.show();
ValidatorEnable(document.getElementById('<%=rfvComment.ClientID%>'), true);
}
else {
lblRemark.hide();
ddlChooseComment.focus();
txtRemark.hide();
ValidatorEnable(document.getElementById('<%=rfvComment.ClientID%>'), false);
}
return false;
});
lnkCancelComment.click(function () {
divCommentForm.hide();
lnkAddComment.show();
txtRemark.val("");
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlComment" class='panel' runat="server" Visible="true" DefaultButton="lnkSaveComment">
<div class='panel-heading panel-heading-font'>
<span id="spanTransporterInfo1" class="hidden-sm my_btn-collapse">Comments</span>
<asp:LinkButton ID="lnkAddComment" data-toggle="collapse" data-target="#divCommentsInfo"
OnClientClick="return false;" CausesValidation="false" runat="server" CssClass="btn btn-danger btn-xs pull-right btn-xs-profile profile-Margin"><b class="glyphicon glyphicon-plus-sign"></b>Comment</asp:LinkButton>
</div>
<div id="divCommentsInfo" class='bio-graph-info btn-collpase panel_show'>
<div class="row">
<div class="col-lg-12">
<asp:Label ID="lblCommentMessage" runat="server"></asp:Label>
</div>
</div>
<div id="divCommentForm" class="form-group mar-top-5">
<div class="row">
<div class="col-lg-12">
<label>
Choose Posted Comments<i>*</i></label>
<asp:DropDownList ID="ddlChooseComment" runat="server" CssClass="form-control">
<asp:ListItem>Other</asp:ListItem>
<asp:ListItem>Phone was Switched Off</asp:ListItem>
<asp:ListItem>Phone was not reachable</asp:ListItem>
<asp:ListItem>Transporter was not interested</asp:ListItem>
<asp:ListItem>Asked to call later</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvCommentOption" ErrorMessage="Please select an option."
runat="server" ControlToValidate="ddlChooseComment" ForeColor="Red" Display="Dynamic"
SetFocusOnError="true" InitialValue="-1" ValidationGroup="AddComment"></asp:RequiredFieldValidator>
</div>
<div class="col-lg-12">
<label>
<asp:Label ID="lblRemark" runat="server">Write your comment<i>*</i></asp:Label></label>
<asp:TextBox ID="txtRemark" class="form-control" Height="130px" TextMode="MultiLine"
runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvComment" ErrorMessage="Please write a comment."
runat="server" ControlToValidate="txtRemark" ForeColor="Red" Display="Dynamic"
SetFocusOnError="true" ValidationGroup="AddComment"></asp:RequiredFieldValidator>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right">
<asp:LinkButton ID="lnkSaveComment" runat="server" CssClass="btn btn-danger btn-xs"
ValidationGroup="AddComment"><span class="glyphicon glyphicon-ok-sign"></span>Save</asp:LinkButton>
<asp:LinkButton ID="lnkCancelComment" runat="server" CssClass="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-sign"></span>Cancel</asp:LinkButton>
</div>
</div>
</div>
<div class="pnl-comment">
<asp:Repeater ID="rptComment" runat="server">
<ItemTemplate>
<p style="border-bottom: 1px solid #f1f1f1;">
<b>
<%#Eval("CommentBy")%></b> added a comment "<b><i><%#Eval("Remark")%></i></b>"
on
<%#Eval("AddedDt")%><br />
</p>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</asp:Panel>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Data;
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("CommentBy", typeof(string)),
new DataColumn("Remark", typeof(string)),
new DataColumn("AddedDt", typeof(string)) });
dt.Rows.Add("abCHHGJH", "grhgrhghghr", "grhghghr");
dt.Rows.Add("tttttttttttt", "yyyyyyyyyy", "uuuuuuuuuuuu");
rptComment.DataSource = dt;
rptComment.DataBind();
}
}
Screenshot
