ASP.Net/C# Uncaught ReferenceError: is not defined at HTMLInputElement.onclick

Question

First of all I have seen lots of questions and answers about this situation with JavaScript functions from the page header. I am working with C# and have my event handler defined in the CodeBehind file.

Here is the code that creates my button:

Button btnDelete = new Button()
{
    ID = "btnLeadershipRowDelete" + index.ToString(),
    Text = "-"
};
btnDelete.OnClientClick = "BtnDeleteRow_Click";
btnDelete.Attributes.Add("style", "display: inline-block; width: 1.4em;");
pnlLeadershipControls.Controls.Add(btnDelete);

Here is the HTML rendered for the same button:

<input type="submit" name="ctl00$ctl00$cphContent$cphContent1$btnLeadershipRowDelete0" value="-" 
   onclick="BtnDeleteRow_Click;" id="ctl00_ctl00_cphContent_cphContent1_btnLeadershipRowDelete0"
   style="display: inline-block; width: 1.4em;" />

Here is the event handler method I am trying to call:

protected void BtnDeleteRow_Click(object sender, EventArgs e)
{
    DeleteControls(sender);
}

When I click the button in Chrome, nothing happens. Looking at the dev console in Chrome, I find the following error:

default.aspx:1 Uncaught ReferenceError: BtnDeleteRow_Click is not defined at HTMLInputElement.onclick (default.aspx:1)

I am at a loss as to what I have done wrong. Any thoughts will be helpful!

What are you expecting to happen when adding a `OnClientClick` to a button? — VDWWD, Nov 02 '17 at 16:08
Adding OnClientClick in the code behind file adds the onclick property seen in my HTML snippet. — cptully, Nov 02 '17 at 16:45
I ask because `_Click` is usually associated with the method that is executed in code behind when the button is clicked. — VDWWD, Nov 02 '17 at 16:51
That is my expectation as well. I've edited my original question to include the BtnDeleteRow_Click() method. — cptully, Nov 02 '17 at 16:55

Reinhard · Answer 1 · 2017-11-02T16:32:18.647

Please add "()" to you onclick event.

Delete.OnClientClick = "BtnDeleteRow_Click()";

This will execute the function BtnDeleteRow_Click when the button is clicked instead of referencing it.

For explanation:

If you use the inline onclick handler for an element, the value will be directly executed.

<input type="submit" name="buttonName" value="-" onclick="BtnDeleteRow_Click();" id="buttonId" />

If you assign a handler in JavaScript code, the reference of the onclick function is replaced by the new function

btnLeadershipRowDelete.onclick = BtnDeleteRow_Click;

or with an anonymous wrapper function

btnLeadershipRowDelete.onclick = function() {
    BtnDeleteRow_Click();
};

There is no JavaScript involved in this particular interaction. Whether I use 'Delete.OnClientClick = "BtnDeleteRow_Click()";' or 'Delete.OnClientClick = "BtnDeleteRow_Click";' I get the same result. — cptully, Nov 02 '17 at 16:46

score 1 · Accepted Answer · answered Nov 02 '17 at 17:00

1

That is why i made my first comment. You should know the difference between OnClientClick and Click. If you want to assign a method to a dynamic button you need to do this

btnDelete.Click += BtnDeleteRow_Click;

answered Nov 02 '17 at 17:00

VDWWD

35,079
22
62
79

your comments lead me to more searching that lead me here: https://stackoverflow.com/questions/803242/understanding-events-and-event-handlers-in-c-sharp – cptully Nov 02 '17 at 17:24
After some fiddling to make VS2107 happy my command ends up looking like this: 'btnDelete.Click += new EventHandler(BtnDeleteRow_Click);' and my EventHandler is being called! Now I just have to fix my logic! – cptully Nov 02 '17 at 17:42
Good that you got it working. It depends on the .net version if you have to use `new EventHandler` or not. – VDWWD Nov 02 '17 at 17:43

ASP.Net/C# Uncaught ReferenceError: is not defined at HTMLInputElement.onclick

2 Answers2