投稿

7月, 2020の投稿を表示しています

7月28日(火)1、2コマ目

イメージ
今日の予習 C#のクラスについて 以下のサイトが一応参考になる。 C#のクラスとオブジェクト(Microsoft Docs) が、簡単なひな型を作ると以下のようになる。 今日、やったこと (結局、ほぼ)前回のおさらい 今日のホワイトボード C#のクラスについて 基本的にはJavaと同じ感じ。 図 Javaのクラス、C#のクラス 注意点を以下にまとめました。 Javaのフィールド、setter・getterは .Netではプロパティを使う。プロパティを用意することで、フィールドとsetter・getterが用意される。なお、プロパティ名は1文字目は大文字。(文法的なルールではない) フィールド名 1文字目は_。(文法的なルールではない) メソッド名 1文字目は大文字。(文法的なルールではない) ~.cshtml.csから~.cshtmlへデータを渡す ~.cshtml.csにプロパティを用意する。~.cshtmlから~.cshtml.csのプロパティにアクセスしてデータ取得。 図 ~.cshtml.csから~.cshtmlにデータを渡す 〇~.cshtml.cs側 プロパティを用意 〇~.csthml ~.cshtml.csのプロパティにアクセスするには Model.プロパティ名 でアクセス可能。 注意!! HTMLに埋め込む場合は、以下のようにコードナゲットを使うこと。 @Model.プロパティ名 ~.cshtmlのフォームデータを~.cshtml.csのOnPost()メソッドを受け取る OnPost()メソッドの引数経由で受け渡し可能。 なお、 引数名はフォーム内のvalue属性指定値と同じにする こと。 また、~.cshtmlに @addTagHelper *,Mi...

7月21日(火)1、2コマ目

イメージ
今日、やったこと ~.cshtmlと~.cshtml.cs間でのデータ受け渡し OnGet()、OnPost() 今日のホワイトボード 今までは~.cshtmlだけ Razorページを追加すると ~.cshtml ~.cshtml.cs のペアが追加される。が、今までは~.cshtmlで コードブロック コードナゲット ディレクティブ を使っただけだった。 ~.cshtml.csもある ~.cshtmlはHTML+C#のイメージ。 ~.cshtml.csは普通のC#のクラス。 HTTPの GETコマンドやPOSTコマンドに対する処理 を書くことができる。 ~.cshtml.csから~.cshtmlにデータを渡す ①~.cshtml.csにはプロパティを用意する ②~.cshtmlでは Model.プロパティ名 で取得できる ~.cshtml.csのインスタンスライフサイクル クライアントからの リクエストごとにインスタンスが生成される 。 以外と重要なので、覚えておいてください。 リクエストごとにインスタンスが生成されるため、プロパティの値もリクエストごとに変わる。(前のリクエストの状態を維持することができない!!) よって、プロパティに表示データの初期値をセットするのはコンストラクタがいい。 submitボタンとOnPost() submitボタンをクリックする(POSTコマンド送信)と、選択値や入力値を送信できる。 これらのデータを取得してなにか処理をしたい場合、~.cshtml.csのOnPost()メソッドを使う。 ポイント1 name属性 = 引数名 HTMLのname属性と同じ名前の引数に選択値、入力値が代入される。 ポイント2 ~.cshtmlに@AddTagHelper追加 以下を追加すること。   @AddTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 自作クラスを使う ~.cshtmlや~.cshtm...

7月14日(火)1、2コマ目

イメージ
今日、やったこと Razorページの練習問題 @functionsディレクティブ 今日の練習問題 Razorページのなかでもコードブロック、コードナゲットに関する練習問題。 なお、プロジェクトフォルダ内は下図のようになっている。 練習1 繰り返しのコードブロック(@for(){ })と明示的なRazor式で作成可能。 練習2 画像ファイルは静的ファイル。よって、以下が必要。 Startup.csのConfigure()メソッドにて、app.UseStaticFiles()実行 wwwrootディレクトリ作成(静的ファイルはここに配備) wwwrootの下にimagesディレクトリ作成 画像ファイルはimagesディレクトリへ また、画像の表示は<img>タグを使う。 練習3 5×10の表。 セルの背景色は<TD>で指定。 今日のホワイトボード @functions{} ディレクティブ フィールドやプロパティ、メソッドが作れる。 C#的なメソッドだけでなく、HTMLのタグを含むメソッドも作成可能。 HTMLからこのメソッドを呼び出すと、呼び出した箇所にHTMLが埋め込まれる。

7月7日(火)1、2コマ目

イメージ
今日、やったこと Razorページ 今日のホワイトボード Webアプリケーションをつくるには 静的なHTMLだけでは無理。 ちまたにはHTMLにプログラミング要素が追加できる手段がいくつか用意されている。 この授業ではASP.NET Coreで用意されているRazorページを利用する。 Razorページのプロジェクトフォルダ Startup.csの編集が必要。 RazorページはPagesディレクトリ以下に配備。 Razorページを追加すると以下の2つのファイルができる。 〇~.cshtml HTMLにコードブロックやコードナゲットを使って、C#のプログラムや変数をHTMLに埋め込むことができる。 〇~.cshtml.cs ~.cshtmlからGETやPOSTコマンドを送信されたときのプログラムをここに記述する。 コードブロック・コードナゲット ~.cshtmlにHTMLとともに記述できる。 〇コードブロック C#のプログラムを書く。 〇コードナゲット 変数、プロパティやメソッド実行結果を埋め込む。 明示的なRazor式 たとえば、変数cntの値をHTMLに埋め込みたいなら、コードナゲットでできる。   <p>@cnt</p> 出力結果は(変数cntが2の場合)  2 となる。 しかし、変数cntの値を+1した結果をHTMLに埋め込みたい場合、以下のように書くと   <p>@cnt+1</p> 出力結果は(変数cntが2の場合)  2+1 となる。 計算した結果のように  式を実行した結果  をHTMLに埋め込みたい場合は、 明示的なRazor式 を使う。   <p> @(cnt+1) </p> @( ) のカッコ内に式を書くと、その結果を埋め込むことができる。 意外と便利な3項演算子 3項演算子は以下のように書く。   条件式 ? 式1 : 式2 まず、条件式を評価。 結果が真なら式1を、偽なら式2を実行し、結果を変えす。 ちまたでは見づらいからやめたほうがいいとか言われている。 ifの代わりとして使わない(式1、式2が長くなりやすい) ネストさせない(式1または式2でさらに3項演算子) を守れば使ってもいいのではと思っている。 以下のようにテーブルの各行の背景色を交互に入れ替えたいときのよう...