How to transfer a serialized JSON string from C# code behind to use in Javascript

Question

The ultimate goal here is to populate fields of a Bootstrap modal from an object in the C# code behind that has all the data I need. I serialized the object from the code behind, like this:

JavaScriptSerializer serializer = new JavaScriptSerializer();
sJSON = serializer.Serialize(aerationsystem.AerationSystem);

Now I want to reference that JSON in my Javascript function, like this:

</form>
    <script type="text/javascript">
        function fillModal() {
            var diameterValue = document.getElementById('diameter');            
            var aeration = <%# sJSON %>;
            diameterValue.innerText = aeration.dBinDiameter;
        }
    </script>
</asp:Content>

(I included that closing form tag and the closing asp:Content tag so you all could see where it was that I put this Javascript: at the very end of the file.)

However, when I call that Javascript function, this is what I see in the browser's debugger:

    <script type="text/javascript">
        function fillModal() {
            var diameterValue = document.getElementById('diameter');            
            var aeration = ;
            diameterValue.innerText = aeration.dBinDiameter;
        }
    </script>

I got the idea from here: Any way to pass an object from c# code behind to javascript? But, the means of accessing that JSON variable does not work for me. I've tried moving my script, but when I do that, I get an error that says "The Controls collection cannot be modified because the control contains code blocks (ie <% ... %>).". And I've tried other delimiters, like <%= %>, but I get the same errors depending on script placement. What am I doing wrong? How can I get that JSON string to show up in my Javascript function?

Answer 1

<%# %> is a binding block so you need call the Page.DataBind() method, whether in the Page_Load or the Page_PreRender event.

You also need to curate the string so the JSON text doesn't break your javascript:

var aeration = '<%# sJSON.Replace("'", "\'").Replace("\n", " ") %>';

Answer 2

<%# %> syntax is for binding data from data source.

The easiest way is to use a Literal Server Control. It seems a bit weird inside script tag, but it does the job.

<script type="text/javascript">
    function fillModal() {
        var diameterValue = document.getElementById('diameter');
        var aeration = <asp:Literal id="JsonLiteral" runat="server"/>;
        diameterValue.innerText = aeration.dBinDiameter;
    }
</script>

Code Behind

JavaScriptSerializer serializer = new JavaScriptSerializer();
JsonLiteral.Text = serializer.Serialize(aerationsystem.AerationSystem);

Answer 3

thank you so much for taking the time to answer my question! I ended up solving the problem, with some inspiration from you all. Instead of using a Literal control, I ended up using a <asp:HiddenField> control on the page to store the value. Then, I pulled that its value into the Javascript variable.

The hidden field: <asp:HiddenField ID="JsonLiteral" runat="server" />

The code in the event that assigned the value:

JavaScriptSerializer serializer = new JavaScriptSerializer();
JsonLiteral.Value = serializer.Serialize(aerationsystem.AerationSystem);

And the JavaScript that finished the job:

function fillModal() 
    {
        $(document).ready(function () {
            var diameter = document.getElementById('diameter');
            var control = document.getElementById('<%= JsonLiteral.ClientID%>');
            var aeration = JSON.parse(control.value);

            diameter.innerText = aeration.dBinDiameter;
        });
    }

(There's gonna be a lot more to it than just that one property, of course.)

Again, thank you all for you help, because I could not have done it without you!