Unable to use <% … %> in a client side button click event

Question

I am trying to redirect to a different page based upon a value in the querystring. This is an asp.net web form page. When the cancel button is clicked the following js should execute. The button is an devexpress button.

function OnCancelClick(s, e) {
    if (confirm('If you leave this page, you have to reselect the benefits. Are you sure to leave this page?')) {
        var callingPage = document.getElementById("<%= CallingPage.ClientID %>").value;
        alert("Calling Page: " + callingPage);
        if (callingPage == "AddEmployee.aspx") {
            window.location.href = ResolveUrl('~/Member/Maintenance/AddEmployee.aspx?from=VerifyPage');
        } else if (callingPage == "AddDependentMember.aspx") {

        }
    }

CallingPage is the ID of an asp hidden field. I am setting its value during the page load. Even before this page is loaded I am getting The Controls collection cannot be modified because the control contains code blocks (ie <% ... %> ) error. Not sure whether it is due to devexpress button control or something else.

Answer 1

Assign the CallingPage.ClientID to a server side page variable with public accessibility:

public partial class <class / page name> : System.Web.UI.Page
{
    public string callingPage = "";

    protected void Page_Load(object sender, EventArgs e)
    {
        this.callingPage = CallingPage.ClientID;

        ...
    }
}

then in your javascript:

var callingPage = document.getElementById("<%= this.callingPage %>").value;

Answer 2

Actually this is an unique issue related to devexpress controls. It looks like that we can't use <% %> within the js clientside click event of a devexpress button click event. Instead I used devexpress's hidden control, then it worked fine. Thanks