Click here to Skip to main content
15,886,035 members
Articles / Web Development / ASP.NET
Tip/Trick

Accessing C# Variables in JavaScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (7 votes)
13 Jul 2012CPOL 129.9K   10   9
How to access the variables/properties from C# in JavaScript?

Introduction

So often I come across this question on various forums - 'How to access the variables/properties from C# in JavaScript?' And this is one of the scenarios which you are (most) likely to come across if you are writing an ASP.NET application.

For most beginners, it might get confusing as they start wondering how to pass on information from a server side variable to client side.

Solution

The one shortcut we used during the (good old) ASP days, and which still works in ASP.NET is to declare a public property in codebehind. Let us say we declare a string variable firstName in codebehind.

C#
public string firstName = "Manas";
public string lastName = "Bhardwaj";

Now, we can access this in aspx page/JavaScript like this:

JavaScript
<script>
    var myName;
    function GetMyName()
    {
        myName = <%=this.firstName%> + ' ' + <%=this.lastName%>;

        alert(myName);
    }
</script>

To do it nicely, you can use RegisterClientScriptBlock. RegisterClientScriptBlock accepts the following parameters:

  • Type: The type of the client script to register
  • key: The key of the client script to register
  • script: The client script literal to register
  • addScriptTags: A boolean value indicating whether to add script tags
JavaScript
string script = string.Format("var myName = '{0} {1}';", firstName, lastName);
if (!ClientScript.IsClientScriptBlockRegistered("myScript"))
{
    ClientScript.RegisterClientScriptBlock(typeof(_Default), "myScript", script, true);
}

Once done, the variable 'myName' is available on the client side (JavaScript in aspx page) and can be accessed like:

JavaScript
<script>
    function GetMyName()
    {
	alert(myName);
    }
</script>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Netherlands Netherlands

Read my personal blog at www.manasbhardwaj.net.


Comments and Discussions

 
QuestionThanks, I Know This But forgoten it :D Pin
Member 1030153414-Jan-14 20:59
Member 1030153414-Jan-14 20:59 
AnswerRe: Thanks, I Know This But forgoten it :D Pin
Manas Bhardwaj14-Jan-14 21:49
professionalManas Bhardwaj14-Jan-14 21:49 
QuestionJavaScript and edititemtemplate Pin
chaim_zvi9-Sep-12 2:57
chaim_zvi9-Sep-12 2:57 
SuggestionJSON Pin
StianSandberg14-Jul-12 11:46
StianSandberg14-Jul-12 11:46 
GeneralRe: JSON Pin
Manas Bhardwaj14-Jul-12 12:09
professionalManas Bhardwaj14-Jul-12 12:09 
GeneralRe: JSON Pin
StianSandberg14-Jul-12 15:34
StianSandberg14-Jul-12 15:34 
QuestionHmmm Pin
Ryan Criddle13-Jul-12 18:36
Ryan Criddle13-Jul-12 18:36 
AnswerRe: Hmmm Pin
George Mamaladze13-Jul-12 20:17
George Mamaladze13-Jul-12 20:17 
AnswerRe: Hmmm Pin
Manas Bhardwaj14-Jul-12 0:10
professionalManas Bhardwaj14-Jul-12 0:10 
Thanks for your comment Ryan. Well, first of all the idea of this tip was not to highlight any best practices but to demonstrate "How to" archive this functionality.
Secondly, I have never seen any client side coder working on a web application who doesn't have an idea/access to code behind. Usually, that is done is the UI design phase of the project when a web designer gives the layout/ flow of application without bothering about code behind. Once done, the web programmer takes care of the details and of course he is responsible for in and out (code behind and aspx) functionality.
Hope this make clear. Smile | :)
Manas Bhardwaj
Please remember to rate helpful or unhelpful answers, it lets us and people reading the forums know if our answers are any good.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.