0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ASP Net Core Razor Pagesで複数レコードのデータバインド(一括更新したい)

Posted at

ASP.Net CoreのRagor PagesでWindows FormのDataGridViewのように、データを一覧表示した状態で、更新処理をかけられないかなと思いまして、いろいろ調べてみたのですが、なかなかそれらしい記事に出会えず...ChatGPTの力を借りたりしながら、やっと分かりましたので共有です!

データの更新については触れていませんが、PageModelクラスに変更(入力)情報はListで伝搬しています。ステップ実行で止めると、Itemsプロパティが更新されます。
このあたり、MSのチュートリアルに載せて広めてほしい感じもするのですが...世間的にあまり需要ないのでしょうか。。

@page
@model SampleTableInput.Pages.TableInputModel
@{
}
<form class="form" method="post">

    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>名前</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.Items.Count; i++)
            {
                <tr>
                    <td >
                        <input type="text" class="form-control my-0 py-0" asp-for="Items[i].Id">
                    </td>
                    <td >
                        <input type="text" class="form-control my-0 py-0" asp-for="Items[i].Name">
                    </td>
                </tr>
            }
        </tbody>
    </table>
    
    <br>

    <input type="submit" value="送信" class="btn btn-secondary" asp-page-handler="Post" />
</form>
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SampleTableInput.Pages
{
    public class TableInputModel : PageModel
    {
        [BindProperty]
        public List<Item> Items { get; set; } = default!;

        public void OnGet()
        {
            // 初期データを設定
            Items =
            [
                new Item { Id = 1, Name = "Item1" },
                new Item { Id = 2, Name = "Item2" },
                new Item { Id = 3, Name = "Item3" }
            ];
            Console.WriteLine("OnGet Count = " + Items.Count);
        }

        public void OnPost()
        {

            Console.WriteLine("OnPost Count = " + Items.Count);
        }
    }

    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";
    }
}

参考記事
https://kobarin.hateblo.jp/entry/2017/07/04/172018

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?