We Keep Coding

Avoid Simultaneous clicks of buttons in MVC

I have a MVC web application with two buttons - Save and Submit.
When a user first Submits and simultaneously clicks the Save button as soon as he clicks the submit button there is a error in the data send.
I am pretty new to programming and hence have no idea how can i avoid the simultaneous clicks.
Any suggestions on how i can handle this?
Thanks

You can do the following:
Have Submit button as “Submit” button (rendered in html as input type=“submit”)
Have Save button as normal button.
To have Save button rendered as normal button (rendered as input type=“button” you can have UseSubmitBehavior: False.
You can then use OnClientClick on one of the buttons and prevent the other button from being clicked.
Here you can get creative also. You can disable the clicked button and show “Saving ...” like below:
// its a button or document.getElementById
if (button.getAttribute('type') == 'button') {
button.disabled = true;
button.className = "inactive class";
button.value = "Saving, please wait. Have some peanuts while we save...";

Try disabling the Save button in the code of the Submit button HTML onclick=" ... "

Simple solution with jQuery:
$("[type='submit']").on("click", function (e) {
// !!!IMPORTANT!!!
e.preventDefault();
var $self = $(this), $form = $self.closest("form");
// Valid - before submit
if ($form.valid()) {
// Update text in button, ex: Sending..., Loading...
$self.attr("disabled", "disabled").html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw' aria-hidden='true'></i>Loading...");
// Block all inputs.
$form.find(":input:not([type=hidden])").attr("readonly", "readonly");
// Submit form.
$form[0].submit();
return true;
}
// !!!IMPORTANT!!!
return false;
});

maintain login and logout sessions in asp.net web forms

I am trying to implement login and logout in asp.net(web forms). In my web form I have two pages namely Default and Main. From Default page when I login with username and password it redirects to the Main page. When I press back button it directly redirects to the default page. For this I copied javascript code to my default page
<script type = "text/javascript" >
function preventBack() { window.history.forward(); }
setTimeout("preventBack()", 0);
window.onunload = function () { null };
source from stackoverflow question
After login when I click on back button in my browser(chrome) first it shows the Default page and then it shows the Main page. i.e page blinks when I click the back button.
It shows main page successfully with the issue.
What should I implement to stop showing the Default page when I click on back button
Update:
<script type = "text/javascript" >
history.pushState(null, null, 'Default.aspx');
window.addEventListener('popstate', function (event) {
history.pushState(null, null, 'Default.aspx');
});
</script>
I placed this code in default page

There is one important thing that you ought to know here.
One cannot disable the browser back button functionality only thing that can be done is prevent it.
You can't, in anyway diasble that button. What you can however do, is to put some logic and prevent that button from doing what it is meant to do.
Now for the script that you have shown, it should serve fine and the other thing to try here is to put a mediator page between your default and main page. So when you login, the control will flow to mediator page and it will then redirect to main page. Now when the user presses back button on the main page, the control will flow to mediator page which will again redirect the user to his main page.
The effect will be the same as your script, but putting a page can help you write Session handling code and some server side checks if you want.
But one thing is sure, the browser back button will be as it is.
Hope this helps.

As Matt said you can't disagree the back behaviour. However you can check if the user is logged in and redirect them to the main page easily.
All you need to do is, on the default page check if the user is logged in, if they are then redirect them to the main page, this way even if the user clicks back, they will be taken back to the main page. And also the can go to the Default page after logging out.

Another way could be using location.replace("...."), which replace the existing document and user can't "go back" using back button as the page doesn't exist in the url history.
Src: https://developer.mozilla.org/en-US/docs/Web/API/Location/replace

Browser back button do not clear the previous input Textbox values

I have 3 textboxes, 2 dropdownlists, 2 RadGrid, 2 Poeple's picker control on a page, when user click the page's asp:button (save button), records saved to database and page redirects to another page. But when user click back button of the browser, those data input in textboxes on previous page are still there, and If again user click on asp:button without changing the textbox values, duplicate records are saved into database. Previous input value only persist for Textboxes not for any other control on click of back button. Please let me know how to solve this issue. My all textbox controls are inside asp:FormView. Thanks in advance.

Try stop browser caching.
The back button doesn't always reload the page.
// Stop Caching in IE
Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache);
// Stop Caching in Firefox
Response.Cache.SetNoStore();
Check following for detail:
How does the Back button in a web browser work?
Disabling browser caching for all browsers from ASP.NET

Modern browsers implement something known as back-forward cache (BFCache). When you hit back/forward button the actual page is not reloaded (and the scripts are never re-run).
If you have to do something in case of user hitting back/forward keys -- listen for BFCache pageshow and pagehide events.
A pseudo jQuery example:
$(window).bind("pageshow", function() {
// update hidden input field
});
See more details for Gecko and WebKit implementations.

See It helps you:
In JavaScript, onbeforeunloadevent is fired when the page is about to unload and there can be multiple reasons for this unload. For instance, back or forward or refresh button is clicked or a link on the page is clicked, etc.
Normally, onbeforeunloadevent is used in order to handle browser back button functionality as follows:
<body onbeforeunload=”HandleBackFunctionality()”>
function HandleBackFunctionality()
{
if(window.event) //Internet Explorer
{
alert("Browser back button is clicked on Internet Explorer...");
}
else //Other browsers e.g. Chrome
{
alert("Browser back button is clicked on other browser...");
}
}
But there is a problem that identical event occurs once a user clicks on refresh button of a browser. So, to grasp whether or not refresh button or back button is clicked, we will use the subsequent code.
if(window.event.clientX < 40 && window.event.clientY < 0)
{
alert("Browser back button is clicked...");
}
else
{
alert("Browser refresh button is clicked...");
}
The above code snippet works well in browsers aside from FireFox. In case of FireFox, we need to apply the following check:
if(event.currentTarget.performance.navigation.type == 1)
{
alert("Browser refresh button is clicked...");
}
if(event.currentTarget.performance.navigation.type == 2)
{
alert("Browser back button is clicked...");
}
So, the consolidated code snippet will look as:
function HandleBackFunctionality()
{
if(window.event)
{
if(window.event.clientX < 40 && window.event.clientY < 0)
{
alert("Browser back button is clicked...");
}
else
{
alert("Browser refresh button is clicked...");
}
}
else
{
if(event.currentTarget.performance.navigation.type == 1)
{
alert("Browser refresh button is clicked...");
}
if(event.currentTarget.performance.navigation.type == 2)
{
alert("Browser back button is clicked...");
}
}
}

Simple. Add this html attribute to any field you don't want autofilled by the browser.
autocomplete="off"
for example:
<input type="email" name="email" autocomplete="off">

Run Javascript when Asp.net page is loading

I wonder if there is way to run JS code whenever a asp.net page is contacting the server.
I.e. I'm looking for a general event handler that is triggered whenever a call to the server is made for runat="server" components.
I know there's a way to get jQuery.ajax() to run JS code before and after a call to the server is made, but I'm not sure how to do it in asp.net. Especially, since this projects uses a lot of custom components.
The goal here is to show some kind of loading image when a button is clicked, to prevent the user to click a button twice and also to show the user that the system is working.
If the click causes the page or an updatepanel to refresh, I'd only like to display the loading image before the refresh, eg. User clicks, "loading" is shown, page/update panel is refreshed (causing the "loading" to disappear), the new page/content is displayed as normal.
Update 1:
I can't use UpdateProgress because some of the buttons aren't inside UpdatePanels. What I really want to do is to fire a JS as soon as any button/control that will contact the server is clicked. I.e. if the user clicks a dropdown which doesn't contact the server, nothing should happend. But if that dropdown has any connection to the server, a JS should be run.
I understand that this is ASP.NET Ajax and not jQuery Ajax, I only used jQuery as an example. Because I've used a jQuery method before (with jQuery Ajax) to trigger JS before the server call was made. Eg. to lock the element that was clicked or to display a "Loading..." screen.
I could of course add a bit of a JS hack to every page which adds a "onclick" event to every button manually, but I thought it would be better if there was a general solution for this (since I've got lots of pages, each with a few buttons that contact the server on them).
Update 2:
When I think about it, it doesn't necessarily need to be a JS that is triggered. It would be good enough if the page somehow only made sure that the same button wasn't clicked twice. Either by disabeling the button or by adding something in front of it (like a "Loading..." screen).

You can use an UpdateProgress for this to use with update panels, but if you are doing a full page postback (i.e. not ajax) the only loading animation you can have is the browsers own.
UpdateProgress:
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Shiny loading aninmation
</ProgressTemplate>
</asp:UpdateProgress?

Here is how you can do it using jquery:
$(function() {
$('a[href]').on('click', function(e) {
var self = this;
e.preventDefault();
loadAsync($(self).attr('href'));
});
});
function loadAsync(url) {
$('div#result').fadeOut(200, function() {
$('div#loader').fadeIn(200, function() {
$.get(url, function(data) {
$('div#result').html($(data));
}).done(function() {
console.log('done');
}).fail(function() {
$('div#result').html('Error');
}).always(function() {
$('div#loader').fadeOut(200, function() {
$('div#result').fadeIn(200);
});
});
});
});
}

Testing if a button has been clicked or not

I have an asp.net page which loads and writes values from a record to the controls on the page.
There is a link to another page and a save button.
If the user clicks save, fine, the changes are saved and they can navigate to wherever.
If they dont click save and click the link, any changes are lost.
Is there a way to check if the save has been clicked while the user has that page loaded?
I'm thinking along the lines of an OnClick Javascript function for the link such as -below, I'm not sure though how to test for the save button being clicked - can anyone point me in the right direction?
function handleHyperLinkClick(hyperlink)
{
confirm("You have not clicked save, any changes will be lost - click cancel then save your changes or ok to continue");
}

Add a bool variable, that is default false, set to true if the button has been clicked. Then check the value if user leaves the page.

You can do using hidden field. when user click on save button then set hidden field value.

You have to keep a temporary variable in javascript like state;
`
var state = 0;
//your function calls here
function yourFunction()
{
//// your coding
state =1;
//// your coding
}
`
In this case, you have to submit the value or navigate to other page when state=1, otherwise you shouldnt. This flag to be checked whilst clicking link (if its navigating via function) or onBeforeUnload event for page.
Please correct me know if you are looking for something other.

You can attach some value to a variable when the button is clicked. Then when the user tries to navigate, check whether that variable has that value. If so, it has been clicked, else not:
button = document.getElementById("button");
button.onclick = function() { clicked = true; }
document.getElementById("link").onclick = function() { if (!clicked) { alert("Sure?"); }

Assuming you are using ASP.NET server buttons like this:
<asp:Button runat="server" id="someButtonId" Click="someClickHandler" Text="Continue" />
If I were you, I would use jQuery to dynamically bind the click event of the button like this:
$(document).ready(function() {
$("input[type=button][id$=someButtonId]").on("click", function(e) {
if(!confirm("You have not clicked save, any changes will be lost - click cancel then save your changes or ok to continue"))
{
e.preventDefault()
}
});
});
Hope this helps.