I know this is a basic question, but I am curious as to what the different options are, and what the best practice would be.
If I have a form that is responsible for saving reservations into a system, how can I prevent the form from being posted twice if the user hits the button twice really quickly?
I know there are a few ways in which I can accomplish this, but I am not quite sure which is the standard way of preventing this. Partially because I am new to web forms, and am used to dealing with MVC.
Thanks ahead of time.
I've used two approaches to this problem:
Use a token based approach. Each page has a hidden input with the current random token. This token is also stored in the user's session. Once the postback occurrs, I compare tokens and, if they are valid, generate a new session token and continue processing. When the second postback occurs, the token no longer matches and prevents processing.
Use javascript to disable the submit button. If you take this approach, and need the button event handler to fire, you'll need to create a hidden input with the name attribute of the button before submitting. The hidden input is required because disabled inputs do not end up in the post data.
I would recommend a client-side onClick event handler that disables the button or makes it invisible, preferably the latter, and replace the button with a label that reads "Processing..." or something like this
I have been using something like this when using an asp:Button for submitting:
1) Set the submit button's UseSubmitBehavior="false"
2) Set the submit button's OnClientClick="pleaseWait(this, 'Please Wait...');"
3) Include javascript code in the page:
function pleaseWait(obj, message) {
if (typeof(Page_ClientValidate) == 'function') {
if (Page_ClientValidate()) {
obj.disabled = true;
obj.value = message;
return true;
}
}
return false;
}
This solution is nice because it is simple but still accounts for client-side javascript validations. It isn't perfect, because it still relies on Javascript, which could be turned off, but that's unlikely to be done by someone who doesn't have the sense to click once and wait for a response. :)
Easy way - use the ajax AnimationExtender control.http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Animation/Animation.aspx
Simply attach the extender to the button and add a disable action.
<asp:Button ID="CopyScenarioButton" ClientIDMode="Static" OnClick="CopyScenarioButton_Click"
OnClientClick="setTimeout( function() {$('#CopyScenarioButton').attr('disabled', 'disabled');},0)"
EnableViewState="false" Text="Save New Scenario" ToolTip="Save New Scenario"
CssClass="btnNormal" runat="server" />
or the later version that includes some validation first:
function PreSaveHybrid() {
var doSave = PreSave();
if (doSave !== false) //returns nothing if it's not a cancel
setTimeout(function () { $('#btnSave').attr('disabled', 'disabled'); }, 0);
return doSave;
}
Related
I have a web page that contains a textbox and a submit button. When the user edits the text in the textbox and clicks another link (not the submit button) how do I display the 'Are you sure you want to navigate away from this page' popup message?
I have researched this on the net and found a few javascript examples. Is this the only way you can do this? If not, what is the best way to do it?
This is one of the multiple ways to achieve the same thing
function goodbye(e) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload=goodbye;
got it from here open js
Only the unload() event will work on JS. You can't manage it on the server.
Check out the answer to this other question on SO, it is very similar to your question
How to show the "Are you sure you want to navigate away from this page?" when changes committed?
Simple solution
window.onbeforeunload = confirmExit;
function confirmExit() {
return "Are you sure you want to leave this page?";
}
4guysFromRolla.com - Prompting a user to Save when Leaving a Page
You cannot use the onbeforeunload window method as it gets triggered by multiple ways like back and forth browser navigation links, refreshing the page, closing of the page, clicking on the links.
What i feel you have to bind the link tag for which you want display the navigation away message and then use the function for the status message display
window.addEvent('domready',function(){
$$('a').addEvent('click', function(e) {
//leaving(); function u wrote for displaying message
});
});
function leaving(e) {
if(!e)
e = window.event;
// return code for the displaying message
}
If you want to do this in a way that guarantees it will work on almost all browsers, use the JQuery library. The following describes the unload event.
http://www.w3schools.com/jquery/event_unload.asp
It's exactly for purposes like yours.
Just to elaborate a little, you would have to download the jquery js library and reference it in your project/page, but you'll probably want to do that eventually anyway.
If you want to control this from the server side, you can dynamically emit the jquery call in the OnPreRender.
Look into Jquery's .beforeunload property. Here is an example:
$(window).bind('beforeunload', function(){ return 'Click OK to exit'; });
Please note, beforeunload canot prevent a page from unloading or redirect it to another page for obvious reasons; it would be too easy to abuse. Also if you just want to run a function before unloading, try the following:
$(window).unload(function(){ alert('Bye.'); });
Finally, don't forget to referrence jQuery in your head tag by using:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
The above gets you the latest version from the internet and saves you the trouble to download it, and of course you can do so optionally, but I am just trying to get your thing to work asap.
Oh, I also found an example for you. Click here to see a page that calls a function before it closes. Hope this helps bud.
I was able to get this to work with Andrei G's answer. I would add on that to get it to work in Chrome, add this to the end of his goodbye function:
return "";
I want to use a javascript function inside a c# function
protected void button1_Click(object sender,EventArgs e){
//javascript function call ex.
/*
boolean b=the return of:
<script type="text/javascript">
function update() {
var result = confirm("Do you want to delimit the record?")
if (result) {return true;}
else {
return false;
}
}
</script>
*/
}
how can i do such a thing? i want when user press yes return true and i know he pressed yes...can i do so?
If you're trying to add JavaScript to your page from asp.net, you can use the ClientScript class.
string script = "function update() { var result = confirm(\"Do you want to delimit the record?\") if (result) {return true; } else { return false; } }";
ClientScript.RegisterClientScriptBlock(this.GetType(), "someKey", script, false);
If you're trying to call (client side) JavaScript functions from your asp.net code behind, then absolutely not. When the page posts and your C# is run, any JavaScript that was on the page no longer exists.
You're mixing two different technologies. C# runs on the server. It renders an HTML page (which may include Javascript). This page is then sent to a client's browser, where Javascript finally gets executed.
In Javascript you can prompt user about record deletion or whatever, and then you have to either navigate to another page or use AJAX to send result to the server.
I suggest that you get a good ASP.NET book. It will clear many uncertainties for you.
If you're putting this message on an <asp:Button> with postback just add the confirm dialog to the OnClientClick attribute like so:
<asp:Button ID="Button1" runat="server"
OnClientClick="return confirm('Do you want to delimit the record?');" />
If you're simply trying to create the functionality of letting the server know that a button was clicked, you're over complicating things. If you really need to dynamically insert Javascript then what Adam mentioned is worth looking into. But I highly doubt that this is the correct approach for what you're trying to do.
You should really only dynamically insert Javascript when you're worried about performance AND you have a lot of content to send.
If dynamically inserting Javascript (ie. lazy loading) is not your main concern, then here is a very simple example of what most folks would usually do to achieve the functionality you're aiming for.
I'm using DevExpress ASPxButton, and I was wondering how can I prevent the user from clicking the button more then once?
Basically it does an update/insert statement.
This can be done using the following code:
var buttonClicked = false;
function MyBtnClick(s,e){
if(buttonClicked) return;
buttonClicked = true;
// do something
}
<ASPxButton id="btn" runat="server">
<ClientSideEvents Click="function(s,e) { MyBtnClick(s,e); } "/>
</ASPxButton>
On the client side, you can disable it when it's clicked.
On the server side, my favourite approach is generally to send a nonce with the form data, and then reject duplicate nonces.
As always, client side validates in a fast and (hopefully) friendly way, server side validates for sure even if client side code suffers from some unexpected browser issue, or someone is deliberately messing things up.
Not sure about aspxbutton specifically but in general you will have something like this on the onclick attribute of the control.
onclick="this.disabled=true;"
In the code where you run the update query simply add to the start of the code:
ButtonNameOrID.Enabled = False // add ; to end if C#
Then at the end of the code, add:
ButtonNameOrID.Enabled = True // add ; to end if C#
This is will disable/enable the button from your C# or VB code.
I have a save button which when clicked should make some changes in the database.
if (bFound== false)
{
// Giving the warning message
// If user presses cancel then abort
// Prepare the list of dbId needs to be deleted
deletedBSIds.Add(dbId);
}
Here if the bFound field is true it should not execute the above statement, but if it is false it should go in the condition and then ask if the user want to save changes "yes" or "no".
If the user says yes it should go to the command "deletedBSIds.Add(dbId);" and keep executing further but if the user presses No it should basically abort and do nothing at all.
Is there a way to do this?
Any help would be appreciated.
This is a server side event. so i think cannot add a click event in my button/..
Here the message box only pops up if the bFoung field is false. or else it will not pop up at all.
Please correct me if u feel i am wrong..
thanks
You'll want to add the following to the button:
button.OnClientClick = "return ConfirmThis();";
You'll then need to add the ConfirmThis function to the Page:
Page.ClientScript.RegisterScriptBlock(GetType(), "ConfirmThis",
#"function ConfirmThis() {
if(condition) { //where condition checks the bfound element.
return confirm(""Are you sure you want to delete this?"");
}
return true;
}");
Doing this approach you're going to want to try and be able to test the bfound condition on the client side in the javascript. If the bfound value is stored in a textbox or HiddenField you should use the document.getElementById function. If the bfound value is known when you are creating the page, you can inject it into the ConfirmThis function directly, of pass it into the ConfirmThis function as a parameter.
Edit in response to your edit:
You have two options when trying to elicit a confirm from the user:
Using client side logic that is already sent to the browser to perform the confirm. This is the example that I have given above.
The "Other" option is to send the page back with a modal dialog, or using the confirm box. You will then get the user's confirmation back in a completely new postback to the server. So you'll need to rethink your logic to be able to temporarily store the information from the first post back and wait for the second post back to finalize the desired action.
Of the two examples, the first option is cleaner and requires no temporary memory and saves the user an additional postback.
Because both options are going to require you to rework the logic asking for the confirm, if at all possible I would try to convert the logic required for the condition to show the confirm dialog to be able to be performed on the client's computer with javascript.
Is there any way you can precalculate the bfound variable, or at the least, send enough information for it to be calculated on the client?
If you still feel like using option 2 after all of my pleading:
use the following code (based on http://www.dotnetspider.com/resources/1521-How-call-Postback-from-Javascript.aspx:
if(bfound)
{
//save all the information you need in temporary information
ViewState["InformationINeedToFinishAfterPostback"] = ImportantInformation;
Page.ClientScript.RegisterScriptBlock(GetType(), "postbackmethod", Page.ClientScript.GetPostBackEventReference(this, "MyCustomArgument"));
Page.ClientScript.RegisterStartupScript(GetType(), "startupconfirm",
#"if(confirm(""are you sure?"") {
__doPostBack('__Page', 'MyCustomArgument');
}");
}
Now to handle the postback add the following code to your page_load:
if(Request("__EVENTARGUMENT") == "MyCustomArgument")
{
ImportantInformation = (CastToAppropriateType)ViewState["InformationINeedToFinishAfterPostback"];
//finalize the desired action here.
}
But... I would still recommend the first option. But now you have the code you will need for both options. Also, I didn't test this code, so you're bound to encounter syntactic problems, but it gets you on the right track.
I'm not all that sure what bfound is supposed to represent, but you can't execute 1/2 way through some server code and then go back to the client- ASP.NET does not work that way.
Typically you will do the confirmation with some client side JavaScript. Google ASP.NET Yes/no confirm to find lots of different ways to do this...
Once you've done this you can then conditionally execute the server side code.
You could use the Javascript confirm() function to display a dialog box to the user with 'OK' and 'Cancel' prompts. You could then store the user's choice in a hidden field and trigger a postback. This article explains how to render Javascript code to the client using ASP.NET.
Since you are using ASP.NET you can add an attribute to your button:
btnDelete.Attributes.Add("onclick", "return confirm('Are you sure?');");
Where btnDelete is your Button.
I have 10 defined textboxes with strings.
I have to check all if they are not empty while clicking ok button
whats the cleanest way to check them all and when function is at end. each checkbox which was empty to give this a specific CSSclass. perhaps. ClassError. ( which highlights red)
I'm happy for answers.
I would add RequiredFieldValidators to them, as well as a ValidationSummary control.
edit: You can also add fancy AJAX effects with the ValidatorCallout from the AJAX toolkit.
edit: Validator controls also support client-side validation.
Using javascript or C#?
Javascript I will create an array of textbox and loop through it.
C# just go FindControl within a Panel or the Container of the text box and go something like this
foreach(Control C in ContainerID.Controls)
{
if ( C is TextBox )
{
if ( String.IsNullOrEmpty((C as TextBox).Text))
{
// Do things this way
}
}
}
Something like this would work on the client side using jquery:
$('input').filter(function(){return this.value=="";}).css("CSSclass");
edit: I just saw the C# tag, I'll leave this here for posterity though.
What you're doing might be simple enough to do easily with some custom javascript code, though I would say that in general the built in validator controls are both easier to use and more robust than a simple validation routine that someone might write. In addition to client-side validation, the validator controls also perform server-side validation to ensure that the data submitted is truly valid, in case someone has javascript disabled in their browser.
If validator controls are included on the page, then they will include some javascript functions that you can invoke, such as Page_ClientValidate(). I believe this will return a boolean telling you whether validation passed and will trigger the visual indicators that identify what the errors are. You can execute Page_ClientValidate('') to trigger only a group of validator controls; actually I think you must do that in order to trigger validation on any validator controls that have a value in their ValidationGroup property, as I don't think Page_ClientValidate() will trigger their validation logic.
There is a CustomValidator control that you can point to your own client-side function if you want, in case you do have some special validation logic that you can only implement through a custom javascript function. This is nice to use, because then your custom javascript function will be executed by the built-in validator framework along with any other built-in validator controls that you might choose to include on the page.
Side note regarding client-side validation: I suggest that you avoid doing the following to trigger validation:
onclick="return myValidationFunction();"
because if there is any other javascript code being injected into the onclick event, your return statement will prevent it from executing. So instead, I suggest doing this:
onclick="if(!myValidationFunction()) return false;"
That's bitten me enough times that I thought I'd just throw that out there. This problem is particularly noticeable if you have an ASP.Net button on which you've set the UseSubmitBehavior property to false, as it will cause the button to render as an HTML "button" control instead of a "submit" control, and as a result, executing a return statement, either true or false, will prevent the button from triggering a postback.