Pre requests - Use bootstrap CDN links
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Objective- Add comment from bootstrap modal pop up
Write html outside datalist code
where datalist id- post_datalist
Bootstrap Modal code (we are using a asp hidden field control in modal)
------------------------------
<div class="modal fade" id="add_comment" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="H2">Comment</h4>
</div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div class="modal-body" style="height: 150px;">
<div class="form-group">
<div class="col-xs-12">
<asp:TextBox ID="comment_txt" runat="server" TextMode="MultiLine" Style="width: 100%; min-height: 90px;"></asp:TextBox>
<asp:HiddenField ID="post_id" runat="server" />
</div>
</div>
</div>
<div class="modal-footer">
<asp:Label ID="Label2" Visible="false" runat="server"></asp:Label>
<asp:Button ID="post_comment" runat="server" Text="Post comment" CssClass="btn btn-info" OnClick="post_comment_Click" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="post_datalist" EventName="ItemCommand" />
<asp:AsyncPostBackTrigger ControlID="post_comment" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
Now in code behind inside post_datalist_ItemCommand --
//add_comment
if ((e.CommandName == "comment") && (e.CommandArgument != null))
{
int id = Convert.ToInt32(e.CommandArgument);
string code = Convert.ToString(id);
post_id.Value = code;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#add_comment').modal('show');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "CommentModalScript", sb.ToString(), false);
}
Now when the modal opens you can write the comment and click button- here is the button click function
protected void post_comment_Click(object sender, EventArgs e)
{
string postid = post_id.Value;
Int32 post_id_value = Convert.ToInt32(postid);
comment_save(post_id_value); // here you can call function to save the data
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#add_comment').modal('hide');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "CommentModalScript", sb.ToString(), false);
BindParentDataList();// bind data /refresh
}