ASP .NET Core(.NET6) RazorPagesでのFORMの値をクラス型でPostする

Personをクライアント側で動的に増減したいので

asp-forでbindするのではなく、idとnameを指定して

配列を受け取るようにしたい。

<ViewModel>

 public class Person

{

    public string? Name{get; set;}

    public Int32? Age{get;set;}

}

<RazorPages>

public IActionResult OnPostSave(Person[] person)
{

    //DataAnotationの実行はここで

    var success = true;

    foreach(var p in person)

    {

        success &= TryValidateModel(p);

    }

}

<cshtml>

<form id="frm" asp-route-handler="Save">

    <input id="person_Name" name="person[0].Name" type=～～ />

    <input id="person_Age" name="person[0].Age" type=～～ />

    <input id="person_Name" name="person[1].Name" type=～～ />

    <input id="person_Age" name="person[1].Age" type=～～ />

</form>

・覚えておくこと

inputタグのname属性を

OnPostSaveの引数パラメーター名 + [0からの要素番号] + .(ドット) + クラスのプロパティ名

とすること。

クライアントの検証は、$('#frm').validate().form()でできる。

ActiveReports16 .NET Core 6 RazorPagesでJSViewerを使う

・Nugetで追加

GrapeCity.ActiveReports.Aspnetcore.Viewer(16.0.2) を追加

・プロジェクトに追加

wwwroot/js/ に jsViewer.min.js

wwwroot/css/ に jsViewer.min.css

※これらは、npmで云々と記述されているが

公式からDLしたインストーラーでインストールした下記フォルダに入ってる。

～\Program Files(x86)\ActiveReportsNET16\Deployment\JSViewer

・Program.cs にレポート機能を追加を記述(青字部分)

using GrapeCity.ActiveReports.Aspnetcore.Viewer;

var builder = WebApplication.CreateBuilder(args);

～～ 略 ～～

var app = builder.Build();

～～ 略 ～～

app.UserStaticFiles();

app.UseReporting(settings =>

{
   settings.UseFileStore(new DirectoryInfo("サーバーのレポートファイルの場所"));

   settings.UseCompression = true;

});

～～ 略 ～～

・ページレポート(rdlx)を作成する

・レポートエクスプローラーのパラメータから追加する

　名前：ReportParameter1

　非表示にチェックONしておいた。

とする。

・レポートエクスプローラーのデータソースを追加

名前は適当

種類にJson Providerを指定

接続、接続文字列のタブに

「="jsondata=" & Parameters!ReportParameter1.Value」とする

赤字部分は、パラメータの名前にすること。

・データセットを追加

作成したデータソースにデータセットを追加する。

クエリに「$.[*]」を指定(これがないと、「コマンドテキストが空です。」と怒られる。

フィールドに必要な項目を追加。(名前は小文字の方がいいかも？)

・cshtmlに記述する

・jsとcssの参照を追加

<link rel="stylesheet" href="~/css/jsViewer.min.css" asp-append-version="true" />

<script src="~/js/jsViewer.min.js" asp-append-version="true"></script>

・HTML

<div id="previewcontainer"> </div>

・scriptタグの中

//elementはviewerを表示するdivのjQueryセレクタ

var viewer = GrapeCity.ActiveReports.JSViewer.create({

    element : '#previewcontainer',

    reportService: {

        url: '@(Url.Content("~/api/reporting"))'

    }

});

var jsondata = [{ "id": "1000", "name": "太郎"},{ "id": "1001", "name": "花子"}];

const  param = [

    {

        name: 'ReportParameter1',    //ページレポートのパラメータ名と一致させる

        values: [JSON.stringify(jsondata)]

    }

];

//ページレポート(rdlx)は、Program.csに指定したフォルダに入れておく

viewer.openReport("TEST.rdlx", param);

こんなもんだったと思う。

jsondataの取得部分をajaxでRazorPageにアクセスして取得。

JsonResultで返せばOK

EntityFrameworkでDBからスキャフォールディング

DBにテーブルを作る(今回はSQLServer)

NuGetパッケージを追加

・Microsoft.EntityFrameworkCore

・Microsoft.EntityFrameworkCore.Design

・Microsoft.EntityFrameworkCore.SqlServer

・Microsoft.EntityFrameworkCore.SqlServer.Design

・Microsoft.EntityFrameworkCore.Tools

Visual Studioのパッケージマネージャコンソールで以下を実行

(接続先DB等は適宜変更する)

Scaffold-DbContext -Connection "Server=localhost\SQLEXPRESS;Database=hoge;Trusted_Connection=True;" -Provider Microsoft.EntityFrameworkCore.SqlServer -UseDatabaseNames -DataAnnotations -ContextDir Datas -OutputDir Models

各パラメータは以下を参照すると良い

https://docs.microsoft.com/ja-jp/ef/core/cli/powershell

-ContextDir と -OutputDir は

Hoge\Data とか Hoge\Modelsと

してあげると、階層の下に作成できた。

Build failed になった場合

NuGet参照が足りないか

出力先にすでにDbContextファイルがあったりとか

だとエラーになった。

詳細はわからない。