Pass C# variable to JavaScript in ASP webforms

Question

I'm using ASP web forms. Suppose I have a variable in my user control (ascx.cs)

protected void Page_Load(object sender, EventArgs e)
        {
            public string someText = "Hello World";
        }

I want to pass this variable to JavaScript. The code in the ascx file:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CalendarUserControl.ascx.cs" Inherits="Fransabank.Calendar.CalendarUserControl" %>

<script type="text/javascript">
    console.log(someText);
</script>

I'm getting in the console window:

ReferenceError: someText is not defined

Terry Delahunt · Accepted Answer · 2016-05-06 11:07:00Z

4

You can use an inline server tag:

public string SomeText
{
    get { return "sometext"; }
}

In your markup:

<script type="text/javascript">
    console.log(<%=SomeText%>);
</script>

Or you could use a HiddenField:

protected void Page_Load(object sender, EventArgs e)
{
     hdnSomeText.value = "sometext";
}

Markup:

<asp:HiddenField ID="hdnSomeText" runat="server" ClientIDMode="Static" />

<script type="text/javascript">
    console.log(document.getElementById('hdnSomeText').value);
</script>

edited May 6, 2016 at 11:07

Terry Delahunt

6164 silver badges22 bronze badges

answered May 6, 2016 at 10:41

DGibbs

14.7k7 gold badges49 silver badges89 bronze badges

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

1 Comment

codeMonkey Over a year ago

I like the hidden field method because it plays nicely with content-security policies.

Kamil T · Accepted Answer · 2016-05-06 10:46:37Z

EDIT

My bad, I thought you've been using ASP.Net MVC. I've left the MVC solution below, but I'll also show you how can this be done with ASP.Net.

In Web Forms, you can add a property in your code-behind:

public string someText {get; set;}

And in front-end:

<script type="text/javascript">
    console.log('<%= someText %>');
</script>

MVC Solution

Passing values like that can be achieved, but is - in most cases - wrong. You should rather use a ViewModel - this is what MVC was created for.

Create a Model:

public class MyViewModel
{
    public string someText {get; set;}
}

When you return your View from Controller, use:

public ActionResult Index
{
    return View(new MyViewModel() { someText = "lalalala" });
}

Your View (cshtml):

@model(MyViewModel) // be sure to use whole namespace, like Models.MyViewModel

And in your js:

<script type="text/javascript">
    console.log(@Model.someText);
</script>

Collectives™ on Stack Overflow

Pass C# variable to JavaScript in ASP webforms

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related