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);
}
Related
I have one button when i click on it... first my DIV gets execute/loaded which is working fine for me.
Now parallel i want to send an email to my account how i can call my server side function. Means when Admin click on "Mail Account Detail" i want to pop up DIV as well as Call my Server Side function names "SendAnEmail".
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#patPortalCredDiv">Mail Account Detail</button>
Here is my Div Code.
<div id="patPortalCredDiv" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Mail Credential</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group">
<h4 for="UserName">Note:-
<asp:Label type="text" runat="server" Text="" ID="txtMail"></asp:Label>
</h4>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is my server side function which i want to call also.
protected void SendAndEmail(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Server Side Code Also executed.');", true);
}
Problem in this case were data-toggle and data-target attributtes preventing page to post back.
In your aspx page replace your button for this:
<asp:Button Text="Mail Account Detail" OnClick="SendAndEmail"
CssClass="btn btn-primary" type="button" runat="server" />
In your C# code behind
protected void SendAndEmail(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert",
"$('#patPortalCredDiv').modal('show');", true);
}
This will open bootstrap modal using jQuery
This is what I have done.
I am using HTML and Java for the back-end to send the mail.
<body>
<h3> Please Enter your Email Address </h3>
<form action="Sendmail" method="post">
<input type="text" class="form-control" placeholder="staff_email" email="staff_email">
<input type="submit" value="Submit">
</form>
</body>
On the back end side, I am using Gmail service.
public class EmailUtility{
public static void sendEmail(String host, String port,
final String senderEmail, String senderName, final String password,
String recipientEmail, String subject, String message) throws AddressException,
MessagingException, UnsupportedEncodingException {
// sets SMTP server properties
Properties properties = new Properties();
properties.put("mail.smtp.host", "smtp.gmail.com");
properties.put("mail.smtp.port", "587");
properties.put("mail.smtp.auth", "true");
properties.put("mail.smtp.starttls.enable", "true");
// creates a new session with an authenticator
Authenticator auth = new Authenticator() {
public PasswordAuthentication getPasswordAuthentication() {
return new PasswordAuthentication(senderEmail, password);
}
};
Session session = Session.getInstance(properties, auth);
//creates a new e-mail message
Message msg = new MimeMessage(session);
msg.setFrom(new InternetAddress(senderEmail));
InternetAddress[] toAddresses = { new InternetAddress(recipientEmail) };
msg.setRecipients(Message.RecipientType.TO, toAddresses);
msg.setSubject(subject);
msg.setSentDate(new Date());
msg.setText(message);
//sends the e-mail
Transport.send(msg);
}
}
I am using Tomcat Server. Please add the following lines in the web.xml of Tomcat Server.
<context-param>
<param-name>email</param-name>
<param-value>abc#gmail.com</param-value>
</context-param>
<context-param>
<param-name>name</param-name>
<param-value><Your Name></param-value>
</context-param>
<context-param>
<param-name>pass</param-name>
<param-value> Your Password Comes Here </param-value>
</context-param>
I use boostrap modals for saving data on an ASP.NET Web page and I'm having an issue when users by mistake clicks more than once the "Save" button on the modal. The event fires the number of times the user presses the click. This happens because the modal doesn't closes immediatly. It takes about 1 second to close, enough for the user to click more than once the button.
My database is validated (I'm using Entity Framework) so, there's no duplicate values inserted. But if the user clicks two times, it tries to insert the record two times, and the error message is displayed.
How can I prevent this?
This is the modal code:
<asp:Panel runat="server" ID="pnlBank" DefaultButton="btnSaveBank">
<div class="modal fade" id="modBank" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Banco</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div class="form-group">
<div class="row">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankName" CssClass="form-control" runat="server" MaxLength="150"></asp:TextBox>
</div>
</div>
<label class="col-md-2 control-label">Address</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankAddress" CssClass="form-control" runat="server" MaxLength="150"></asp:TextBox>
</div>
</div>
<div class="row">
<label class="col-md-2 control-label">Phone</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankPhone" CssClass="form-control" runat="server" MaxLength="15"></asp:TextBox>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
Cerrar
<asp:Button ID="btnSaveBank" runat="server" Text="Save" CssClass="btn btn-primary" OnClick="btnSaveBank_Click" />
</div>
</div>
</div>
</div>
</asp:Panel>
And this is the code behind:
protected void btnSaveBank_Click(object sender, EventArgs e)
{
Bank newBank = new Bank();
newBank.Name = txtBankName.Text;
newBank.Address = txtBankAddress.Text;
newBank.Phone = txtBankPhone.Text;
using (bankEntity)
{
try
{
bankEntity.Bank.Add(newBank);
bankEntity.SaveChanges();
lblResult.Text = "Bank successfully saved";
ObtenerBancos();
}
catch (Exception ex)
{
lblResult.Text = "Error when saving bank: " + ex.Message;
}
}
}
You can try disabling the save button and closing the modal via jQuery and once the modal is closed you can re-enable the save button again using jQuery. Just make sure that the jQuery event handlers are defined after btnSaveBank_Click so that btnSaveBank_Click takes precedence over the close/hide trickery:
$(document).ready(function () {
$("#btnSaveBank").click(function() {
$(this).prop("disabled", true);
$("#modBank").modal("hide");
});
$("#modBank").on("hidden.bs.modal", function() {
$("#btnSaveBank").prop("disabled", false);
});
});
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.
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
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.