I have the following code to display a bootstrap modal popup in a webforms application with a master page. This works fine on a small one-page test site. But when I move it to my actual site, somehow the popup doesn't show up. There are no javascript errors for me to debug. I have moved around, the javascript code to master page's head and also the modal popup div to the master page's body. Still the popup doesn't show!
aspx page:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style>
.vertical-alignment-helper {
display: table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
</style>
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
function btnRedirect_Click() {
window.location.replace("Redirected.aspx?
FirstName = John & LastName = Velu ");
}
</script>
<br/>
<br/>
<div class="row">
<div class="col-md-4">
<asp:Button runat="server" Text="Display Popup" OnClick="OnClick" />
</div>
</div>
<div class="modal fade" id="myModal" data-backdrop="static" data- keyboard="false">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<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" style="color: white">
Test</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" Text="Testing..." />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnRedirect" OnClick="Javascript:btnRedirect_Click();">
Redirect</button>
<button type="button" class="btn btn-default" data- dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" style="display: none;" id="btnShowPopup" class="btn
btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
</button>
</asp:Content>
Code-behind
protected void btnLogin_Click(object sender, EventArgs e)
{
Response.Redirect("Redirected.aspx");
}
protected void OnClick(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert",
"ShowPopup();", true);
return;
}
Related
Good day!
I have been following this post for launching a bootstrap modal popup from my code behind but unfortunately it is not working.
Script
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
Button
<asp:LinkButton class="alert alert-warning" ID="LinkButton1" runat="server" OnClick="UpdateItem_click" CommandArgument='<%# Eval("Id") %>' >Update</asp:LinkButton>
Code Behind
protected void UpdateItem_click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
Modal
<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-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">title
</h4>
</div>
<div class="modal-body">
<asp:TextBox runat="server" ID="Username_Update" CssClass="form-control" />
<asp:TextBox runat="server" ID="bookId2" CssClass="form-control" />
<input type="text" runat="server" id="Username_Update2" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
close
</button>
<button type="button" class="btn btn-primary">
save
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
Instead of using a Button just like from the post, I used a LinkButton because I wanted a certain value to be passed in my code behind then select all data needed and populate the modal which will then be launched using this code behind code.
Unfortunately, the modal is not showing and I have no idea whether the code is working properly or not.
Thanks in advance
Ok. I have found the problem. I found out(with the help of a colleague) that my button's OnClick function was not working. Since I have a Validator in my page, I've tried adding each button with this code CausesValidation="false" and now the code works perfectly.
For my ASP Webforms Application I use a Modal from Bootstrap for the settings.
<asp:Button CssClass="btn btn-default" data-toggle="modal" data-target="#myModal" OnClientClick="return false;" runat="server" Text="Einstellungen" />
As you can see, I already have to prevent the Button for postback. Because if I click the button the Modal opens, postback starts and the Modal close.
So this problem I fixed.
But now if I open the modal and wanna click a Button in this Modal:
<asp:Button runat="server" ID="dropbox" Text="Mit Dropbox anmelden" CausesValidation="false" OnClick="dropboxButton" CssClass="btn btn-info" />
The Modal close... But I want that the user sees that the Accountinformation from him filled in.
Also I have a field for adding entries after clicking the "+" Button. After every click for adding, the modal will be closed...
I already tried data-backdrop="static" and something with Javascript and e.preventDefault();
Any ideas?
Clicking a server side ASP.NET Button control will cause a PostBack and your page will be re-loaded, therefore the modal will be closed.What you can do is call the code below in the click event to re-open the modal after the click event:
Code behind:
protected void btnClickMe_Click(object sender, EventArgs e)
{
lblTest.Text = DateTime.Now.ToString("dd MMM yyyy - HH:mm:ss");
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "showModal();", true);
}
.ASPX:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
function showModal() {
$('#myModal').modal('show');
}
$(function () {
$("#btnShowModal").click(function () {
showModal();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnShowModal" value="Show Modal" />
<div id="myModal" class="modal fade"">
<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">Modal popup</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblTest" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="btnClickMe" runat="server" Text="Click Me" OnClick="btnClickMe_Click" />
</div>
</div>
</div>
</div>
</form>
</body>
Why not trying this
<asp:Button ID="btnSpareRequisition" CssClass="btn btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#requestSpareModalId" OnClientClick="return false"/>
Here is my complete code
<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.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<%-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>--%>
<asp:Button ID="btnSpareRequisition" CssClass="btn btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#myModal" OnClientClick="return false" />
<!-- Modal -->
<div class="modal fade" id="myModal" 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">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>
I am working on a asp.net c# project which has a input box and a button. Input box has some validation and on successful validation I would like to open a bootstrap modal to fill further information. Is there any way to do this?
I tried using the JavaScript but its not working for me. Below is the code for same.
Default.aspx file code:
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" data-toggle="modal" data-target="#sell_request" />
Bootstrap Modal code:
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
CS Code on button click:
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
I took your code as is and made the following changes:
Removed data-toggle="modal" data-target="#sell_request" from btnSell
Added CDN references to jQuery,bootstrap.js and bootstrap.css (in that order).
It works now!
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" />
</form>
</body>
Output:
Your bootstrap modal .aspx code looks good as far as I can tell. I am doing something similar, but I have the javascript defined in my .aspx file, and I just call it from code behind using script manager. Here is a sample of my code from default.aspx.cs:
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openContactModal();", true);
This calls a java script function that is defined in default.aspx:
<!--Modal Popup for Contacts-->
<script type="text/javascript">
/* Allows us to open and close the Address Book modal from code behind */
function openContactModal() {
$('#contactModal').modal('show');
}
function closeContactModal() {
$('#contactModal').modal('hide');
}
</script>
You can substitute openSellRequest() and #sell_request into this code and see if it works for you.
EDIT: Here is a sample of the default.aspx code for my modals - there are several extra elements in here, although I am not sure that they are required:
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<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="contactModalLabel">Contact Info for <asp:Label ID="lblContactHeaderName" runat="server"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Table ID="contactTable" runat="server" Width="95%">
<asp:TableRow>
... your content here ...
</asp:TableRow>
</asp:Table>
</div>
<div class="modal-footer">
<asp:Button ID="deleteContact" CssClass="btn btn-danger" runat="server" Text="Delete" OnClick="deleteContact_Click" Visible="false" />
<asp:Button ID="editContact" CssClass="btn btn-primary" runat="server" Text="Edit" onclick="editContact_Click" />
<asp:Button ID="saveContact" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="saveContact_Click" Visible="false" />
<asp:Button ID="cancelContact" CssClass="btn btn-default" data-dismiss="modal" runat="server" Text="Close" />
</div>
</div>
</div>
</div>
And here is my button code:
<asp:Button ID="btnShowContact" CssClass="btn btn-primary btn-sm dont-print" runat="server" OnClick="showContact" Text="Show Contact Details" data-toggle="modal" data-target="#contactModal" />
I am trying to open the bootstrap modal from the code behind. However, when I click the button the alert message comes up but the modal never shows up on the page. I have already looked at other questions but none work for me. Please is there anything that I am missing?
ASPX page
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function openModal() {
alert('hiii');
$('#myModal').modal('show');
}
</script>
<div id="myModal" class="modal fade" role="dialog" runat="server">
<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">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>
<asp:Button runat="server" ID="btnUploadFile" Text="Upload File" OnClick="btnUploadFile_OnClick" class="btn standard-gradient disabled" />
</div>
</asp:Content>
Code Behind
protected void btnUploadFile_OnClick(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
I have a master page Default.aspx with layout:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap.min.css" />
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<input type="hidden" runat="server" value="" id="hiddenAlert" name="hiddenAlert" clientidmode="Static" />
………….
<div class="modal modalMain fade" id="myModalMain" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow-y: hidden;">
<div class="modal-dialog" style="position: relative; top: 25%; left: 0%; width: 300px;">
<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>
</div>
<div id="modalBody" class="modal-body modal-body-main">
...
</div>
<div class="modal-footer" style="margin-top: 0px; padding: 5px; text-align: center;">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
if ($('#hiddenAlert').val() != '') {
$('.modal-body-main').html($('#hiddenAlert').val());
$('.modalMain').modal('show');
}
</script>
</body>
</html>
And in codebedind:
protected void Page_Load(object sender, EventArgs e)
{
………..
string alert = this.Request["alert"];
if(alert == "success")
hiddenAlert.Value = "Data saved successfull";
else
hiddenAlert.Value = "Data saved fail";
}
And in a other page , I have a form and a submit button
<asp:Button ID="btnLuu" runat="server" Text="Lưu" CssClass="input" onclick="btnLuu_Click"/>
In codebedind:
protected void btnLuu_Click(object sender, EventArgs e)
{
….//save your data
//if save successful
Response.Redirect("Default.aspx?Module=" + cModule + "&l=" + language_id + "&p=" + p + "&alert=success");
}
So, you can show any alert content : success, fail or exist data … with a modal pop up for all of pages in your website.
I have a bootstrap modal popup and in the body of it I'm displaying a Treeview control.
When the text of the node is larger than the width of the popup the text is displaying outside the popup.
How can I dynamically increase the width with text
CS
protected void Page_Load(object sender, EventArgs e)
{
TreeView1.Nodes.Clear();
TreeView1.ExpandAll();
TreeView1.Nodes.Add(new TreeNode("Fruits", "Fruits"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("MangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMang0", "Mango"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Apple", "Apple"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("PineappleMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMangoMango", "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", "openTreeview();", true);
}
HTML:
<div class="modal fade" id="Div4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog custom-class" id="modalbodyforricheditor">
<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="H3">Editor</h4>
</div>
<div class="modal-body">
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" SelectAction="none">
</asp:TreeView>
<div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-6 col-md-pull-4">
<asp:LinkButton ID="lbtnUpdateRichTextEditor" runat="server" class="btn btn-default">Update</asp:LinkButton>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Script
function openTreeview() {
$('#Div4').modal('show');
}
You can set a width: auto; via css while maintaining min and max width using min-widthand max-width
If you don't want the text to overflow the modal while the max-width is reached, you should use overflow-hiddenproperty