We Keep Coding

ASP .NET OnClick Fires wrong server side method

Synopsis:
I have a login page has two bootstrap modals, one for registering a new account and one for logging into an existing account. Intermittently I'm seeing an issue where trying to log in results in the method for the registering submit button being fired instead of the method for the login button (the one clicked).
Details:
I'm going to describe some of the layout and post code where necessary. I'm trying to avoid posting a ton of code since I'm not exactly sure where the issue lies. This page is a childpage of the site.master, has multiple .css and .js files associated with the theme and the site functionality.
'signup-modal' modal includes a few input fields and then the submit button 'Button1', whose onclick parameter fires the server-side 'RegisterUser' method in the code behind file (C#).
'login-modal' modal includes inputs for username/password, a remember me checkbox, a login with facebook button and the submit button, whose onclick parameter fires the server-side 'ValidateUser' method in the code behind file (C#).
Each modal is surrounded by an UpdatePanel.
When a user has the login modal open and fills valid information then clicks the login button it will typically operate as expected, firing the 'ValidateUser' method, checking the information with the database and authenticating/redirecting the user to the content page. However, occasionally when clicking the login button the 'RegisterUser' method fires instead and returns an error I coded for when the DB tells it that the username entered already exists.
Unfortunately I can't seem to consistently recreate this error, but it does seem to be related to the authentication. I'm using FormsAuthentication to set authentication cookies for the user once they've been validated by the user database. I've noticed that when this error happens, if the cache is cleared, then you are able to login successfully.
What I don't understand is why anything in Session authentication should cause the wrong method to fire onclick. Especially since when it fires the button control it's associated with is hidden and should be inaccessible. The best I can figure is that somehow all onclick methods are being fired and because the 'RegisterUser' one is first in the html, that is the one being executed?
What I've Tried:
I had read a couple posts where people would see this type of behavior as a result of blank labels:
ASP.NET: Wrong event is fired when I click a LinkButton
I don't see anything like that in my code, however I did have a class="" call out in an ASP:Button control that was generating a warning about class="" not being a valid parameter. I tried removing that but didn't see any change in behavior.
I have included on both forms (in each modal) required field parameters, which I remove/add VIA javascript when the modal is hidden or shown. The reason I remove it is that an error is thrown if a required field is hidden due to the browser trying to find the control to validate and not seeing it. Since the 'RegisterUser' method fires without the browser trying to authenticate the associate fields I can surmise that the button is actually hidden (with the required parameters removed) and not just off screen or something.
I have tried without success to determine why this only happens intermittently. It doesn't seem to be due to the number of authenticated sessions under one username. I have logged into over 5 sessions on different computers/browsers without getting the error and had it happen on the first login attempt for a user.
Also, I can confirm that I've seen this error across Chrome, IE, Edge and Firefox, again intermittent on all.
I've double checked that the 'RegisterUser' method isn't being called anywhere else besides the onclick function of the register button.
I haven't been able to find any other posts similar to this, so I'm turning to you in desperation.
The Question:
So if you've made it through all that, here's the real question; What would cause the wrong OnClick method to fire? Am I correct in my educated guess that it has something to do with the Session authentication?
I would also appreciate some advice on where to take my troubleshooting from this point. I can post code snippets as necessary, I'm just not sure what would be relevant and given the volume of code I didn't want to just post it all.
Code Snippets:
The buttons:
Register Button:
<asp:Button ID="Button1" runat="server" onclick="RegisterUser" Text="Create Account" CssClass="btn btn w-lg btn-rounded btn-lg btn-custom waves-effect waves-light" />
Login Button:
<asp:Button ID="btnSubmit" runat="server" onclick="ValidateUser" Text="Sign In" CssClass="btn btn w-lg btn-rounded btn-lg btn-custom waves-effect waves-light" />
Outline of RegisterUser Method
protected void RegisterUser(object sender, EventArgs e)
{
/* Code that registers user with database if username doesn't exists */
}
Outline of ValidateUser Method
protected void ValidateUser(object sender, EventArgs e)
{
/* Code that validates user with the database and authenticates if valid. */
}
Please let me know if there is any more information that would be helpful to include and I'll update the question.
Thank you very much in advance.
UPDATE
I̶'̶v̶e̶ ̶f̶o̶u̶n̶d̶ ̶t̶h̶a̶t̶ ̶I̶'̶m̶ ̶a̶b̶l̶e̶ ̶t̶o̶ ̶r̶e̶p̶r̶o̶d̶u̶c̶e̶ ̶t̶h̶i̶s̶ ̶e̶r̶r̶o̶r̶ ̶1̶0̶0̶%̶ ̶w̶h̶e̶n̶ ̶r̶u̶n̶n̶i̶n̶g̶ ̶o̶n̶ ̶l̶o̶c̶a̶l̶h̶o̶s̶t̶ ̶a̶s̶ ̶o̶p̶p̶o̶s̶e̶d̶ ̶t̶o̶ ̶t̶h̶e̶ ̶d̶e̶v̶e̶l̶o̶p̶m̶e̶n̶t̶ ̶s̶e̶r̶v̶e̶r̶.̶
(Turns out this isn't the case)
Here's another odd behavior I seem to have stumbled upon. If I type out the user name and password, the RegisterUser method fires. However, if the username and password are filled by a password manager, the ValidateUser method is fired (Correct action).

Check your button declaration in your .aspx source.
If you have a 'runat=server' and onclick="RegisterUser", and you have an event handler in your code-behind, it will cause the event to be fired twice.
If so try to change this
<asp:Button ID="Button1" runat="server" onclick="RegisterUser"
Text="Create Account" CssClass="btn btn w-lg btn-rounded btn-lg btn-
custom waves-effect waves-light" />
To this
<asp:Button ID="Button1" runat="server" Text="Create Account"
CssClass="btn btn w-lg btn-rounded btn-lg btn-custom waves-effect
waves-light" />
Some others say that adding type="submit" has helped them out.
Another case might be that your event handler in the server side might be causing the event to be triggered twice.
For instance if you have:
Protected Sub RegisterUser_OnClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles RegisterUser_Click
'Do Something
End Sub
The Handles RegisterUser_Click might cause the event to be fired twice.
Nice explanation btw. Hope the best. Lets us know what was the issue. Best of luck.

How to Debug and resolve - JQuery Cannot read property 'Settings' of Undefined

I have a very weird problem, and I am looking for guidance on how to best debug similar problems in the future.
I have a Simple form that deletes the current active order.
When the user clicks the button, i open a Modal and ask for confirmation.
<form action="/KundeOrdre/Slet" id="Form-SletKundeOrdre" method="post">
<input type="hidden" value="1010101010" name="KundeOrdre.Hoved.OrdreNummer" />
<input type="submit" id="sletKundeOrdre" data-target="Form-SletKundeOrdre" value="Slet" class="btn btn-primary btn-xs" />
</form>
I have two Javascript methods in place.
1. To catch the click on the button and show the Modal instead
2. Catch the confirm click and submit the from
// Show Confirm Dialog when clicking the Delete Buttont
$(function () {
$('#sletKundeOrdre').on('click', function (e) {
e.preventDefault();
$('#modal-confirmDeleteOrder').modal('show');
});
});
// Bind a Listener to the Confirm button
$('#modal-confirmDeleteOrder').on('click', 'button#confirm', function (e) {
$('#Form-SletKundeOrdre').submit();
});
When i run this setup and click confirm in the Model, i get a Javascript error and the Form is not submitted.
jquery.validate.js:1068 Uncaught TypeError: Cannot read property 'settings' of undefined
I am looking for good ideas on how to debug a situation like this.
A plugin is giving me trouble and im assuming its on my end.
This form is included in a page that consists of 2 Partial Views, each containing multiple forms.
This particular form is in the 2nd View and is nr 3 out of 4 forms on that page.
Another observation:
The 4th Form in the same View is a table containing rows. This error happens when the table contains zero rows.
If i add a single row to the 4th Form, this form (3rd) works as expected.
I do not understand why submitting my 3rd form is in any way related to my 4th form.
Update:
I seem to have resolved the issue.
I had an Input button inside my form, that had a link to the 'GemKundeOrdreLinjer' form (my 4th form).
<input type="button" id="gemKundeOrdre" value="#Resources.Panel_KundeOrdreGem" form="GemKundeOrdreLinjer" class="btn btn-primary btn-xs" />
Moving this button outside my form, solved issue for now.
This leaves me with a display issue about buttons, but ill keep this Question updated

how to avoid postback when i click the button in MVC

I have two button in my cshtml page. When i click the first button data fetch from the database and bind it my controls. The records are many so the second button goes down, then i click the second button same thing happened fetch from the database and bind the grid, so the page is loaded then the page goes up. I want to stay same place when i click the second button. How to prevent it.

make your button like this :
<input type="button" id"button2" onclick="CallAjax();return false;"/>
//then in javascript
function CallAjax()
{
//your ajax call here to retrieve or update data
}

This is MVC 101...
Make your button a standard HTML5 button, which calls a JavaScript function on click...
<input type="button" id="goButton" value="Go »" onclick="goFunction();">
(I don't think you have to "return false" with a button, only with a submit)
Then, use Razor helpers in your view to do the Ajax call to the controller...
function goFunction() {
var url = '#Url.Action("MyActionMethodName", "MyControllerName")';
var settings = { 'some data': 'some values' };
$.ajax(url, settings);
}
See the JQuery Ajax page for more information about how to work the "settings" object.
BTW - sounds like you are "paging a grid" but you just forgot to say so... use a tool for that, such as Kendo. Paging is solved, don't solve it again.

Prevent Double Submit on ASP.NET MVC page

I have an ASP.NET MVC 4 view. In the view, I have
<form action="/myAction" method="post">
...
<input type="submit" value=" Save " onclick="this.disabled = true; this.value = ' Please wait... '; return true;" />
</form>
By disabling the button, the form never gets submitted. However, I would like to disable the button after a user clicks it. The reason I want to disable it is to prevent the user from clicking the "submit" button multiple times. What am I doing wrong? I thought if I returned true, the form would still submit.

Disable the button in your form's submitted event, not the button's click event. This is because the click event fires before the form is submitted - though you are returning true, so that shouldn't cause the submission to fail, I don't think.

Use ActionFilters. This blog post has a class you can just drop into your project, decorate your actions and you're done.

__EVENTTARGET not populating after button click + C#/ASP.NET

I have an asp button that produces this html:
<input type="submit" name="ctl00$m$g_a2ba5666_c8e9_4bd7_a44a_f9407dbe2199$ctl00$btnAddWebPart" value="Add Report" id="ctl00_m_g_a2ba5666_c8e9_4bd7_a44a_f9407dbe2199_ctl00_btnAddWebPart" />
When the button is submitted and the page_load method is hit, I am trying to do this:
String target = Page.Request.Params.Get("__EVENTTARGET");
but, for some reason 'target' is empty. I checked to see if __EVENTTARGET is getting populated and it is an empty string. Any ideas as to why this is happening? It is something really silly.
Thanks.

Wrap this button up in an ajaxtoolkit update panel. that way you can update the various page components (add / remove your web parts) within an async call.
This means that the page is partially rendered instead of it being the result of a full postback.
I agree with Josh on this ... handling the event in this way is ugly and against the intended purpose of this part of asp.net from microsoft.
partial postbacks dont result in that ugly flicker effect so this should produce the result you want and not effect the rest of the page.