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;
}
Related
I am trying to prevent my modal from closing when keypress enter is entered in my modal asp textbox.
I have tried to wrap the textbox in another update panel and use an asynchronous postback trigger on textchanged, but thats not quite what I'm looking for. I am trying to create a text entry part which only updates when keypress enter is pressed and not when the text changes, I have also tried adding data-dismiss="modal" to the textbox itself like other pages have suggested, but this just means when I click on the textbox it shuts the modal.
<asp:UpdatePanel ID="upd_mdl_console" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- Ryan Console-->
<div class="modal fade" data-dismiss="modal" data-toggle="modal" data-backdrop="static" data-keyboard="false" id="mdl_console" tabindex="-1" role="dialog">
<div class="modal-dialog2" role="document">
<div class="modal-content _dev_console">
<div class="modal-header _dev_console">
<h5 class="modal-title pull-left" id="H1" runat="server">
<asp:Label runat="server" ID="Label3" Text="DEV CONSOLE"></asp:Label></h5>
<button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<br />
</div>
<div class="modal-body">
<div class="panel-heading _dev_console">
<asp:Literal ID="devbox_line_5" runat="server" Text=""></asp:Literal>
<asp:Literal ID="devbox_line_4" runat="server" Text=""></asp:Literal>
<asp:Literal ID="devbox_line_3" runat="server" Text=""></asp:Literal>
<asp:Literal ID="devbox_line_2" runat="server" Text=""></asp:Literal>
<asp:Literal ID="devbox_line_1" runat="server" Text=""></asp:Literal>
<asp:UpdatePanel ID="upd_mdl_txt" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txt_Devbox" class="form-control _dev_console" runat="server" autocomplete="off"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="panel-heading _dev_console">
<div class="input-group" style="margin-bottom: 10px; width: 100%">
</div>
</div>
</div>
<div style="clear: both"></div>
<div class="modal-footer _dev_console">
<asp:Label ID="Label4" runat="server" Text="Label" Visible="false"></asp:Label>
<%-- <asp:Button ID="Button1" OnClick="lnk_go_Click" class="btn btn-success" runat="server" AutoPostBack="false" Text="Create"></asp:Button>--%>
<button type="button" class="btn btn-secondary _dev_console" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I use the following snippet to disable enter in textboxes. This also prevents triggering of a form post when pressing enter inside a textbox. It might work for preventing the closure of the modal also.
$('input').keypress(function (e) {
return e.keyCode !== 13;
});
If you want to disable the enter in the modal only you could do something like this
$('.modal-body input').keypress(function (e) {
return e.keyCode !== 13;
});
Here my page :
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<%# Register Assembly="Microsoft.ReportViewer.WebForms" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<asp:HiddenField ID="hdnfromDate" Value="" runat="server" />
<asp:HiddenField ID="hdntoDate" Value="" runat="server" />
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Issue Invoice</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="reused_form" runat="server">
<p>
Send invoice to...
</p>
<div class="form-group">
<label for="name">
To:</label>
<input type="text" class="form-control"
id="name" name="name" readonly maxlength="50" runat="server">
</div>
<div class="form-group">
<label for="email">
CC:</label>
<input type="email" ID="cc" class="form-control" runat="server" multiple>
</div>
<div class="form-group">
<strong><i>Note:</i><small> <i>The invoice can not be edited after issuing.</i></small></strong>
</div>
<asp:LinkButton CssClass="btn btn-warning m-btn btn-block btn-lg m-btn--custom m-btn--icon m-btn--air " OnClick="Onbtn3_Click" Text="Issue Invoice " ID="LinkButton3" runat="server"></asp:LinkButton>
</form>
<div id="success_message" style="width: 100%; height: 100%; display: none;">
<h3>Sent your message successfully!</h3>
</div>
<div id="error_message"
style="width: 100%; height: 100%; display: none;">
<h3>Error</h3>
Sorry there was an error sending your form.
</div>
</div>
</div>
</div>
</div>
In cs File i am trying to access email value using cc.Value as for email textbox id is cc. But it always gets empty string. In my default master page i have a form tag which runs at server so if i keep this modal in a form runat server then gives me error saying page can have only one form tag. Please can anyone help me out. Thanks in advance
This may help
There is Text property available, so you can use textBox.Text to get textbox contian. In your case cc.Text.
Try textBox.text(). Should work.
As Html 5 type=“email” control is not available using runat attribute, you can access TextBox like below:
<asp:TextBox ID="txtBoxCc" runat="server" TextMode="Email"></asp:TextBox>
Now in codebehind you can access it like txtBoxCc.Text
Also, you have to put it like below:
if(!Page.IsPostBack) {
string cc = txtBoxCc.Text;
}
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);
I'm very new to CSS styling and Bootstrap stuff, so I'm having too many issues during working on my job project.
Here I have an issue that prevents me to use asp:DropDownList control to be used inside a Bootstrap modal.
Actually what I'm trying to do is that I have a button called New Ticket, so when the user clicks on it a Bootstrap modal should popup includes in its body a form panel which has different controls like Text Boxes, Labels and DropDownLists. These DropDownLists are asp controls, and are being pre-populated in the C# Code-Behind.
Using this form-panel outside the modal is working perfectly, but trying to use it inside the modal brought me to this issue. Below is the error that occurs for me:
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1061: 'ASP.openticket_aspx' does not contain a definition for 'ddlServices_SelectedIndexChanged' and no extension method 'ddlServices_SelectedIndexChanged' accepting a first argument of type 'ASP.openticket_aspx' could be found (are you missing a using directive or an assembly reference?)
This is my Modal code:
<div class="container-fluid">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-lg CenterForm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading h4 text-primary text-center">
Token Registration
</div>
<div class="panel-body">
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="lblCallerID">Caller ID:</label>
<asp:Label class="col-sm-2 control-label" ID="lblCallerID" runat="server" Text="66355356"></asp:Label>
<div class="col-sm-10">
<asp:TextBox CssClass="form-control" ID="txtCallerID" runat="server"></asp:TextBox>
</div>
</div>
<div class="row">
<label class="col-sm-4 control-label" for="lblServices">Complaint/Suggestion:</label>
<div class="col-sm-8">
<asp:DropDownList class="form-control" ID="ddlServices" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
<br />
<div class="row">
<label class="col-xs-2 control-label" for="lblSeverity">Severity:</label>
<div class="col-xs-4">
<asp:DropDownList class="form-control" ID="ddlSeverity" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
<label class="col-xs-2 control-label" for="lblStatus">Status:</label>
<div class="col-xs-4">
<asp:DropDownList class="form-control" ID="ddlStatus" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
<br />
<div class="form-group">
<label class="col-sm-2 control-label" for="lblSubject">Subject:</label>
<div class="col-sm-10">
<asp:TextBox class="form-control" ID="txtSubject" runat="server" placeholder="Enter Subject"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="lblComments">Comments:</label>
<div class="col-sm-10">
<asp:TextBox class="form-control" ID="txtComments" runat="server" placeholder="Enter Comments" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<asp:Label ID="lblmsg" runat="server" CssClass="label label-danger"></asp:Label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" CssClass="btn btn-success" Text="Submit"></asp:Button>
<asp:Button ID="btnCancel" OnClick="btnCancel_Click" runat="server" CssClass="btn btn-danger" Text="Cancel"></asp:Button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">New Ticket</button>
<asp:Button ID="btnNewTicket" OnClick="btnNewTicket_Click" runat="server" CssClass="btn btn-default" Text="Open Ticket"></asp:Button>
</div>
</div>
</div>
</div>
</div>
And here is my try to trigger the modal using a button:
<ul class="nav navbar-nav navbar-right">
<li>New Ticket</li>
<li>New Client</li>
<li>Username</li>
</ul>
Any ideas please?
It is not because bootstrap. It is because you are not handling event properly. You should have following in your code behind
protected void ddlServices_SelectedIndexChanged(Object sender, EventArgs e)
{
// code to handle event
}
You also should have AutoPostBack="true" on dropdown list in mark up.
<asp:DropDownList class="form-control" ID="ddlServices" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
I can also see you are calling same event handler ddlServices_SelectedIndexChanged which seems copy paste error to me. So keep that in account too.
Or if you dont want to handle this event then just remove OnSelectedIndexChanged="ddlServices_SelectedIndexChanged" from your dropdowns.
Assuming that your code is stored in an .aspx page, and you do have a "ddlServices_SelectedIndexChanged" function declared in the related .aspx.cs file, here's my answer:
Go to the top of your .aspx page, and check that the details on the first line are correct.
I've had situations where I've had a beautifully working .aspx page (with a code-behind page), I've copied that .aspx to a second page, renamed it, but Visual Studio hasn't updated the values in the top line of my .aspx page.
For example, if your webpage is called OpenTicket.aspx, then you should have the following at the top of your .aspx page:
<%# Page Title="" Language="C#" AutoEventWireup="true"
CodeBehind="OpenTicket.aspx.cs" Inherits="SomeNamespace.OpenTicket" %>
This explains why ASP.Net sometimes fails to find a code-behind function for one of the controls in an .aspx page.
Before adding the ScriptManager when I was clicking on the login button it was showing the required field warning without page postback but after that it has started to do postback first and then validate fields.
It's required to add a ScriptManager when there is an UpdatePanel on the page.
How can I fix this so it doesn't postback on RequiredFieldValidator?
Login Page
<form id="signinform" runat="server" defaultfocus="username" defaultbutton="LogInBtn">
<asp:scriptmanager id="FormScriptManager" runat="server"></asp:scriptmanager>
<div class="form-signup">
<div class="form-group form-group-info">
<div class="append-icon m-b-30">
<asp:textbox id="username" runat="server" cssclass="form-control c-white form-control-success" placeholder="Username" />
<i class="mdi-action-perm-identity c-light"></i>
<asp:requiredfieldvalidator runat="server" id="UserNameValidator" controltovalidate="username" display="Dynamic" validationgroup="LoginVAL" setfocusonerror="true" cssclass=" f-11 c-red m-b-0" errormessage="The username is required." />
</div>
</div>
<div class="form-group form-group-info">
<div class="append-icon m-b-30">
<asp:textbox id="Password" textmode="Password" runat="server" cssclass="form-control c-white form-control-success" placeholder="Password" />
<i class=" mdi-action-lock-outline c-light"></i>
<asp:requiredfieldvalidator runat="server" id="PasswordValidator" controltovalidate="Password" display="Dynamic" setfocusonerror="true" validationgroup="LoginVAL" cssclass="f-11 c-red m-b-0" errormessage="The password is required." />
</div>
</div>
<div class="togglebutton togglebutton-info">
<label class="c-light normal f-11 m-b-15">
<input type="checkbox" runat="server" name="RememberMe" id="RememberMe" class="md-checkbox">
Remember me?
</label>
</div>
</div>
<asp:placeholder runat="server" id="ErrorMessage" visible="false" viewstatemode="Disabled">
<p id="ErrorMessageContainer" runat="server" class="badge badge-danger m-b-5 f-11">
<asp:Literal runat="server" ID="FailureText" ViewStateMode="Disabled" />
</p>
</asp:placeholder>
<div class="progress-demo">
<asp:linkbutton id="LogInBtn" runat="server" onclick="LogIn" text="Login" cssclass="btn btn-material-indigo btn-block btn-embossed ladda-button" validationgroup="LoginVAL" data-style="zoom-in"></asp:linkbutton>
</div>
<p>
<%-- Enable this once you have account confirmation enabled for password reset functionality--%>
<asp:hyperlink runat="server" id="ForgotPasswordHyperLink" viewstatemode="Disabled">Forgot your password?</asp:hyperlink>
</p>
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div id="LoginModalHeader" runat="server" class="modal-header bg-aero">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons-office-52"></i></button>
<h4 class="modal-title c-white">
<asp:label id="LoginModalTitle" runat="server" />
</h4>
</div>
<asp:updatepanel id="LoginModalUpdatePanel" runat="server">
<ContentTemplate>
<div class="modal-body m-t-10">
<p class=" c-gray w-300 f-13"><asp:Label ID="LoginModalDetails" runat="server" /></p>
</div>
<div class="modal-footer">
<asp:LinkButton runat="server" ID="ResendConfirm" OnClick="SendEmailConfirmationToken" Text="Resend Confirmation" Visible="false" CssClass="btn btn-material-blue-grey btn-embossed" />
<button id="LoginModalCancel" runat="server" type="button" class="btn btn-default btn-embossed" data-dismiss="modal">Cancel</button>
</div>
</ContentTemplate>
</asp:updatepanel>
</div>
</div>
</div>
</form>
I appreciate your efforts in reaching a solution for my problem.
I came across the same issue a while back and was able to resolve it via Page.Validate();.
Basically, before I added ScriptManager everything was working well. When I would click the update button, the field validators would run and prevent a post back until requirements were met. After adding ScriptManager tag, the page would post back rendering my validators pretty much useless.
What I did was add on my update (submit) button click event:
page.validate();
if (Page.IsValid)
{
// Your update or submit code here.
}
This seems to work fine!
Write like this..
<asp:updatepanel id="LoginModalUpdatePanel" runat="server">
<ContentTemplate>
//paste all codes inside here
</ContentTemplate>
</asp:updatepanel>