Unable to pass C# string variable to JavaScript file

Question

What I am trying to do currently is pass a JSON string from the back-end C# to JavaScript to populate the drop down lists. What currently is happening is that when I use the information from the link provided, all i get in return is a literal output of ""<%= jsonFoodString %>". I do not understand why it is doing that. If someone can point me in the correct direction that would be great.

The current post I have been looking at:

Passing variable from ASP.net to JavaScript

The way I have been trying is (Example):

C# Code:

    protected string jsonFoodString { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)

        {
            HttpClient client = new HttpClient();

            client.BaseAddress = new Uri("http://localhost:63591/");
            client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response = client.GetAsync("api/Meals/").Result;

            if (response.IsSuccessStatusCode)
            {
                string foods = response.Content.ReadAsStringAsync().Result;
                jsonFoodString = foods;
                BindData();
            }
        }
    }

Javascript:

var count = 1;
$(document).ready(function() {
$("#addItemButton").click(function() {
    if (count <= 5) {
        $("#ContentPlaceHolder1_AddMealContainer")
            .append(
                $("<div class=\"form-group\" id=\"MealItem_\"" +
                    count +
                    ">" +
                    "<div class=\"row\">" +
                    "<label ID=\"AddItemLabel_1\" class=\"col-xs-4 control-label\">Item</label>" +
                    "<div class=\"col-xs-4\">" +
                    "<select ID =\"AddItemDropdownList_1\" data-html=\"true\" data-animation=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" class=\"form-control\">" +
                    "</select>" +
                    "<div class=\"has-error\">" +
                    "<span class=\"help-block\">" +
                    "</span>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>")
            );
        count++;
        var notParsedFoodString = "<%= jsonFoodString %>";
        console.log(notParsedFoodString); //Produces a literal string of "<%= jsonFoodString %>"
    } else {
        alert("You can only add 5 food items to a meal");
    }
});
$("#addItemButton").append("<input type=\"button\" value=\"Add Food Item\" id=\"AddMealItem\" class=\"btn btn-default btn-sm\">");
});

Answer 1

I found the answer I was looking for here!

XMLHttpRequest is deprecated. What to use instead?

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
    if (this.readyState === this.DONE) {
        console.log(this.status) // do something; the request has completed
    }
}
xhr.open("HEAD", "http://example.com") // replace with URL of your choosing
xhr.send()