How to set dynamic id with getElementById with c# variable

Question

I'm trying to use the document.getElementById with a dynamic variable.

The dynamic variable will be set based on a query string that is read in from the code behind (c#) in the URL.

So for example, this would be the ideal way it works:

c# code behind:

string myVar = Request.QueryString[0];
myVar = myVar + "Link";

JavaScript:

<script>
    document.getElementById(myVar)
</script>

Any idea on how to get this to work?

And then what? What exactly is your question here? BTW: var is a Javascript keyword - change it to myVar, or something meaningful. — user1864610
– user1864610, Commented Oct 19, 2013 at 22:26

McGarnagle · Accepted Answer · 2013-10-20 00:12:48Z

2

You could simply insert this in a script block on your .aspx page (note, avoid using "var" as the name, as that is a reserved word in Javascript):

<script>
    var id = '<%= HttpUtility.JavaScriptStringEncode(Request.QueryString[0]) + "something" %>';
    document.getElementById(id);
</script>

You could inject it into the page from code behind by using RegisterStartupScript:

Page.ClientScript.RegisterStartupScript(this.GetType(), "QueryId", 
    string.Format("<script>var id='{0}';</script>", 
        HttpUtility.JavaScriptStringEncode(Request.QueryString[0]) + "something"
    )
);

edited Oct 20, 2013 at 0:12

answered Oct 19, 2013 at 22:25

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mike Doe Over a year ago

One must always escape user's input. Try <%= HttpUtility.HtmlEncode(Request.QueryString[0]) %>

Kevin Over a year ago

Awesome I'll give this a try and mark it correctly after I test it! That's way easier than I thought it'd be.

Kevin Over a year ago

Sorry, one question. I updated my original question but I just realized in my code I'm actually trying to add another string to what I get from the queryString before using it as a ID. Is this possible? If not no biggie I can adapt my code to use this solution! Thanks!

Michael Liu Over a year ago

Because the query string parameter is being embedded inside a JavaScript string literal, not inside HTML, you must use JavaScriptStringEncode (with the second parameter set to false) instead of HtmlEncode to avoid an injection vulnerability.

Kevin Over a year ago

I went ahead and used your first answer, where the var is declared in the script directly. I tried to put the c# code in my Page_Load but it didn't seem to work. On a side note, is there a way to make sure the user's input is being handled to avoid injection? I entered <hello> as a input while using JavaScriptStringEncode and HTMLEncode and in debug mode at least, ASP just gives me this warning: A potentially dangerous Request.QueryString value was detected from the client. Does this mean it's being handled?

|

Afzaal Ahmad Zeeshan · Accepted Answer · 2013-10-19 23:20:12Z

1

The thing is that you cannot just communicate with Server-Side using JS, JS is a client side, so you won't get the variables that you created in ServerSide.

To get them, you'll require:

<%= write_the_thing_here %>

For your code, you'll write:

string someThing = "<%= HttpUtility.HtmlEncode(Request.QueryString[0]) %>";
// now use this someThing in the document..you can use var instead of string
// but not them both..
document.getElementById(someThing); 
// note the semicolon on the end, to close it..

You should not use string var because they are the data types in JavaScript as well as ASP.NET, so code might get puzzled thinking what the hell is this.

Instead of this, you can also try to write a hidden input field as

<input type="hidden" name="someThing" value="@Request.QueryString[0]" />

Then use it to do what ever you want to do dynamically. This might be the easy way of doing this, if you really want to use the ID from the server.

Sorry about the jQuery buddy:

var someThinge = $('input[type="hidden"]').val();

And then, continue your work!

Help note by Alexei Levenkov: semicolons in JavaScript are optional. They main use is to distinguish if code written by obfuscators/minimizers (tools or people) or normal developers :)

edited Oct 19, 2013 at 23:20

answered Oct 19, 2013 at 22:32

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

2 Comments

Alexei Levenkov Over a year ago

Side note: semicolons in JavaScript are optional. They main use is to distinguish if code written by obfuscators/minimizers (tools or people) or normal developers :). Also as @mike commented on other answer - you have script injection in your sample, which is not a good practice.

Afzaal Ahmad Zeeshan Over a year ago

@AlexeiLevenkov there you go buddy :) i have updated the answer, is there any other error ? :)

Collectives™ on Stack Overflow

How to set dynamic id with getElementById with c# variable

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related