Access(use) code-behind variables in JavaScript and ASPX

Access Code-behind variables in ASPX and JavaScript

RamiVemula on January 1, 2010 at 11:45 am

Author’s Word:

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 –

Accessing code-behind variables in Java Script of ASPX.
Changing properties of server side controls by data binding code-behind variables.
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:

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.
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.

Disclaimer:

All coding and suggestions made in the above discussion is strictly in point of view of the author. It is neither mentioned any where nor even concluded that this is the only possible way to go with, as there will be always a chance for a new approach in achieving the same requirement (in context of programming). The above mentioned code is strictly written and explained for the sake of new comers to C# and ASP.NET world.

Filed under:ARTICLE

Comments for this item Comments (4)

4 Responses to “Access Code-behind variables in ASPX and JavaScript”

Thomas says:

April 12, 2012 at 6:07 pm

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

April 16, 2012 at 11:47 am

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 says:

May 5, 2012 at 8:54 pm

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

May 11, 2012 at 8:05 pm

excelente artículo!!!

Gracias,
Enrique

Add Your Comments

Use the below form to express your comments, views and suggestions about the article. I request everyone who leaves a comment to be more specific to this article.

Please note that all irrelevant comments are moderated. And in case of any comments having abusive content and matter from other blogs will not be published.

For most generalized comments and for any other non-related article queries, please use Contact page to reach me. I will get back to you as soon as possible.

For complete Disclaimer, go through About page.

*Provide a valid email so that I can reach (if required) you personally at any time.

Rami Vemula

Have a possible topic for an ARTICLE or got a QUESTION??? - Write to Me - CLICK HERE

Interesting Website??? - Do write a Testimonial - CLICK HERE

I am :-

Tags

Search Content

@Forums.Asp.Net

Standards

LINQ Traffic

Entity Framework Tutorials

JQuery Quickies

Intstrings News

Access Code-behind variables in ASPX and JavaScript

ALSO SEE “Access JavaScript Variables in CodeBehind Class”

4 Responses to “Access Code-behind variables in ASPX and JavaScript”

Add Your Comments

Leave a Comment