locked
Image Load but script doesnt - why ? RRS feed

  • Question

  • User518677258 posted

    I previously posted and accepted 2 answers but the answers did not resolve the issue.  The razor page does not find the script. With a try catch for errors-> Chart is not defined.

    Steps to reproduce problem.  1.) use npm  as forum member said and install as shown.  2. ) Add image in folder dist adjacent to chart.min.js 3.)  Add plain HTML (forumChart) that loads chart ( sample provided below )   4)  Add Chart.cshtml  as shown to load image and script.  Add both razor page and forumPage.html to navigation menu in _Layout.cshtml as shown 

    Inspect source for image and script  see emitted HTML for both are the same, yet chart throws error.   Note also bootstrap script path and chart path both look to me as expected and as intellisense provided ..  Then look at forum(plain html page ).  Graph activated - inspect the source - similar path to bootstrap. 

    https://imagebucket.io/uploads/jp986/

    (  note image at script location )

    How can that be ??  I really really want to be able to leverage razor pages to use the chart script - so close but so far....  Thanks !!!

     <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Chart">Charts</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                            </li>
                            <li class="nav-item">
                                <!-- use href as these are NOT asp-pages just sticking the page folder doesnt work -->
                                <a class="nav-link text-dark" href="~/forumChart.html">ForumChart</a>
                            </li>

     

    @page
    @model CashFlow.Pages.ChartModel
    @{
    }
    @section scripts {
        <script src="~/chart/chart.js/dist/Chart.min.js"></script>
    }
    <div class="text-center">
        <h4 class="display-4">Welcome Charts asp-page inspect source </h4>
        <img src="~/chart/chart.js/dist/riveratChartJavaScript.png" />
    </div>
    <canvas id="pieChartLoc" height="300" width="300"></canvas>
    <script>

        var data = {
            labels: ["Red", "Green", "Blue"],
            datasets: [{
                backgroundColor: ["#FF5555", "#55FF55", "#5555FF"],
                data: [50, 10, 40]
            }]
        }

        var target = document.getElementById("pieChartLoc").getContext("2d");
        alert("got to target");
        try {
            var PieChart = new Chart(target, {
                type: 'pie',
                data: data,
                options: {}
            });
        }
        catch (err) {
            alert(err.message);
        }

    </script>

    The html page  that renders ( as opposed to Razor Page ) ( thanks to fellow forum member  !)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>FromForum</title>
        <link rel="stylesheet" href="./css/site.css" />
        <link rel="stylesheet" href="./lib/bootstrap/dist/css/bootstrap.min.css" />
        <link href="./chart/chart.js/dist/Chart.css" rel="stylesheet" />
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
                <div class="container">
                    <a class="navbar-brand" href="/">CashFlow</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-dark" href="/">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" href="/Chart">Charts</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" href="/Privacy">Privacy</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <div class="container">
            <main role="main" class="pb-3">
                <div class="text-center">
                    <h1 class="display-4">Welcome Forum Chart Example</h1>
                </div>
                <canvas id="pieChartLoc" height="300" width="300"></canvas>
            </main>
        </div>
        <footer class="border-top footer text-muted">
            <div class="container">
                &copy; 2020 - ChartFlow - <a href="/Privacy">Privacy</a>
            </div>
        </footer>
        <script src="./lib/jquery/dist/jquery.min.js"></script>
        <script src="./lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="./js/site.js"></script>
        <script src="./Chart/chart.js/dist/Chart.min.js"></script>
        <script>
            var data = {
                labels: ["Red", "Green", "Blue"],
                datasets: [{
                    backgroundColor: ["#FF5555", "#55FF55", "#5555FF"],
                    data: [30, 35, 35]
                }]
            }

            var target = document.getElementById("pieChartLoc").getContext("2d");
            //alert("got to target");
            try {

                var PieChart = new Chart(target, {
                    type: 'pie',
                    data: data,
                    options: {}
                });
                
            }
            catch (err) {
                alert(err.message);

            }
            
        </script>
    </body>
    </html>

    Saturday, November 21, 2020 6:26 AM

Answers

  • User-821857111 posted

    All of your script should go into the @section scripts block.:

    @page
    @model CashFlow.Pages.ChartModel
    @{
    }
    
    <div class="text-center">
        <h4 class="display-4">Welcome Charts asp-page inspect source </h4>
        <img src="~/chart/chart.js/dist/riveratChartJavaScript.png" />
    </div>
    <canvas id="pieChartLoc" height="300" width="300"></canvas>
    @section scripts {
        <script src="~/chart/chart.js/dist/Chart.min.js"></script>
        <script>
    
            var data = {
                labels: ["Red", "Green", "Blue"],
                datasets: [{
                    backgroundColor: ["#FF5555", "#55FF55", "#5555FF"],
                    data: [50, 10, 40]
                }]
            }
    
            var target = document.getElementById("pieChartLoc").getContext("2d");
            alert("got to target");
            try {
                var PieChart = new Chart(target, {
                    type: 'pie',
                    data: data,
                    options: {}
                });
            }
            catch (err) {
                alert(err.message);
            }
    
        </script>
    }

    Otherwise the script to create the chart is rendered before the scripts tags that include the chart library in the page. It doesn't matter where you put @section scripts{} in your page. The content will be rendered where the RenderSection call is placed in the layout page.

    https://www.learnrazorpages.com/razor-pages/files/layout#sections

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 21, 2020 8:09 AM

All replies

  • User-821857111 posted

    All of your script should go into the @section scripts block.:

    @page
    @model CashFlow.Pages.ChartModel
    @{
    }
    
    <div class="text-center">
        <h4 class="display-4">Welcome Charts asp-page inspect source </h4>
        <img src="~/chart/chart.js/dist/riveratChartJavaScript.png" />
    </div>
    <canvas id="pieChartLoc" height="300" width="300"></canvas>
    @section scripts {
        <script src="~/chart/chart.js/dist/Chart.min.js"></script>
        <script>
    
            var data = {
                labels: ["Red", "Green", "Blue"],
                datasets: [{
                    backgroundColor: ["#FF5555", "#55FF55", "#5555FF"],
                    data: [50, 10, 40]
                }]
            }
    
            var target = document.getElementById("pieChartLoc").getContext("2d");
            alert("got to target");
            try {
                var PieChart = new Chart(target, {
                    type: 'pie',
                    data: data,
                    options: {}
                });
            }
            catch (err) {
                alert(err.message);
            }
    
        </script>
    }

    Otherwise the script to create the chart is rendered before the scripts tags that include the chart library in the page. It doesn't matter where you put @section scripts{} in your page. The content will be rendered where the RenderSection call is placed in the layout page.

    https://www.learnrazorpages.com/razor-pages/files/layout#sections

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 21, 2020 8:09 AM
  • User518677258 posted

    Thank you !!!!   - as I have other razor pages that have used script this took me by surprise !  - thanks again !!!

    Saturday, November 21, 2020 4:30 PM