Use Razor to set javascript variable

Question

Apologies if its basic for the C# developers out there. I have several <accordion> in one sidebar and each has data-ng-click="isOpen = !isOpen" to either expand or collapse accordion. The issue is that each of these calls a different controller. Is there a way to globally set the isOpen variable to make sure all accordions are expanded by default and the can be clicked to expand/collapse ?

Read: Passing Javascript to Razor $rootscope Accordion expand alland many others

This is a sample code for one of the sections.....there are many more though with different controllers:

    <accordion>
        <div class="zone zone-aside-right">


                <div data-ng-controller="SelectUserController" id="account-group-widget">
                    <accordion-group class="sp-sidebar-module">
                        <div>
                            <accordion-heading>
                                <h3 class="h4 sp-sidebar-module-header">
                                    <a id="headerRelatedContacts" href="javascript: void(0);" data-ng-click="isOpen = !isOpen"><i id="iconRelatedContacts" class="icon-refresh icon-spin"></i>@mycontact.text</a>
                                </h3>

                            </accordion-heading>
                        </div>
                    </accordion-group>
                </div>
</accordion>

Appreciate suggestions...

do you want all the accordion to expand and collapse at the same time? — user449689, Nov 16 '16 at 13:30

score 1 · Answer 1 · answered Nov 16 '16 at 13:25

Assuming you have the value for isOpen stored as bool in your ViewModel, you can use the razor @ syntax to emit this value as text, e.g. inside a <script> block.

There are some caveats when converting a C# boolean to a JS boolean, so we use the following extension method to handle this:

/// <summary>
/// Convert bool value to javascript boolean (as string because it is placed in javascript)
/// </summary>
public static System.Web.IHtmlString ToJSBoolean(this bool value) {
    return new MvcHtmlString(value.ToString().ToLower());
}

Usage inside the razor view:

<script type="text/javascript">
    var isOpen = @Model.IsOpen.ToJsBoolean();
</script>

Use Razor to set javascript variable

1 Answers1