Oqtane Tutorials
Oqtane Tutorials

External Data from CSV or SQL

Tutorial Home › External Data
Look at the Content-Type of something
#1 Example from CSV
Various SQL Samples
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)
Requirements
Resources

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: ProductsFromCSVOqtane

No details yet for ProductsFromCSVOqtane

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: ProductsFromCSVOqtane

No details yet for ProductsFromCSVOqtane

 

Look at the Content-Type of something
#1 Example from CSV
Various SQL Samples