How to bind JavaScript event on page load using asp.net C#

Question

I am trying to bind JavaScript event on page load in C# i have tried this code

Response.Write("<li><a href='#' onclick=BindID('" + SubMenu.ParentId + "','" + SubMenu.FormName + "','" + URL + "','" + SubMenu.FormCaption+ "')>" + newSubMenuItem.Text + "</a></li>");

after execution the following output is generated in my html page (on browser).

<a href="#" onclick="BindID('59','Registration','ApplicationForms/CaseManagment/Case.aspx','Copyrights" filing')="">Copyrights Filing</a>

the variable SubMenu.FormCaption contains string value 'Copyrights filing' but the browser is adding a double-quote when the variable contains a space, and the value becomes 'Copyrights" filing' .

What is the problem with the code?

Answer 1

That because the onclick have to look like:

 onclick="BindID(...)"

and yours look like:

 onclick=BindID(...)

so simply add quotes before and after

Response.Write("<li><a href='#' onclick=\"BindID('" + SubMenu.ParentId + "','" + SubMenu.FormName + "','" + URL + "','" + SubMenu.FormCaption+ "')\">" + newSubMenuItem.Text + "</a></li>");

so the broswer don't know how to parse it exactly then he guesses hopefully it will work

Answer 2

It's because of missing double quote at the beginning of the BindID method. The browser treats the double quote before url as ending tag of the li element hence gives the error.

It's always better to use string.format method to generate htmls dynamically. It's easy to maintain, read and understand.

like

String.Format("<li><a href='#' onclick="BindID('{0}','{1}','{2}','{3}')>{4}</a></li>", SubMenu.ParentId,  SubMenu.FormName, SubMenu.FormCaption,newSubMenuItem.Text);

Answer 3

Got me stumped. I don't have a clue why this is happening.

My answer is more of an alternative approach for you:

var markup = String.Format("<li><a href='#' onclick=BindID('{0}','{1}','{2}','{3}')>{4}</a></li>", SubMenu.ParentId,  SubMenu.FormName, SubMenu.FormCaption,newSubMenuItem.Text);
Response.Write(markup);

I'd recommend this anyway depending on the context of your problem (can improve performance).

http://msdn.microsoft.com/en-us/library/system.string.format(v=vs.110).aspx

Answer 4

On page load you can only paste this code. When page will load JavaScript code will run. Change the function name to your own function .

ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), `"javascript:funclass();", true);`

Answer 5

You are being led up the garden path here by using a browser's inspect element function, in this case Chrome's I suspect, which is giving the browser's best interpretation of the malformed html. In cases like this you should always use View Source to see the raw output. If you do this you'll see that what's output is in fact:

<li><a href='#' onclick=BindID('59','Registration','ApplicationForms/CaseManagment/Case.aspx','Copyrights filing')>Copyrights Filing</a></li>

looking at this, and to be fair on Inspect Element - it probably does help to compare the two, you should be able to spot, as other have pointed out, that onclick attribute's value is not being wrapped in quotes as it needs to be.

The quote mark you see in the middle of 'Copyrights" filing' in the Inspect Element view is the result of the browser terminating the onclick value at the first white space, then wrapping it all up in quotes itself.