Skip to main content
Home  › ... Razor

External Data from CSV or SQL

Tutorial HomeExternal Data
The samples can differ based on your Razor base class or if you're running an old version.
Selected: Strong-Typed (2sxc 17.06+) Switch to Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)

Example from CSV

CSV files are often used so website-owners can upload data from another system. This example shows us getting the CSV-file through a query and visualizing it here.

Result

@inherits AppCode.Razor.AppRazor
@using AppCode.Data
@using ToSic.Razor.Blade
@using System.Linq

@{
  // get the query
  var query = App.GetQuery("ProductsFromCSV");

  // get the data from the query as CsvProduct objects
  var products = AsList<CsvProduct>(query.List);

  // get the current product or the default - the query always selects one
  // based on the URL
  var current = As<CsvProduct>(query.GetStream("Current"));
}
<ul>
  @foreach (var product in products) {
    <!-- this li will have class=selected if it's the current one -->
    <li class='@(product == current ? "selected" : "")'>
      <!-- this creates a link to the current page and product=id -->
      <a href='@Link.To(parameters: MyPage.Parameters.Set("product", product.Id))'>
        @product.Name (#@product.Id)
      </a>
      @if (current == product) {
        <br>
        <em>
          @current.Description 
          (<a href="@product.Link" target="_blank">find out more</a>)
        </em>
      }
    </li>
  }
</ul>

Source Code of products.csv.txt

Id;Name;Description;License;Created;Link
1;2sxc;A neat CMS extension for DNN;MIT;01.01.2012;https://2sxc.org/
2;Koi;System to coordinate the CSS-Framework between theme and modules. ;MIT;01.06.2018;https://connect-koi.net/
3;Razor Blade;Helpers for common Razor task;MIT;01.02.2019;https://github.com/DNN-Connect/razor-blade
4;Image Resizer;Automatic, amazing image Resizer;MIT;06.05.2013;https://2sxc.org/learn-extensions/ImageResizer

Source Code of CsvProduct.cs

namespace AppCode.Data
{
  /// <summary>
  /// A strong-typed data model for data from the CSV.
  /// </summary>
  public class CsvProduct: Custom.Data.CustomItem
  {
    public string Name => _item.String("Name");

    public string Description => _item.String("Description");

    public string Link => _item.String("Link");
  }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: ProductsFromCSVDnn
Details for Products CSV

Get Current Data from CSV

Query Designer

This is similar to the previous example, except that the CSV file can be uploaded again and again in the App-Settings UI. So the path isn't hard-coded.

Result

@inherits AppCode.Razor.AppRazor
@using AppCode.Data
@using ToSic.Razor.Blade
@using System.Linq

@{
  // get the query
  var query = Kit.Data.GetQuery("ProductsFromCsvInAppSettings");

  // get the data from the query as CsvProduct objects
  var products = AsList<CsvProduct>(query.List);

  // get the current product or the default - the query always selects one
  // based on the URL
  var current = As<CsvProduct>(query.GetStream("Current"));
}
<ul>
  @foreach (var product in products) {
    <!-- this li will have class=selected if it's the current one -->
    <li class='@(product == current ? "selected" : "")'>
      <!-- this creates a link to the current page and product=id -->
      <a href='@Link.To(parameters: MyPage.Parameters.Set("product", product.Id))'>
        @product.Name (#@product.Id)
      </a>
      @if (product.Equals(current)) {
        <br>
        <em>
          @current.Description
          (<a href="@product.Link" target="_blank">find out more</a>)
        </em>
      }
    </li>
  }
</ul>

Source Code of products.csv.txt

Id;Name;Description;License;Created;Link
1;2sxc;A neat CMS extension for DNN;MIT;01.01.2012;https://2sxc.org/
2;Koi;System to coordinate the CSS-Framework between theme and modules. ;MIT;01.06.2018;https://connect-koi.net/
3;Razor Blade;Helpers for common Razor task;MIT;01.02.2019;https://github.com/DNN-Connect/razor-blade
4;Image Resizer;Automatic, amazing image Resizer;MIT;06.05.2013;https://2sxc.org/learn-extensions/ImageResizer

Source Code of CsvProduct.cs

namespace AppCode.Data
{
  /// <summary>
  /// A strong-typed data model for data from the CSV.
  /// </summary>
  public class CsvProduct: Custom.Data.CustomItem
  {
    public string Name => _item.String("Name");

    public string Description => _item.String("Description");

    public string Link => _item.String("Link");
  }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: ProductsFromCSVDnn
Details for Products CSV

Get Current Data from CSV

Query Designer