Get a Session value from my MVC app into my Javascript

Question

This isn't the standard, so please read before marking duplicate.

In our MVC app at the top of our _Layout.cshtml, we load our scripts like this:

@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/scripts")

At the bottom of _Layout.cshtml we have this:

@RenderSection("scripts", required: false)

For reasons outside of my control we must have the defer on that. :(

This bundle includes the jquery files. One of the other files is called Script.js, which gets loaded after jQuery, and has a function called setCollapse(collapse).

It looks like this:

function setCollapse(collapse) {
    debugger;
    alert(collapse);
    if (collapse == 'False') {
        $('.collapse').collapse("show");
    } else {
        $('.collapse').collapse();
    }
}

I would like to use a Session value with that javascript function on my MVC View load like this:

@section scripts
{
    <script>
        $(document).ready(function() {
            debugger;
            var collapse = '@Session["Collapse"].ToString()';
            setCollapse(collapse);
        });
    </script>
}

But I continue to get:

Uncaught ReferenceError: $ is not defined

How can I get my Session value to get passed into my javascript/jQuery when the page loads?

Answer 1

Here's how I worked it out. Of course it was simpler than I figured.

In our MVC app at the top of our _Layout.cshtml I do this:

<script>
    var collapse = '@Session["Collapse"].ToString()';
</script>
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/scripts")

The RenderFormat loads jQuery and my script.js file.

Then in my script.js I do this:

$(document).ready(function () {
    //....

    // Global collapse value
    if (collapse == 'False') {
        $('.collapse').collapse("show");
    } else {
        $('.collapse').collapse("hide");
    }
});

Answer 2

You need to add

 @RenderSection("scripts", required: false)

before the closing body tag in you layout file. As long as your jquery is loaded before that it should just work.

Edit

Add this in the header

<script type="text/javascript">
    window.$ = (function () {
        var q = [], f = function (cb) {
            q.push(cb);
        };
        f.attachReady = function ($) {
            $(function () {
                $.each(q, function (i, f) {
                    f();
                });
                q.length = 0; // clear it, just in case
            });
            return $;
        }
        return f;
    })();
</script>

And then the following before the end of the body tag

<script type="text/javascript">
    $.noConflict();
    $ = $.attachReady(jQuery);
</script>

This would defer all the jquery dependent code and run them once jquery is loaded.

Edit 2

<script type="text/javascript">
    $.noConflict();
    $ = $.attachReady(jQuery);
</script>

This should be the last thing before the end of the body tag.