Back To Razor Page Samples

Live Razor Page Samples

Dashboard from 1693 Analytics

This sample shows how to create a dashboard where the user chooses from a list of states, and relevant educational cost data and charts are returned for that state. The model and the data for this sample are contained in a static Excel workbook which has been provided by 1693 Analytics, but it could just as easily come from a workbook which is dynamically generated.
Start Sample

Supporting Files

The following file is utilized by this sample:

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Website.Pages.Support.Samples.RazorPages.Imaging
{
    public partial class Dashboard1693AnalyticsModel : PageModel
    {
        public List<string> States { get; set; } = [];

        public void OnGet()
        {
            // Open the workbook
            SpreadsheetGear.IWorkbook workbook = SpreadsheetGear.Factory.GetWorkbook("files/1693analytics.xls");

            // Dynamically build the state list using a defined name.
            SpreadsheetGear.IRange stateRange = workbook.Names["ListOfStates"].RefersToRange;
            foreach (SpreadsheetGear.IRange cell in stateRange)
                States.Add(cell.Text);
        }
    }
}

@page
@model Dashboard1693AnalyticsModel

<div class="row justify-content-center">
  <div class="col">
    <div class="card mb-2">
      <h2 class="card-header">Sample Details</h2>
      <div class="card-body">
        <div class="row small">
          <div class="col-12 order-last order-xl-first">
            <div class="alert alert-secondary">
              <div class="mb-2">
                <label for="states-list" class="form-label">Select a State:</label>
                <select id="states-list" class="form-select">
                  @foreach (var state in Model.States)
                  {
                    <option value="@state">@state</option>
                  }
                </select>
              </div>
            </div>
          </div>
          <div class="col-12 order-first order-xl-last">
            <p>
              This sample shows how to create a dashboard where the user chooses from a list of states, and relevant
              educational cost data and charts are returned for that state. The model and data for this sample are 
              contained in a static Excel workbook which has been provided by Burt Baker at 
              <a href="http://www.1693net.com/">1693 Analytics, LLC</a>, but it could just as easily come from a 
              workbook which is dynamically generated by SpreadsheetGear.
            </p>

            <p>The key steps in the generation of this dashboard are:</p>
            <ul>
              <li>
                The source workbook is opened upon first visiting the sample page in the <code>OnGet</code> handler 
                and a list of states with available data is created, which will populate the <code>&lt;select&gt;</code>
                element on the Razor Page.
              </li>
              <li>
                JavaScript on the Razor Page sets up an event handler to construct a URL to the 
                <a asp-page="/Support/Samples/RazorPages/View" asp-route-urlSlug="SpreadsheetGearImage" target="_blank">
                SpreadsheetGear Image Rendering Utility</a> whenever the <code>&lt;select&gt;</code> element's selection is 
                changed.
              </li>
              <li>The constructed URL is assigned to the <code>&lt;img&gt;</code> element's <code>src</code> attribute.</li>
              <li>
                The browser generates an HTTP request to the image rendering utility which generates the 
                dashboard.
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-auto">
    <div class="card">
      <div class="card-body">
        <div class="card-text">
          <div class="alert alert-info">
            <h5>
              Image Generated by
              <a asp-page="/Support/Samples/RazorPages/View" asp-route-urlSlug="SpreadsheetGearImage" target="_blank">
                SpreadsheetGear Image Rendering Utility
              </a>
            </h5>
            <hr />
            <div class="fw-bold">URL of <span class="font-monospace">&lt;img src="&mldr;"&gt;</span></div>
            <div class="small font-monospace" style="font-size: 9pt;"><a id="image-url-link" href="#" target="_blank"></a></div>
          </div>
          <img id="dashboard-img" />
        </div>
      </div>
    </div>
  </div>
</div>

@section Scripts
{
  <script>
    $(function () {
      // Handle value changes to the select list
      $("#states-list").change(function () {
        // The name of the page containing the SpreadsheetGear Image Rendering Utility.
        let imageRenderingUtility = "SpreadsheetGearImage";

        // The name of the workbook that contains the 1693 Analytics dashboard.
        let file = "?FileName=1693analytics.xlsx";

        // The name of the worksheet that will be rendered.
        let worksheet = "&WorksheetName=Template";

        // The range that will be rendered by the image rendering utility which has been given a user defined 
        // name of "Dashboard".
        let range = "&RangeFormula=Dashboard";

        // The currently selected State from the select listbox will be placed in the cell, which has been given 
        // a user defined name of "CurrentState", by the SpreadsheetGear Image Rendering Utility.
        let value = "&CurrentState=" + $(this).val();

        // Construct the final URL string.
        let url = imageRenderingUtility + file + worksheet + range + value;

        // Set "src" attribute of the img element.
        $("#dashboard-img").attr("src", url);

        // Update link displayed on the sample page to reflect the new URL.
        $("#image-url-link").attr("href", url).html(url);
      }).change(); // Trigger an initial change to the select list
    });
  </script>
}