Uncaught ReferenceError: $ is not defined in Power BI Embedded

Question

I'm trying to embed Power BI dashboard in my ASP.NET Core 2.1 Application. I get a javascript error while running this application saying $ is undefined. I have already defined this variable in a div and I'm trying to access this in the script. Here is my code for index.cshtml.

@model WebApplication2.Models.EmbedConfig
    @{
        ViewBag.Title = "Dashboard";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    <script src="https://npmcdn.com/[email protected]"></script>
    <script src="~/js/powerbi.js"></script>
    @if (!string.IsNullOrEmpty(Model.ErrorMessage))
    {
        <div id="errorWrapper">
            <h2>
                Error
            </h2>
            @Model.ErrorMessage
        </div>

        return;
    }
    <br />

    <a href="javascript:void(0);" class="btn btn-primary" id="backLink">Back</a>
    <br /><br />

    <h2>Embedded Dashboard</h2>

    <br />

    <div id="dashboardContainer"></div>

    <script>

        var accessToken = "@Model.EmbedToken.Token";

        var embedUrl = "@Html.Raw(Model.EmbedUrl)";

        var embedDashboardId = "@Model.Id";

        var models = window['powerbi-client'].models;

        var config = {
            type: 'dashboard',
            tokenType: models.TokenType.Embed,
            accessToken: accessToken,
            embedUrl: embedUrl,
            id: embedDashboardId,

            settings: {
                background: models.BackgroundType.Transparent
            }
        };

        // Get a reference to the embedded dashboard HTML element
        var dashboardContainer = $('#dashboardContainer')[0];

        // Embed the dashboard and display it within the div container.
        var dashboard = powerbi.embed(dashboardContainer, config);
    </script>

This is my Index.cshtml in my .net core 2.1 application. I get an error saying $ is undefined. I've clearly defined dashboardContainer. Why am I getting this error?

Answer 1

Seems like you need to include jquery. Try using classic javascript instead to see if that's the issue.

Replace var dashboardContainer = $('#dashboardContainer')[0]; with var dashboardContainer = document.getElementById("dashboardContainer");