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.
Related
I'm attempting to migrate some code from WPF to Blazor. The WPF code relied on ShowDialog() to display a modal dialog and suspend execution until the modal was closed. Is there a (server-side) Blazor equivalent that allows C# flow of control to be based, for example, on whether the user clicked Acknowledge vs Cancel in a modal dialog?
You can add a button
<button class="btn btn-primary"
#onclick="AddNewForecast">
Add New Forecast
</button>
That calls a method that sets a value to be true
bool ShowPopup = false;
void AddNewForecast()
{
// Open the Popup
ShowPopup = true;
}
And that value is wrapped around code that uses the bootstrap modal control (class="modal"):
#if (ShowPopup)
{
<!-- This is the popup to create or edit a forecast -->
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Edit Forecast</h3>
<!-- Button to close the popup -->
<button type="button" class="close"
#onclick="ClosePopup">
<span aria-hidden="true">X</span>
</button>
</div>
<!-- Edit form for the current forecast -->
<div class="modal-body">
<input class="form-control" type="text"
placeholder="Celsius forecast"
#bind="objWeatherForecast.TemperatureC" />
<input class="form-control" type="text"
placeholder="Fahrenheit forecast"
#bind="objWeatherForecast.TemperatureF" />
<input class="form-control" type="text"
placeholder="Summary"
#bind="objWeatherForecast.Summary" />
<br />
<!-- Button to save the forecast -->
<button class="btn btn-primary"
#onclick="SaveForecast">
Save
</button>
</div>
</div>
</div>
</div>
}
You will have a popup that is "modal"
The best way to port a WPF or WinForms application to Blazor is to use Nevron Open Vision for Blazor:
https://www.nevron.com/products-open-vision.aspx
It allows you to develop User Interfaces that run on Blazor and WPF/WinForms from a single code base! No HTML or JS knowledge is required either - you simply code your UI in C#.
Right now, there is no out-of-the-box equivalent like in WPF.
But some good documentented samples regarding this:
https://www.telerik.com/blogs/creating-a-reusable-javascript-free-blazor-modal
https://www.syncfusion.com/blazor-components/blazor-modal-dialog
The only question for me is how to animate this kind of Dialog, e.g. with fly in / fade in animation and such things...
I'm working on a simple login screen with the below code:
<form id="login">
<div class="formHeader">
<h1>Login</h1>
</div>
<div class="formDiv">
<input type="text" placeholder="Email" name="txtEmail"/>
<div class="inputImage fa fa-user"></div>
</div>
<div class="formDiv">
<input type="password" placeholder="Password" name="txtPassword"/>
<div class="inputImage fa fa-lock"></div>
</div>
<div class="formDiv">
<label id="remember">
<input type="checkbox" name="cbxRemberMe" value="Checked"/>
<div class="checkbox"></div><span>Remember me</span>
</label>
</div>
<div class="formDiv">
<input type="submit" value="LOGIN" onclick="btnLogin_Click" />
</div>
<div class="formFooter"><a class="forgot" href="#">Forgot Password</a></div>
and back-end code
protected void btnLogin_Click(object sender, EventArgs e)
{
}
But the button does not call the backend code at all.
Nothing happens except the URL changes from
"http://localhost:15726/Pages/Login.aspx" to
"http://localhost:15726/Pages/Login.aspx?txtEmail=&txtPassword=&ctl00=LOGIN"
I cannot put a Runat=Server attribute in the form as I have 2 forms on this page (login and register)
any help is appreciated.
What I have tried:
Playing around with Runat=Server, onclick() and OnServerClick() (swapping around and changing them up)
Making input type=submit / input type=button
none of these work.
Have you tried these two approaches?
<asp:Button runat="server" id="btnLogin" Text="LOGIN" OnClick="btnLogin_Click">
or
< button onserverclick="btnLogin_Click" runat="server" id="btnLogin">LOGIN</button>
Edit
This was supposed to be a comment and not answer. Sorry for that.
However, the entire form doesn't seem to be "webform" form compatible. If you want to be able to read the values from the form elements the form should have a runat="server" tag, too.
Firstly, you need to specify whether it is a server control or client control. Specify runat=server to tell that it should be available for the Code-Behind file.
Finally, Use any javascript function with OnClick and any code behind function with OnServerClick
Something like this,
aspx
Plain HTML
<input type="submit" runat="server" value="LOGIN" onclick="return js_btnLogin_Click()" OnServerClick="btnLogin_Click"/>
or with ASPX Control
<asp:Button runat="server" Text="LOGIN" OnClientClick="return js_btnLogin_Click()" OnClick="btnLogin_Click">
javascript
<script type="text/javascript">
function js_btnLogin_Click()
{
//return false, in case if you want to stop posting the form to the server
return true;
}
</script>
Code-Behind
protected void btnLogin_Click(object sender, EventArgs e)
{
}
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 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.
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>");