Access Code-behind variables in ASPX and JavaScript

I often come across this question not only in the Worldwide Web but also in many development scenarios. In fact this is the question which I faced when I started programming years back. At times we need to change some of the properties of the server side controls from code-behind partial class and also sometimes we are required to process some data on the client side JavaScript which we get from code-behind. In those cases, accessing code-behind variables in ASPX is the easiest way to get our job done.

Step By Step Procedure:

The following requirements are achieved in the present article –

  1. Accessing code-behind variables in Java Script of ASPX.
  2. Changing properties of server side controls by data binding code-behind variables.
  3. Display code-behind variables in ASPX page directly.

ASPX code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default11.aspx.cs" Inherits="Default11" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Access Code-behind variables in ASPX and Javascript</title>
        <script type="text/javascript">
            //Access Code-Behind Data in Javascript
            var JavaVar1 = '<%=CodeBehindVarPublic %>';
            var JavaVar2 = '<%=CodeBehindVarProtected %>';
            var JavaVar3 = '<%=CodeBehindVarProperty %>';
            alert(JavaVar1+"---"+JavaVar2+"---"+JavaVar3);    
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%--Set Properties of server side controls in ASPX using code-behind variables --%>
        <asp:TextBox ID="TextBox1" runat="server" Width="<%#TextBoxWidth %>"></asp:TextBox>
        
        <%--To display Data from code-behind in ASPX controls--%>
        <asp:Label ID="Label1" runat="server" Text="<%#CodeBehindVarPublic %>"></asp:Label><br />
        <asp:Label ID="Label2" runat="server" Text="<%#CodeBehindVarProtected %>"></asp:Label><br />
        <asp:Label ID="Label3" runat="server" Text="<%#CodeBehindVarProperty %>"></asp:Label><br />
        
        <%--To display Data from code-behind in ASPX--%>
        <%=CodeBehindVarPublic %> <br />
        <%=CodeBehindVarProtected %> <br />
        <%=CodeBehindVarProperty %> <br />
    </div>
    </form>
</body>
</html>

Code-behind code:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Default11 : System.Web.UI.Page
{
   public int TextBoxWidth = 1000;   public string CodeBehindVarPublic = "Public Variable";
   protected string CodeBehindVarProtected = "Protected Variable";
   public string CodeBehindVarProperty
   {
       get
       {
           return "Property Variable";
       }   }
    protected void Page_Load(object sender, EventArgs e)
    {
        // Bind data from code-behind to ASPX server controls
        Page.DataBind();
    }
}

Requirements (1) (3) are achieved using <%= %> construct. Requirement (2) is achieved by using <%# %> construct (Data Binding Expression). We use Page.Bind() method in Page_Load event in code-behind to automatically bind data from code-behind to the server controls.

The above example shows us how to access public and protected variables and also public property in ASPX. It displays data in labels and set’s the width property of textbox from code-behind variable.

Note:

  1. All Properties and variables which are need to be accessed in ASPX should be declared as page level variables, and also they need to be declared either public or protected. Declaring them as private and trying to access them in ASPX gives compile time error.
  2. Its better to change the properties of server side controls by adding the attributes in code-behind than to access the code-behind variables in ASPX. But when situation drives us to access the variables in ASPX, the above method can be followed.

Alternatively we can use the hidden fields to get the same functionality. The following code illustrates the same.

ASPX code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default12.aspx.cs" Inherits="Default12" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Pass Javascript Variables to Server</title>
     <script type="text/javascript">
         function JavaScriptFunction()
         {
           var JavaScriptVar =  document.getElementById('<%= Hidden1.ClientID %>').value;
           alert(JavaScriptVar);
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>  
        <asp:HiddenField ID="Hidden1" runat="server" />        
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="JavaScriptFunction()" />
    </div>
    </form>
</body>
</html>

Code-behind code:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class Default12 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string CodeBehindVar = "Code Behind Variable";
        Hidden1.Value = CodeBehindVar;
    }
}

The main disadvantage with the usage of hidden fields is the performance of the page. As the number of hidden fields increase, the performance of the page will be degraded. Both the methods should be used according to the requirements too be met.

ALSO SEE “Access JavaScript Variables in CodeBehind Class”

Conclusion:

How to access code-behind variables in ASPX is discussed and shown practically in this article. ASP.NET inline code constructs are used to achieve the primary requirements. Attributes of server side controls are changed from code-behind variables. Also the usage of hidden fields in achieving the same requirement is also seen practically.

You may also like...

One Pingback/Trackback

  • Thomas

    Thank you, very helpful. This is what I was searching for, especially the
    Text=””
    Syntax in the aspx file.

  • kumar

    hi Rami Vemula,
    this is cool stuff.I am using this in my code. how to access the array variable of codebehind(vb) from javascript?i will be helpfull, if you reply back.

    Thank You,

  • RamiVemula

    @Kumar – Already same question asked in this thread and solved – http://forums.asp.net/t/1199628.aspx

  • Enrique

    excelente artículo!!!

    Gracias,
    Enrique

  • ashish

    Can we change the value of a server side variable from javascript..I want something like this

    =”temp”;

  • RamiVemula

    @Ashish – you got to use hiddenfields, i dont find any other option. See this article – http://www.intstrings.com/ramivemula/articles/access-javascript-variables-in-code-behind-class/

  • Shashank

    A good one…:)

  • bhaskar

    hi

    great post and easy to under stand.

  • rbi

    Great post. Especially love the fact that you did a public, protected, and a property to make the post more relevant. Thank you!

  • Deepak

    Great Post Helped me a lot

  • Pingback: [RESOLVED]Jquery Tabs | Asp Forum()