ASP.NET 関連テーブルのレコードを新規追加する

Question

EntityFrameworkを使いナビゲーションプロパティを付与することで、モデルに１：Nの関係を作ることができます。
親テーブルを更新するだけで、子テーブルの更新も可能になり便利ですが「削除」「追加」がわかりません。
※子テーブルは複数ある前提です。

<input type="text" asp-for="@Model.Course[0].Price"> <input type="text" asp-for="@Model.Course[1].Price"> <input type="text" asp-for="@Model.Course[2].Price">

ここにJavaScriptで４つ目を追加します。

<input type="text" asp-for="@Model.Course[3].Price">

と書くと当然エラーになります。
どのように記述すれば追加が可能なのでしょうか？

=詳細＝＝＝

■データベースについて
コースという親テーブルと、カリキュラムという子テーブルがあったとします。
・コース
コースID
コース名

・カリキュラム
カリキュラムID
コースID
カリキュラム名

■モデルについて
コースとカリキュラムはナビゲーションプロパティを記述することで、コースIDを外部キーとして関連をもたせています。

・コースモデル
public virtual List<Curriculum> Curriculums { get; set; }

・カリキュラム
public virtual Course Course { get; set; }

■コントローラーについて
ある特定のコースとそれに紐付いているカリキュラム一覧画面のActionResultを以下のように作成しています。
public IActionResult Index(int? id)
{
Course course = _context.Course.
Include(c => c.Curriculums .
AsNoTracking().
Where(item => item.CourseID == id).FirstOrDefault();
return View(course);
}

上記の記述でcourseには、紐付いている複数のカリキュラムが取得できています。

■ビューについて

<Div> <h1>コース詳細</h1> <label>@Html.LabelFor(model => model.CourseID)</label> @Html.TextBoxFor(model => model.CourseID) <span asp-validation-for="CourseID" class="text-danger"></span> </Div> <h1>カリキュラム一覧</h1> @for (int idx = 0; idx < Model.Curriculums.Count; idx++){ <label class="col-1 col-form-label text-right">郵便番号</label> <input type="text" asp-for="@Model.Curriculums[idx].CurriculumsName"> <span asp-validation-for="Curriculums[idx].CurriculumName" class="text-danger"></span> }

ここまでは理解できており正常な表示が確認できています。

この下に「追加」ボタンを配置し、クリックするとカリキュラムを１つ追加させたいのです。
既存のカリキュラムの更新と同じく、入力検証も行いたいのです。

Javascriptによってクライアントサイドで動的に入力欄を追加する方法を検討しておりました。

難しいようなので、（たとえば）１０件などあらかじめ非表示でHTMLだけ記述しておき、追加ボタンでそのうち１件を表示に切り替えることで、擬似的な追加を実現しようと思っていますが、それくらいしかなさそうでしょうか。

よろしくお願いいたします。

Comments

[退会済みユーザー]

スキャフォールディングで CRUD 機能を実装すると、List, Create,Edit, Delete というアクションメソッドとビユーがそれぞれ個別に生成されるはずですが、それにならって作ってはいかがですか？

レコードを追加する場合、List 画面 (レコードの一覧画面) から Create 画面に遷移して、そこで一レコード追加するということです。

Answer 1

結局は技術的に難しいため、いったんPOSTする方式にしました。

Answer 2

ここにJavaScriptで４つ目を追加します。
<input type="text" asp-for="@Model.Course[3].Price">

それは View のコード（即ちサーバー側のコード）で ASP.NET が html に変換してブラウザに送信するものとは異なるはずです。ブラウザで html ソースを開いて確認してください。

そうであれば、そのコード（View のコード）をブラウザ側で JavaScript で追加しても意味がないです。

そもそも、たとえ正しい html のコードであっても、ブラウザ側で JavaScript で追加して期待通りに動くのかは疑問ですが。試しに、ブラウザで html ソースを見てそれに倣ったコードを追加してみたらどうなりますか？

上記では解決できない気がしますが、質問には具体的な情報（子テーブルとは何なのか、親があるならそれとの関係、Model は何なのか、何を「削除」「追加」したいのかなど）が何も書かれてないので、今は上記以上のことは言えません。

Comments

[firstbiz]

さっそくのご回答ありがとうございます。
おっしゃるとおりHTMLソースでは、asp-forが別のHTMLコードに変換されていました。
JavaScriptで追加するには、このHTMLコードを参考に自作のHTMLコードを記述するしかないのでしょうか？
そもそもASP.NETでは、こういった配列要素の動的追加には対応していないのでしょうか？

[退会済みユーザー]

上に書いたようにして試してみてはいかがですか。ダメそうな気はしますけど、ものは試しということで。

それでダメなときどうしたらいいかは、上に書いたように、あまりに情報不足で、アドバイスできないです。

[firstbiz]

■データベースについて
コースという親テーブルと、カリキュラムという子テーブルがあったとします。
・コース
　コースID
　コース名

・カリキュラム
　カリキュラムID
　コースID
　カリキュラム名

■モデルについて
コースとカリキュラムはナビゲーションプロパティを記述することで、コースIDを外部キーとして関連をもたせています。

・コースモデル
public virtual List<Curriculum> Curriculums { get; set; }

・カリキュラム
public virtual Course Course { get; set; }

■コントローラーについて
ある特定のコースとそれに紐付いているカリキュラム一覧画面のActionResultを以下のように作成しています。
public IActionResult Index(int? id)
{
Course course = _context.Course.
Include(c => c.Curriculums .
AsNoTracking().
Where(item => item.CourseID == id).FirstOrDefault();
return View(course);
}

上記の記述でcourseには、紐付いている複数のカリキュラムが取得できています。

■ビューについて
<Div>
<h1>コース詳細</h1>
<label>@Html.LabelFor(model => model.CourseID)</label>
@Html.TextBoxFor(model => model.CourseID)
<span asp-validation-for="CourseID" class="text-danger"></span>
</Div>

<h1>カリキュラム一覧</h1>
@for (int idx = 0; idx < Model.Curriculums.Count; idx++){
<label class="col-1 col-form-label text-right">郵便番号</label>
<input type="text" asp-for="@Model.Curriculums[idx].CurriculumsName">
<span asp-validation-for="Curriculums[idx].CurriculumName" class="text-danger"></span>
}

ここまでは理解できており正常な表示が確認できています。

この下に「追加」ボタンを配置し、クリックするとカリキュラムを１つ追加させたいのです。
既存のカリキュラムの更新と同じく、入力検証も行いたいのです。

Javascriptによってクライアントサイドで動的に入力欄を追加する方法を検討しておりました。

難しいようなので、（たとえば）１０件などあらかじめ非表示でHTMLだけ記述しておき、追加ボタンでそのうち１件を表示に切り替えることで、擬似的な追加を実現しようと思っていますが、それくらいしかなさそうでしょうか。

よろしくお願いいたします。

[退会済みユーザー]

追加情報は質問欄を編集して追記するようお願いします。ここに書いても自分以外は見ない人が多いと思いますので。質問欄に追記すれば見てくれる人も増えるでしょうから、回答を得られるチャンスも増えることが期待できると思います。

[退会済みユーザー]

> 「削除」「追加」がわかりません。

と書いてありましたが、削除や新規追加ではなくて、既存のデータの編集・更新の操作の際ついでに子のレコードを追加したいということで、その際、新規レコードを入力するためのテキストボックスをボタンクリックで追加表示したいという話なのですか？

そうだとすると、ここでの Q&A で質問者さんに十分なサポートを提供するのは自分には無理そうです。お役に立てずすみませんが、他の方の回答をお待ちください。（不可能ではないにしても、無理、少なくとも現実的ではないと思うので）