I have a tree view in a bootstrap modal popup body with OnTreeNodeCheckChanged.
<div class="modal fade" id="myModal" 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="myModalLabel">Messages</h4>
</div>
<div class="modal-body">
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" OnTreeNodeCheckChanged="TreeView1_TreeNodeCheckChanged">
</asp:TreeView>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The script is :
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
I have a button and when the button is clicked the popup with the tree view is displayed
protected void LinkButton1_Click(object sender, EventArgs e)
{
TreeView1.Nodes.Add(new TreeNode("Fruits", "Fruits"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Mango", "Mango"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Apple", "Apple"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Pineapple", "Pineapple"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Orange", "Orange"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Grapes", "Grapes"));
TreeView1.Nodes.Add(new TreeNode("Vegetables", "Vegetables"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Carrot", "Carrot"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Cauliflower", "Cauliflower"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Potato", "Potato"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Tomato", "Tomato"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Onion", "Onion"));
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
When the nodes are checked OnTreeNodeCheckChanged event is not firing.When I close the popup and again click the button then the event is OnTreeNodeCheckChanged firing, i.e., the event is firing only when the buton is clicked twice.
What am I doing wrong, the event is not firing for the first time
Related
So i have this code here for the pictures, it works perfectly with the first but it doesn't update the modal for the next.
<a id="modal-456343" href="#modal-container-456343" role="button" class="btn" data-toggle="modal"><img src="~/Images/#(item.Id).jpg" style="height:100px; width:100px;" /></a>
<div class="modal fade" id="modal-container-456343" 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-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
#Html.DisplayFor(modelItem => item.Overskrift)
</h4>
</div>
<div class="modal-body">
<div>
<img id="i" src="~/Images/#(item.Id).jpg" style="width:100%; height:100%">
</div>
</div>
</div>
</div>
</div>
i would like for it to update or create a new Modal when clicking on a new picture. do you guys have some suggestions?
Thanks in advance.
The problem is you have duplicate id so it would just work for the first one, your html is invalid right one because every element should have unique id, just give then unique id to make it work properly like:
<a id="#("modal-"+item.Id)" href="#("#modal-container-"+item.Id)" role="button"
class="btn" data-toggle="modal">
<img src="~/Images/#(item.Id).jpg" style="height:100px; width:100px;" />
</a>
<div class="modal fade" id="#("modal-container-"+item.Id)" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
or this way:
<a id="modal-#(item.Id)" href="#modal-container-#(item.Id)" role="button"
class="btn" data-toggle="modal">
<img src="~/Images/#(item.Id).jpg" style="height:100px; width:100px;" />
</a>
<div class="modal fade" id="modal-container-#item.Id)" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
I called that popup in a button click like this:
<li>
<span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label>
</li>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I dont know why it is comming like that. I cant even close that.
I want it to be like this:
The code you have have works on my machine! There must be another problem outside of the code you have given. Paste this code into a blank .html document and run it then work back to what the difference is between it and yours.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<li>
<span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label>
</li>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have to write below code on close button event :
$('#myModal').modal('hide');
$('.modal-backdrop').removeClass('modal-backdrop');
$('.fade').removeClass('fade');
$('.in').removeClass('in');
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});
Please use below code for trigger button event :
$.ajax({
url: '/test/test?id=' + id,
type: "Post",
async: false,
dataType: "html",
contentType: "application/json;charset=utf-8",
success: function (result) {
//Your div name where you want to show model popup data
$("#YourResultDivName").empty();
$("#YourResultDivName").html(result);
//your button click event trigger from here for open model popup
$("#btnhdnModelPopup").trigger('click');
}
});
Check Below HTML code for model popup :
<form id="ModelPopupForm" class="form-horizontal">
<button type="button" id="btnhdnModelPopup" style="display: none;" class="btn btn-info btn-lg" data-toggle="modal" data-target="#divModelPopup"></button>
<div class="modal fade" id="divModelPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-95" role="document">
<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="myModalLabel">Model Title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
Your Data
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
it will work perfectly !!
I have the following code:
<asp:Button ID="btnDelete" runat="server" Text="Delete Report" OnClientClick="return confirm ('This will delete the report. Continue?');" />
Once the user clicks on OK how do I get the server side script to fire that actually deletes.
I had
OnClick="btnDelete_Click"
on the above code but nothing
happened.
Open your code behind and add
public void btnDelete_Click(object sender, EventArgs e)
{
//Your logic here
}
You can use bootstrap's modal.
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="showDialog_Event" />
Page:
<div class="container">
<div id="modalDialog" class="modal" role="dialog">
<div class="modal-dialog modal-sm" data-backdrop="static">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title text-center">
<h4>Message</h4>
</div>
</div>
<div id="modalBodyDialog" class="modal-body">
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btnOkDialog" CssClass="btn btn-default" Text="Ok" OnClick="btnOkDialog_Click" />
<input type="button" value="Cancel" data-dismiss="modal" />
</div>
</div>
</div>
</div>
Code:
public void showDialog_Event(object sender, EventArgs e) {
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script type='text/javascript'>");
sb.Append("$('#modalDialog').modal({'backdrop': 'static', 'keyboard': 'static', 'show': true});");
sb.Append("$('#modalBodyDialog').html('<ul><li>");
sb.Append(message);
sb.Append("</li></ul>')");
sb.Append(#"</script>");
Page.ClientScript.RegisterStartupScript(this.GetType(), "ModalScript", sb.ToString(), false);
}
Get event confirm (btn OK)
public void btnOkDialog(object sender, EventArgs e) {
// your code for delete
}
This example need bootstrap and jquery.
Net webform application implementing Bootstrap. Currently I have a label and a text box displayed in Bootstrap - Modal to which Im trying to send the data from the server c# file. For some reason the Modal disappears and doesnt show anything on the UI.
ASPx file
<!-- Button to trigger modal -->
Launch demo modal
<%--<asp:Button ID="Button1" role="button" type="button" runat="server" Text="Modal" class="btn btn-lg btn-success" data-toggle="modal" data-target="#myModal"/>--%>
<!-- Modal -->
<div id="myModal" class="modal fade" 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-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
C# file
protected void Click_Me(object sender, EventArgs e)
{
Label1.Text = "test label";
TextBox1.Text = "text box text";
modal_Img.Src = "test path";
}
Please advice
ps : do i need to use an Update panel ?
An Update Panel would likely not be the best solution for this because only a partial amount of the html is updated and the Javascript/Jquery for the modal is not being called again after the partial postback.
You need some way of invoking the Javascript again after the postback. You could invoke the Javascript needed to open the modal on your Click_Me event.
protected void Click_Me(object sender, EventArgs e)
{
// do stuff
Label1.Text = "test label";
TextBox1.Text = "text box text";
modal_Img.Src = "test path";
// make sure the modal opens
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>$( document ).ready(function() { $('#MyModal').modal('show')});</script>", false);
}
How to display data in Bootstrap Modal when link button click in ASP.NET. In my code
When i click on link button Modal is opening, but assign values are not displaying. Please tell me how to display modal with assigned values.
Thanks.
.aspx Code:
<asp:LinkButton ID="linkButton8" runat="server" data-toggle="modal" data-target="#myModal" OnClick="linkButton_Click">CIS Information</asp:LinkButton>
<div class="modal" id="myModal" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel" align="center">Candidate Information Sheet</h4>
</div>
<div class="modal-body">
<table class="table table-bordered" align="center">
<tr>
<td>Name</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
<td>Email</td>
<td>
<asp:TextBox ID="txtEnail" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-ismiss="modal">Close</button>
</div>
</div>
</div>
</div>
C# Code:
protected void linkButton_Click(object sender, EventArgs e)
{
txtName.Text = "Name";
txtEnail.Text = "Mail#gmail.com";
}
Remove the data-toggle and update the code behind to be like this:
protected void linkButton_Click(object sender, EventArgs e)
{
txtName.Text = "Name";
txtEnail.Text = "Mail#gmail.com";
Page.ClientScript.RegisterStartupScript(GetType(), "modelBox", "$("#myModal").modal('show');", true);
}
It is better though to make the link button has a client side click event that gets the data through ajax, set the textboxs values and use the same modal('show') JavaScript function to display the modal box, this will be more efficient and user friendly.
Try adding UseSubmitBehavior="false" and using an asp:button instead.
<asp:Button ID="btnModal" runat="server" data-toggle="modal" data-target="#myModal" OnClick="linkButton_Click" UseSubmitBehavior="false">CIS Information</asp:Button>
The UseSubmitBehavior attribute determines whether the Button uses the browsers submit functionality or ASP.NET postback. By default it is set to true.
Edit
Due to linkButton not having the "UseSubmitBehavior" property.