Using Angular Kendo Grid with Elastic Search and ASP.NET Core

There was a need for using a Kendo Grid in an Angular 5 website where the backing store for the data was Elastic Search. Utilizing the filtering on local data was simple enough but for the needs of filtering there needed to be server side integration. The server was running ASP.NET Core.

To get started create a view and view model for Angular to expose the grid.

To wire the view and view model to the server side data, there needs to be an Angular HTTP service and an ASP.NET Core Controller. The controller needs to be able to accept the filter and paging options of the grid as the user changes them and react to them server side. To accomplish this, some objects need to be created to handle the request:

First, the filter object, which is changed whenever a new filter is selected or is cleared; must be mapped to a C# object that can be serialized. The structure of the Kendo Grid filter is as such:

filter: {
      logic: 'and',
      filters: [{ field: 'ProductName', operator: 'contains', value: 'Chef' }]
}

To make that object transportable to C#, lets create a POCO:

Now lets create an ASP.NET Core controller endpoint for our Filter.

The only thing missing now is the query to work is the CompositeFilterMapper.

You will need to build in your own express and type mapping for properties, but otherwise this is built for Strings and DateTimes. From this base you should be able to implement different types and queries you would need for the Kendo Grid to work with ElasticSearch.

Creating an ASP.NET Core application for Raspberry Pi

As a part of the Wren Hyperion solution, an ASP.NET Core application will run on an ARM based Linux OS (we are building a POC for the Raspberry Pi and Raspian).  Here are the steps on how you can get started with ASP.NET Core on Raspian:

  • Setup a Raspberry Pi with Raspian
  • Install .NET Core
  • Create your ASP.NET Core solution
  • Publish to the Raspberry Pi
  • Install .NET Core to the Raspberry Pi
  • Run your application on the Raspberry Pi

Setup a Raspberry Pi with Raspian

Follow the guides on the Raspberry Pi website to install Raspian on your Pi.

Install .NET Core

  1. Download and Install

    To start building .NET apps you just need to download and install the .NET SDK (Software Development Kit) for Windows.

    Download .NET SDK

    A video frame showing a Windows command prompt. Select this image to start playing the video.

    Video: Creating a Simple .NET Application on Windows

  2. Get an editor

    Visual Studio is a fully-featured integrated development environment (IDE) for developing .NET apps on Windows.

    Download Visual Studio

    Select the .NET Core cross-platform development workload during installation:

    A screenshot of the Visual Studio Installer. The Workload screen is shown, and '.NET Core cross-platform development' is selected.

  3. More info

    While you wait for Visual Studio to install, you can keep learning with the .NET Quick Starts. In the first Quick Start you’ll learn about collections.

    Quick start: Collections

    Once Visual Studio is installed, come back and build your first .NET app using Visual Studio.

Create your ASP.NET Core Solution

  1. Create a new .NET Core project.

    On macOS and Linux, open a terminal window. On Windows, open a command prompt.

    dotnet new razor -o aspnetcoreapp
  2. Run the app.Use the following commands to run the app:
    cd aspnetcoreapp
    dotnet run
    
  3. Browse to http://localhost:5000
  4. Open Pages/About.cshtml and modify the page to display the message “Hello, world! The time on the server is @DateTime.Now “:
    @page
    @model AboutModel
    @{
        ViewData["Title"] = "About";
    }
    <h2>@ViewData["Title"]</h2>
    <h3>@Model.Message</h3>
    
    <p>Hello, world! The time on the server is @DateTime.Now</p>
    
  5. Browse to http://localhost:5000/About and verify the changes.

Publish to the Raspberry Pi

On macOS and Linux, open a terminal window. On Windows, open a command prompt and run:
dotnet clean .
dotnet restore .
dotnet build .
This will rebuild the solution. Once that is complete run the following command:
dotnet publish . -r linux-arm
This will generate all the files needed for running the solution on the Raspberry Pi. After this command completes generating the needed files, the files need to be deployed to the Pi. Run the following command in Powershell from the publish folder:
& pscp.exe -r .\bin\Debug\netcoreapp2.0\ubuntu.16.04-arm\publish\* ${username}@${ip}:${destination}
Where username is the username for the Pi (default “pi”), ip is the ip address of the Pi, and destination is the folder the files will be published to.

Install .NET Core to the Raspberry Pi

This section is sourced from Dave the Engineer’s post on the Microsoft blog website.

The following commands need to be run on the Raspberry Pi whilst connected over an SSH session or via a terminal in the PIXEL desktop environment.

  • Run sudo apt-get install curl libunwind8 gettext. This will use the apt-get package manager to install three prerequiste packages.
  • Run curl -sSL -o dotnet.tar.gz https://dotnetcli.blob.core.windows.net/dotnet/Runtime/release/2.0.0/dotnet-runtime-latest-linux-arm.tar.gz to download the latest .NET Core Runtime for ARM32. This is refereed to as armhf on the Daily Builds page.
  • Run sudo mkdir -p /opt/dotnet && sudo tar zxf dotnet.tar.gz -C /opt/dotnet to create a destination folder and extract the downloaded package into it.
  • Run sudo ln -s /opt/dotnet/dotnet /usr/local/bin` to set up a symbolic link…a shortcut to you Windows folks 😉 to the dotnet executable.
  • Test the installation by typing dotnet –help.

  • Try to create a new .NET Core project by typing dotnet new console. Note this will prompt you to install the .NET Core SDK however this link won’t work for Raspian on ARM32. This is expected behaviour.

Run your application on the Raspberry Pi

Finally to run your application on the Raspberry Pi, navigate to the folder where the application was published and run the following command:

dotnet run

You can then navigate to the website hosted by the Raspberry Pi by navigating to http://{your IP address here}:5000.