I am trying to open a modal on a button click. Modal can be opened using a button click
<asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1" Text="View Details" />
I need to open this modal at the end of a function, but I don't know how to make that happen, from c# code behind. I tried:
protected void Button2_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$('#View1').modal('show');</script>", false);
}
Design
<!-- modal 1 -->
<div class="modal fade" id="View1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" runat="server">
<div class="modal-dialog">
<div class="modal-content">
<div class="alert alert-success">
<strong>Well done!</strong> Successfully Saved
</div>
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
First of all please make sure ScriptManager is placed in form tag of aspx page.
secondly make sure the code is working on client side.
Refer my below code:
aspx code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="myModal" 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">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>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:ScriptManager runat="server"></asp:ScriptManager>
</form>
</body>
serverside code:
protected void Button1_Click(object sender, EventArgs e)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script language='javascript'>");
sb.Append(#"$('#myModal').modal('show');");
sb.Append(#"</script>");
ClientScript.RegisterStartupScript(this.GetType(), "JSScript", sb.ToString());
}
I would guess that your script is running before the HTML it's trying to refer to is actually rendered. You can check it easily by doing a View Source on your rendered page. If that startup script is higher up the page than your HTML for your modal, then it won't work because the script runs as soon as it's rendered on the page, and it's before the HTML is rendered, so it tries to run "show" on an element that doesn't exist yet. You don't get an error because the way jQuery works means that if its selector doesn't match any element(s), it simply doesn't execute whatever command you specified to be run on the selected element(s).
If this is the issue, you can fix it easily by changing your startup script so that it doesn't run the "show" code until the whole page has loaded. This can be done using jQuery's standard "document.ready" syntax (I have used the shorthand version here):
ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$(function() { $('#View1').modal('show'); });</script>", false);
You also need to ensure you've got a ScriptManager control in your page somewhere (within the <form> tag):
<asp:ScriptManager runat="server"></asp:ScriptManager>
There can be two problems:
You are trying to load the model before page loads
Your id of modal is different
Change view1 to div1
Please try this code
ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "
<script>$(document).ready(function(){$('#Div1').modal('show');});</script>", false);
Related
I am currently trying to use Modal Dialog box from Bootstrap. I have did exactly what the tutorial shows but whenever I click on my button, the Modal Dialog does not show. May I know why?
Here's my code
<body>
<form runat="server">
<asp:ImageButton runat="server" ImageUrl="image.url" data-toggle="modal" data-target="#login" />
<div class="modal" id="login" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<label>Login</label>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>EmAIL-iD</label>
<input type="text" placeholder="Email-Id" id="email" />
</div>
</form>
</div>
<div class="modal-footer">
<button value="Login" id="login"></button>
</div>
</div>
</div>
</div>
</form>
</body>
<script type="text/javascript" src="Scripts/bootstrap.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
Bootstrap depends on jQuery already being loaded so it should be imported before the bootstrap.js file.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.js"></script>
If that is your issue you'll be seeing a jQuery is not defined error in the browser console.
You are using server side control(asp:ImageButton). SO postback will happen.
Use button control
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login">Open Modal</button>
There could be a few reasons for this.
First, you have nested forms. Change the outer one to a div:
<div runat="server">
Secondly, there are 2 elements with the id login:
<div class="modal" id="login" tabindex="-1">
<button value="Login" id="login"></button>
Change the id of the button to something different.
If it still fails after these corrections, open up developer tools in your browser (F12) and see if there are errors in the console (maybe the jquery lib could not be reached).
Create a css class with image as background, and add this class to button.
<style>
.bgButton{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>
<button type="button" class="btn btn-info btn-lg bgButton" data-toggle="modal" data-target="#login"></button>
Need help on bootstrap alert function,below is my code that use to popup alert.
<div id="asd" runat="server">
<div class="alert alert-danger" id="success-alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong> Pending Approval-HR(Please approve now)</strong> Click to redirect
</div>
</div>
The alert text i want get from Database as well as url.The total alert will popup is depend on total data from database.
Your question is not much clear. Use ajax alert may fix your problem
string message = "alert('Hello! Mudassar.')";
ScriptManager.RegisterClientScriptBlock((sender as Control), this.GetType(), "alert", message, true);
Use Session variable Or Label and set value from database .
<div id="asd" runat="server">
<div class="alert alert-danger" id="success-alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong> Pending Approval-HR(Please approve now)</strong> <asp:Label ID="lbl_text" Text=""/>
</div>
</div>
I have drop down with "Create New" option.
I need to display the popup window when user clicks "Create New" in dropdown then Popup should display.
function ShowPopup()
{
var a = document.getElementById('<%= DropDownConfigFile.ClientID %>').selectedIndex;
var b = document.getElementById('<%= DropDownConfigFile.ClientID %>').options[a].value;
// window.ShowPopup("ModalPop.aspx");
window.open("ModalPop.aspx", "List");
I am calling this function here like,
<asp:DropDownList ID="DropDownConfigFile" runat="server" CssClass="selectpicker" onchange = "ShowPopup()">
but popup is displaying in another window. not on the same window.
any wrong in this code.
i think you are looking for
Jquery Dialog
and also refer
Window.open
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<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>
</head>
<body>
<div class="container">
<h2>Modal Popup Using Bootstrap</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>
<!-- 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>
</body>
</html>
I have a modal that pops up when you click a button, inside that modal I have a save button. When that save button is pressed I would like to fire some C# code in a with an OnClick function....
Can anyone tell me why this isn't working for me?
ASP.NET
<div class="modal fade" id="deviceModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Select</h4>
</div>
<div class="modal-body">
<asp:DropDownList ID="drpDownID" runat="server" CssClass="fields" EnableViewState="true">
<asp:ListItem Text="<Select>" Value="0" />
</asp:DropDownList>
</div>
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" Text="Save" data-dismiss="modal" CssClass="btn btn-primary" OnClick="btnSave_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" data-dismiss="modal" CssClass="btn btn-danger" OnClick="btnClose_Click" />
</div>
</div>
</div>
</div>
C#
protected void btnSave_Click(object sender, EventArgs e)
{
string test = "";
test = drpDownID.SelectedItem.ToString();
}
It won't even hit my break point.... And this is embedded in a form tag with a runat server
It works fine if I take the save button outside of the modal, but that completely defeats the purpose of the modal. So it has to be something with modal don't like click events very much...
Have you tried adding () to the onclick? like OnClick="btnSave_Click()".
EDIT: You can probably ignore that. It doesn't seem to matter for asp tags. Maybe this question can help you: ASP.NET button inside bootstrap modal not triggering click event
If your click on the save doesn't trigger a postback inside the dialog and it does outside the dialog: Can you use Firebug in Firefox to see whether the Save button is still part of the form?
I know JQuery dialog brings the container to the bottom of the body and therefor takes it out of a possible form, resulting in form posts not triggering from dialogues. I have a nice fix for this JQuery dialog issue, but that's probably not part of this topic.
I am trying to do some styling on my page, and I really would like to implement the built -in modal that bootstrap has for displaying my ValidationSummary control, along with any other messages I may want. So far, I can get the modal to pop up, but the button never reaches my OnClick method, and it does not display the validation summary. I assume this has something to do with posting, and I was wondering if there is a way around this, and if I can still implement the modal?
My page looks something like this currently:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
<script>
//MODAL SCRIPT
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
...
<!-- PROGRAM NAME -->
<p>
<asp:Label ID="ProgramName_Label" runat="server" Text="Program Name:" CssClass="label-program"></asp:Label>
<asp:TextBox ID="ProgramName" runat="server" class="form-control text-fix"></asp:TextBox>
</p>
<asp:RequiredFieldValidator ID="ProgramNameValidator" runat="server" ErrorMessage="Program Name is required." ControlToValidate="ProgramName"></asp:RequiredFieldValidator>
...
<!-- SUBMIT BUTTON -->
<div class="col-md-12" align="center">
<asp:LinkButton ID="SubmitProgram" runat="server" OnClick="SubmitProgram_Click"
CssClass="listview-buttons" Font-Underline="false" data-toggle="modal"
data-target="#myModal">Submit Program</asp:LinkButton>
</div>
<!-- BOOTSTRAP MODAL DIALOG -->
<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:Label ID="ValidationList" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
All you have to do is to add this function on your page:
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$('#myModal').modal('show');
return false;
}
return true;
}