script does not run on view containing partial view in mvc

Question

I have two views that use CSS and JavaScript Toggle Accordian. The code in each view is nearly identical (except for the data models). The only "real" difference is that one of the views renders a partial view. The toggle script works perfectly in the view that does not contain a partial view. However, it does not work at all on the view that renders the partial view. The script is in the main view NOT in the partial view, so for the life of me I can't figure out why it doesn't work. I am new to MVC, JavaScript and CSS, so ANY assistance would be greatly appreciated. Thanks in advance for any assistance.

Here is the code from the view that does NOT work:

    @using System.Linq
    @using SARS.Domain.Encryption
    @model SARS.Portal.ViewModel.ReportSearch.ReportSearchResultsViewModel
    @{
        ViewBag.Title = "Reports";
    }

    @Html.Partial("_Criteria")

    <div class="container">

        <div class="row header hr">
            <h3 class="inline-block" id="reports">Reports <div class="numbered">@Model.Results.Count</div> </h3>
        <a href="javascript:history.back()" class="button prim floatR">Back</a>
    </div>
    <div class="nesty DOCS container">
        <ul>
            <li class="row col-xs-16">
            <div class="eaten">
                <ul>
                    @foreach(var resultGroup in Model.Results.GroupBy(result => result.Name).OrderBy(result=>result.Key))
                    {
                        <li class="fruitRollup header row">
                        <div class="suitcaseheader">
                            <span class="col-xs-10 zero firstlabel">@resultGroup.Key</span>
                            <span class="col-xs-3 zero datepad">Date</span>
                            <span class="floatR2">View</span>
                            <span class="clear"></span>
                        </div>
                        <div class="eaten">
                             <ul class="data">
                                @foreach (var reportResult in resultGroup.OrderByDescending(r=>r.Date))
                                {
                                    <li class="data row">
                                        <div class="suitcase">
                                            <span class="col-xs-10 zero">@reportResult.Type</span>
                                            <span class="middle zero">@reportResult.Date.Replace("12:00:00","")</span>
                                            <span class="floatR2">
                                                <a class="icon-view glyph" target="_blank" href="@Url.ActionEncodedParameters("ViewDocument", "DocumentSearch", new { id = reportResult.Id })"></a>
                                            </span>
                                            <span class="clear"></span>
                                        </div>
                                    </li>
                                 }
                             </ul>
                          </div>
                        </li>
                    }
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

@section scripts
{
    <script type="text/javascript" charset="utf-8">

        $(function() {

            /* for animating nice accordions */
            $('.fruitRollup').on('click', function () {

                ToggleAccordian($(this));

                return false;
            });

        });

    </script>
    }

This is the code that works:

@using System.Linq
@using SARS.Domain.Encryption
@model SARS.Portal.ViewModel.ReportSearch.ReportSearchResultsViewModel
@{
    ViewBag.Title = "Reports";
}

@Html.Partial("_Criteria")

<div class="container">

    <div class="row header hr">
        <h3 class="inline-block" id="reports">Reports <div class="numbered">@Model.Results.Count</div> </h3>
        <a href="javascript:history.back()" class="button prim floatR">Back</a>
    </div>
    <div class="nesty DOCS container">
        <ul>
            <li class="row col-xs-16">
            <div class="eaten">
                <ul>
                    @foreach(var resultGroup in Model.Results.GroupBy(result => result.Name).OrderBy(result=>result.Key))
                    {
                        <li class="fruitRollup header row">
                        <div class="suitcaseheader">
                            <span class="col-xs-10 zero firstlabel">@resultGroup.Key</span>
                            <span class="col-xs-3 zero datepad">Date</span>
                            <span class="floatR2">View</span>
                            <span class="clear"></span>
                        </div>
                        <div class="eaten">
                             <ul class="data">
                                @foreach (var reportResult in resultGroup.OrderByDescending(r=>r.Date))
                                {
                                    <li class="data row">
                                        <div class="suitcase">
                                            <span class="col-xs-10 zero">@reportResult.Type</span>
                                            <span class="middle zero">@reportResult.Date.Replace("12:00:00","")</span>
                                            <span class="floatR2">
                                                <a class="icon-view glyph" target="_blank" href="@Url.ActionEncodedParameters("ViewDocument", "DocumentSearch", new { id = reportResult.Id })"></a>
                                            </span>
                                            <span class="clear"></span>
                                        </div>
                                    </li>
                                 }
                             </ul>
                          </div>
                        </li>
                    }
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

@section scripts
{
    <script type="text/javascript" charset="utf-8">

        $(function() {

            /* for animating nice accordions */
            $('.fruitRollup').on('click', function () {

                ToggleAccordian($(this));

                return false;
            });

        });

    </script>
}

Thanks for taking the time to look!

Answer 1

In MVC, the PartialView does not have the ability to use the section helpers. Therefore in a partial view @section scripts will not work. You have to include the script in the main view's script section, or implement a helper to use sections from within partial views.

Source: Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine