Live Razor Page Samples

@page
@model WebPageWithEmbeddedChartImageModel
@{ 
  Layout = "_SamplesLayout";

  // This is the path to a sample that will generate a workbook containing a chart with the shape name "SalesByRegionChart".
  var targetSamplePagePath = Url.Page("/Support/Samples/RazorPages/Reporting/ExcelReportWithChart");

  // This is a link to the SpreadsheetGear Image Rendering Utility that will open the workbook generated from the above sample
  // and render an image of the chart.
  var imgSrc = Url.Page("SpreadsheetGearImage", new { PagePath = targetSamplePagePath, ShapeName = "SalesByRegionChart" });
}
<div class="row">
  <div class="col-8 offset-2">
    <div class="card">
      <h2 class="card-header">Web Page with Embedded Chart Image</h2>
      <div class="card-body">
        <p>
          Using a standard HTML <span class="font-monospace">&lt;img&gt;</span> tag, we pass into its 
          <span class="font-monospace">src</span> attribute a link to the <a asp-page="../View" 
          asp-route-urlSlug="SpreadsheetGearImage" target="_blank">SpreadsheetGear Image Rendering Utility</a>, which in turn 
          makes a web request to generate a workbook from the <a asp-page="../View" asp-route-urlSlug="ExcelReportWithChart" 
          target="_blank">Excel Report with Formatted Chart</a> sample, which contains a chart with the name "SalesByRegionChart" 
          that will ultimately be rendered on this page.
        </p>

        <div class="alert alert-info">
          <div class="fw-bold">URL of <span class="font-monospace">&lt;img src="&mldr;"&gt;</span></div>
          <div class="small font-monospace"><a id="image-url-link" href="@imgSrc" target="_blank">@imgSrc</a></div>
        </div>

        <div class="text-center">
          <img src="@imgSrc" style="border: 2px solid black;" alt="Rendered chart image will be displayed here." />
        </div>
      </div>
    </div>
  </div>
</div>