I have my ValidationSummary showing in a modal dialog. That is working fine.
However my code-behind performs some database lookups and adds messages with a CustomValidator to my ValidationSummary.
This worked fine before I started showing my ValidationSummary in the dialog. But now when the CustomValidator is invalid it doesn't show in the ValidationSummary dialog.
The dialog comes up when other fields are invalid, but not for the CustomValidator messages from code-behind.
Here's the code that shows the dialog when the page isn't valid:
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$("#modal_validationSummary").modal('show');
return false;
}
return true;
}
</script>
Validation Summary code:
<div class="modal modal-danger" id="modal_validationSummary" 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">Invalid Login</h4>
</div>
<div class="modal-body clearfix">
<asp:ValidationSummary ID="LoginValidationSummary" runat="server"
ValidationGroup="LoginGroup" HeaderText="<div class='validationheader'>Please address the issues below</div>"
CssClass="validationsummary" DisplayMode="BulletList"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-clean" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My code-behind that adds the CustomValidator:
CustomValidator cv = new CustomValidator();
cv.IsValid = false;
cv.ErrorMessage = "Login not found. Please try again.";
cv.ValidationGroup = "LoginGroup";
this.Page.Validators.Add(cv);
Thanks for any help!
So the sequence of events is: you post back, the validator is added, the page renders, and the Validation Summary doesn't show the error?
At what point is the validation summary displayed? If it's before your initial postback, then your validation message can't appear because validation is preventing you from posting back, and the validation doesn't happen until after postback.
There might also be an issue with the CustomValidator not being added to the Controls collection, but I'm not sure about that.
ETA: a little research reinforced my belief that the pop-up ValidationSummary window only works with client-side validation. Yours is server-side. You can make a CustomValidator function as a client-side validator while still performing work on the server, but you need to:
Define a client-side validation function;
Perform an AJAX call within that client-side function;
Declare your CustomValidator in the markup. (You could still add it dynamically, but it would be on your initial render, and you'd have to add it to the Controls collection.)
That's the very condensed version of it, anyway.
Related
I am having a problem with my bootstrap modal displaying inline with the html on the homepage of my site(AKA it is not invisible, it shows on the page). I have open sourced this project, so it is available here to view:
AdHoc Reporting Engine
This is a weird problem which suddenly popped up when I added panels to the page.
The following is my modal's code:
<!-- Placing excel upload modal here... -->
#using (Html.BeginForm("UploadExcel", "Home", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal" })) {
<div class="modal fade" id="excelModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Excel Upload</h4>
</div>
<div class="modal-body">
<p>Please upload an excel file that contains the data you are wishing to include in the report parameters.</p>
</div>
<div class="modal-footer">
<div>
<div class="form-group">
#Html.Label("Excel File:", new { #class = "control-label col-md-2" })
<div class="col-md-10">
<input id="excelFile"
name="excelFile"
type="file" />
<button class="btn btn-primary"
type="button"
ng-click="ExcelUpload()">
Submit
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
The project is now open sourced, so you can download the whole thing. You will just have to know how to set up an instance of OracleXE, the learner's (free) edition. The project itself is a form of reporting engine, difference being that the user actually has to browse out to it in order to get their report.
You must call $('#excelModal').modal() at some point so the logic to turn it into a modal fires.
You just need to pass it an option to hide the modal until you show it via some event:
$('#excelModal').modal({
show: false
})
Correct me if I'm wrong but i'm not actually seeing where you hide the modal as default. It is my understanding that modals are not hidden by default. To the HTML compiler you are just making a regular modal that is shown to the user on page load.
Something like:
<div class="modal fade" id="excelModal" role="dialog" aria-hidden="true">
or
<div class="modal fade" id="excelModal" role="dialog" hidden="true">
aria-hidden means:
ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities.
per: What's the difference between HTML 'hidden' and 'aria-hidden' attributes?
And then to show the modal with jquery would be
$("#excelModal).modal('show')
Please let me know if I am wrong and you are hiding the modal. Or if there is a better way to hide and show modals. I'm learning too.
I created an ASP.NET Web Application (webforms) using visual studio 2013. bootstrap has been created and working properly.
my plan is to show a modal dialog which work perfectly as below using data-target attribute:
<div id="confimDialog" class="modal fade" tabindex="-1">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Your request has been submitted successfully.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<asp:Button runat="server" Text="Submit" data-target="#confirmDialog" />
When I moved to the next step to show the confirmation from code behind, after executing some update in my database, the modal dialog never showed up:
protected void Submit_Click(object sender, EventArgs e)
{
//my database codes here
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "Confirm();", true);
}
and for sure I added the following script to my aspx page:
<asp:Button runat="server" Text="Submit" CssClass="btn btn-primary" OnClick="Submit_Click" />
<script>
function Confirm () {
$('#confirmDialog').modal('show');
return true;
};
</script>
I spent two days in this problem without any solution... I saw that there are some problem in showing a modal dialog from code behind, while many people say it's working using this codes.
could you please help in this or propose any alternative solution to show a confirmation dialog from code behind???
references:
bootstrap modal problem in code behind
thanks.
I figured out that if you move this two lines to the top ( inside the header ) it works,
<script src="https://code.jquery.com/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
most of the people recommend put this two lines at the end, before the body ends, but I moved them to the header and it works.
Actually, I'm trying to show a div on a condition by using ClientScript.RegisterStartupScript.
But, I'm unable to show that. My code goes like this :
ClientScript.RegisterStartupScript(this.GetType(), "show", "<script> $('#PopupMessgebox').modal('toggle');</script>");
PopupMessgebox is the div id
Actually, its a Login form and the login click is designed using list li and for the first time, on clicking that the popup (div) is showing and it is working fine. But, if there is any authentication problem, we are trying to show an error in the div and that div should be popped out. But that doesn't work :(
My div code :
<div id="PopupMessgebox" class="deleteModal modal hide">
<div class="modal-body">
<div style="overflow: hidden;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
</div>
<div class="alert-delete">
<dx:ASPxLabel ID="lbl_Msg" runat="server" Text="Hi" Font-Bold="True" Font-Size="Small"></dx:ASPxLabel>
</div>
</div>
<div class="modal-footer">
<div style="text-align: center;">
<button class="button grey-button" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
Try wrapping the javascript in the document on ready
ClientScript.RegisterStartupScript(this.GetType(), "show", "<script> $(document).ready(function() {$('#PopupMessgebox').modal('toggle');}</script>");
Try this :
ClientScript.RegisterStartupScript(this.GetType(), "show", "<script type='text/javascript'> $('#PopupMessgebox').modal('toggle');</script>");
I am facing a problem with jquery modal Dialog box. I want the modal box to show only when my data is successful saved to database. I am using c# and asp.net, and on backend i am using Sql server 2008 R2. Currently my data is successfully entering and i am showing "the data is successfully saved on a label" after clicking on a button , but i want to show a modal box only when i click the button and my data is saved .
I have created this script
$("#Btndiag").click(function () { $("#myModal").modal(); });
and on content page body i have written this
<asp:Button ID="Btndiag" runat="server" Text="show dialog" onclick="Btndiag_Click1" />
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
<p>Here settings can be configured...</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
To achieve what you want, you have to process the data in the back end, and then have the ASP.NET Framework execute a script for you.
To accomplish this, you use ClientScriptManager.RegisterClientScriptBlock during full page postbacks, or ScriptManager.RegisterClientScriptBlock if the controls are inside of an UpdatePanel.
C# code:
protected void Btndiag_Click1(object sender, EventArgs e)
{
// process database
// verify results
if (success)
{
ClientScriptManager.RegisterClientScriptBlock(this, "Btndiag_Click1", "$('#myModal').modal();", true);
}
}
Remember that if the button and the modal div are inside of an UpdatePanel, replace ClientScriptManager.RegisterClientScriptBlock with ScriptManager.RegisterClientScriptBlock.
Finally, just as a last informational note...your script ($("#Btndiag").click(...)) will not work because ASP.NET changes element Ids when rendered as HTML.
You'd have to work it in the following manner:
$("#<%= Btndiag.ClientID %>").click(function () { $("#myModal").modal(); });
Please note that you do not need to do anything with the button's click event. You want the framework to automatically run your scrip after the postback.
I use DNN and C#. I've got a form with a lot of input and select HTML tag. At the end of form there is a . When I click on it, the page is reload but when I try catch data of form (with Request.Form['formName'] or Request['form']) I've got only empty field (and if I check the value of IsPostback, it's always false). But in the form tag there is value.
FILE View.ascx
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-4">
<label for="formCodiceCanile">Codice Canile</label>
</div>
<div class="col-sm-4">
<input type="text" name="formCodiceCanile" ID="formCodiceCanile" value="<%=InfoScheda.CodiceCanile %>" />
</div>
<div class="col-sm-2"> </div>
</div>
OTHER FIELD (such as input text, select and radio button)
<input type="submit" name="formRegistraScheda" id="formRegistraScheda" value="Registra scheda" />
I know that I can use (and if I use it, there isn't problem because catch the value in the asp:Textbox it's a joke) but in this case I can't use them.
How can I resolve this problem?
PROBLEM SOLVED: the button doesn't do the POST because I use a field's form in the URL to observe the page status. Now I remove this control and I use the IsPostback native variable of C# and the form work!