locked
Html.Raw JavaScript block not invoked RRS feed

  • Question

  • User-217557848 posted

    Hello,

    Seems like a semi-esoteric thing to want to do, I have some first-class Enumerations that I want to "share" into my client side JavaScript code. It's a bit more complicated than that, but for sake of example, this will be sufficient:

    class Color
    {
        public static readonly Color Red = new Color(1, "Red");
        public static readonly Color Green = new Color(2, "Green");
        public static readonly Color Blue = new Color(3, "Blue");
    
        private Color(int ordinal, string name)
        {
            Ordinal = ordinal;
            Name = name;
        }
    
        public int Ordinal { get; private set; }
        public string Name { get; private set; }
    }

    I have a C# helper class that is formatting them successfully, and I have verified that the resulting client side JavaScript is correct.

    var Color = function(name, value) {
        this.name = name;
        this.value = value;
    }
    
    if (Color.Red === undefined) {
        var x = Color.Red = new Color("Red", 1);
    }
    
    if (Color.Green === undefined) {
        var x = Color.Green = new Color("Green", 2);
    }
    
    if (Color.Blue === undefined) {
        var x = Color.Blue = new Color("Blue", 3);
    }

    Not including the JavaScript renderer; like I said, the rendering itself is correct, I have verified that.

    Key: I convey the rendered block via my ASP.NET view model, as a String property, which I embed as @Html.Raw(Model.JavaScriptCode). I verified that the code is landing in the source correctly in my Chrome client.

    However, after loading the page, I want to reference the type to verify it, something like this, Color, which should yield the defined function, but I get an exception, "Uncaught ReferenceError: Color is not defined". I also cannot reference, Color.Red, Color.Green, nor Color.Blue, of course.

    When I copy and paste the code that is in the page to the console, it runs successfully, and then I can successfully reference the objects, get their keys, etc.

    Even if I wrap it in a jQuery block like this, $(function() { ... });, does not work either.

    If this is being rendered on the server side, then why isn't the client seeing it properly in order to process it? Or is it some obscure ASP.NET page rendering event life cycle timing?

    Monday, August 15, 2016 6:11 PM

Answers

  • User-217557848 posted

    This started off as a suspected MVC thing, but turns out was more of a JavaScript scope issue. Problem solved.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 16, 2016 1:09 PM

All replies

  • User-217557848 posted

    In fact, I can't even seem to test for definition in a subsequent block of code without the same exception being thrown:

    $(function () {
        if (Color !== undefined) {
            document.write("Color is defined");
        } else {
            document.write("Color is undefined");
        }
    });

    Possibly more of a Chrome issue, or an ASP.NET page rendering issue?

    Monday, August 15, 2016 6:17 PM
  • User-217557848 posted

    Did some troubleshooting, put some client side breakpoints in, and verified that the enum is initializing correctly. So at the moment, I am leaning towards some sort of Chrome JavaScript GC thing going on, which wouldn't surprise me, but I wouldn't expect an exception in a subsequent line of code. Minimum I might expect it to be undefined, or defined, either way. It's curious.

    Monday, August 15, 2016 6:24 PM
  • User-2057865890 posted

    Hi mwpowellhtx,

    According to your description, I think you can test your code in other browsers. After all, different browsers still have differences in code support. It would be better if you can provide the code of controller and view then we can reproduce problem and give some suggestions for you.

    Best Regards,
    Chris

    Tuesday, August 16, 2016 12:38 PM
  • User-1404113929 posted

    hi,

    you can debug javascript code , set default browser to ie and put a breakpoint inside javascript then run the website. 

    thanks,

    murali

    Tuesday, August 16, 2016 1:08 PM
  • User-217557848 posted

    This started off as a suspected MVC thing, but turns out was more of a JavaScript scope issue. Problem solved.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 16, 2016 1:09 PM