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.
Related
SHOW Popup Error when click LinkButton I have No Idea how to solve this issue?
PopUp
<%--popupBind function--%>
<link type="text/css" rel="Stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
function OpenPopUp() {
debugger;
$('#myModal').modal('show');
}
</script>
<%--end--%>
<%-- PopUp Code--%>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width: 55%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<asp:Label ID="lblid" runat="server" CssClass="patient-detail"></asp:Label></h4>
<asp:Label ID="lblservicename" runat="server" CssClass="patient-detail" Style="color: green; font-size: 16px;">
Header
</asp:Label>
</div>
<div class="modal-body">
<asp:Button ID="btnProcess" runat="server" Text="Start" CssClass="btn btn-default" />
<asp:Button ID="btnpending" runat="server" Text="Waiting" CssClass="btn btn-default"/>
<asp:Button ID="btnclr" runat="server" Text="Completed" CssClass="btn btn-default" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<%--end--%>
Button (Click On Button for Open PoPuP)
<asp:Button OnClick="Unnamed_Click" ID="popup" runat="server" />
Button Event On Server Side
protected void Unnamed_Click(object sender, EventArgs e)
{
string dQuery = "";
string DCode = Convert.ToString(Session["DCode"]);
dQuery = #"SELECT * FROM TABLE";
DataTable dtButton = obj.GetDataTable(dQuery);
rptButtonMaster.DataSource = dtButton;
rptButtonMaster.DataBind();
// Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript", "OpenPopUp();", true);
ScriptManager.RegisterStartupScript(this, Page.GetType(), "success", "<script> OpenPopUp(); </script>", false);
}
When Click On Button (Call Javascript Function)
<script>
function OpenPopUp() {
debugger;
$('#myModal').modal('show');
}
</script>
Getting All the time same error on Load
Error : Model is not a function
What am I missing??
Wrap your call into a document ready statement
ScriptManager.RegisterStartupScript(this, Page.GetType(), "success", "<script>$(function(){OpenPopUp();})</script>", false);
Make sure the script is registered/loads after the bootstrap and jquery libraries
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;
}
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 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