Blazor でX-Cart データにリアルタイムで連携するアプリを構築

詳細情報をご希望ですか?

無償トライアル:

ダウンロードへ

製品の詳細情報へ:

X-Cart ADO.NET Provider

X-Cart 連携のパワフルな.NET アプリケーションを素早く作成して配布。



ASP.NET Core Blazor C# でX-Cart にSQL でクエリ。



Blazor は、.NET を使って対話型のクライアント側Web UI を構築するためのフレームワークです。JavaScript の代わりにC# を使って、UI を作れるところが魅力です。また、既存の.NET ライブラリや.NET エコシステムを使うことができる利点があります。

CData ADO.NET Provider for X-Cart は、LINQ やEntity Framework などの標準のADO.NET インターフェースを使ってX-Cart を操作可能にします。Blazor が.NET Core 対応をしているため、Server Side Blazor からADO.NET Provider を使うことができます。この記事では、Server Side Blazor からX-Cart に接続して直接SQL クエリを実行する方法を説明します。

CData ADO.NET Provider for X-Cart のインストール

CData ADO.NET Provider は、通常であればRDB に接続するフレームワークである ADO.NET DataAdapter やLinqToSQL(もしくはDapper などのORM を挟んでもいいです)であり、X-Cart のデータへもRDB と同感覚でアクセスが可能になります。

CData のWebsite からProvider をダウンロードして、マシンにインストールします。NuGet からインストールすることも可能です。X-Cart ADO.NET Data Provider で検索してください。

Blazor でX-Cart にデータ連携するアプリを構築

Blazor にADO.NET Provider for X-Cart を接続

  • Visual Studio を立ち上げて、Blazor アプリのプロジェクトを作成します。
  • ソリューションエクスプローラーで「依存関係」から右クリックで「プロジェクト参照の追加」をクリック。
  • 参照マネージャーが開くので、「参照」ボタンをクリックして、先ほどインストールしたADO.NET Provider の.dll を選択します。「C:\Program Files\CData\CData ADO.NET Provider for XCart 2019J\lib etstandard2.0」内のSystem.Data.CData.XCart.dll」を参照に選びます。

Blazor でX-Cart データをSELECT

サンプルプロジェクトの「Page」→「Index.razor」を開きます。

以下のコードを書きます。使っているクエリはおなじみの標準SQL です。X-Cart 固有のAPI を書かなくてもRDB と同感覚でSQL が書けるところがADO.NET Prover for X-Cart の強味です。

    
      @page "/"
      @using System.Data;
      @using System.Data.CData.XCart;
      
      

Hello, world!

Welcome to your Data app.
@using (XCartConnection connection = new XCartConnection( "Url=https://example.com/shop;ApiKey=MyApiKey;")) { var sql = "SELECT ProfileId, FirstName FROM PROFILES WHERE Language = 'en'"; var results = new DataTable(); XCartDataAdapter dataAdapter = new XCartDataAdapter(sql, connection); dataAdapter.Fill(results); @foreach (DataColumn item in results.Rows[0].Table.Columns) { } @foreach (DataRow row in results.Rows) { @foreach (var column in row.ItemArray) { } }
@item.ColumnName
@column.ToString()
}

An API Key must be created for your XCart Installation. In order to obtain the API Key, you need to install and configure the REST API Module for your X-Cart installation.

  • Login to your X-Cart Installation. Click on My addons on the bottom of the left side-bar navigation panel.
  • Search for REST API Module. Install the Module.
  • After the module has been installed, you need to set it up.
    • Go to the Settings section for the REST API Module.
    • On the settings page specify the API Key (only read)
  • Set the ApiKey and Url to the connection property to connect to data.

プロジェクトをリビルドして実行します。このようにX-Cart からデータを直接取得し、HTML テーブル形式にレンダリングしています。

もちろんSaaS データソースへの接続の場合には、RDB 向けのドライバーと違い最終的にはHTTP リクエストが行われるので、サーバーサイド Blazor としてサーバーサイドから実行されるのか、クライアントサイド Blazor として、実行中のブラウザからHTTPリクエストが行われるのかの違いはあります。そのあたりはネットワークやプロキシの設定として注意が必要でしょう。設定はコード内の接続プロパティで可能です。

まとめ

このようにサーバーサイドBlazor アプリから簡単にADO.NET Provider を使ってX-Cart にリアルタイムでデータ取得を行うアプリを作ることができました。Blazor が.NET Core、フレームワークのツール群を使えるというメリットを活かすことができます。今回はSELECT * でしたが、フィルタリングやJOIN も可能です。是非、30 日の無償トライアル でシンプルかつパワフルなADO.NET Provider でのサーバーサイドBlazor 連携をお試しください。