・tdを@onclickでクリックするとプルダウンに変化し、プルダウンの内容を選択するとtdに文字列が残って欲しい

Question

実現したいこと

下図のようなテーブルを作っております。将来的にはデータグリッドとするつもりです。
thのクリックでそれぞれの列に合わせたソートが可能です（実現済み）

今回実現したいこととしては、
・ランクとある列のtdをA～Eの文字列で編集可能としたく思います。
・tdを@onclickでクリックするとプルダウンに変化し、プルダウンの内容を選択するとtdに文字列のみが残って欲しい。
また、行ごとに編集が行えるようにしたい。

前提

Windows 11 の Visual Studio 2022 で Blazor WASMアプリをターゲットフレームワーク .NET 7.0 で作っています。

tdタグをクリックする機能を実装中に以下のエラーメッセージが発生し、ビルドが出来ません。

発生している問題・エラーメッセージ

以下のようなエラーが出ております。
エラーメッセージ
CS0501	'DataGridHand02.changeEdit()' は abstract、extern、または partial に指定されていないため、本体を宣言する必要があります
ワーニング
CS8974	メソッド グループ 'changeEdit' を非デリゲート型 'object' に変換中です。このメソッドを呼び出すつもりでしたか?

該当のソースコード

<td class="editableTD" @onclick="changeEdit">
                        @((MarkupString)messageText)
                        @changeEdit{
                        @messageText
                        <EditForm Model="Lank" onchange="onselect">
                            <InputSelect id="Lank"
                                         @bind-Value="Lank"
                                         class="form-control">
                                @foreach (var it in Lanks)
                                {
                                    <options>@it</options>
                                }
                            </InputSelect>
                        </EditForm>
                        }
                    </td>

@code {
    [Parameter]
    public string Lank { get; set; }
    public string messageText = "ー";
    public void changeEdit();
    private string[] Lanks = new string[]
                    {
                        "A",
                        "B",
                        "C",
                        "D",
                        "E",
                        };
}

補足、一応動いてはいるコード

<td class="editableTD" @onclick="changeEdit">@((MarkupString)messageText)</td>

@code {
    public string messageText = "ー";
    private void changeEdit()
    {

        messageText =
        "<select name='select106' onchange='change(this)'><option>選択</option><option value='1番目'>A</option><option value='2番目'>B</option><option value='3番目'>C</option><option value='4番目'>D</option><option value='5番目'>E</option></select>";
    }
}

一応やりたいことの途中までは動いている様子です。

試したこと

ネット上のコードからお借りしてきたものなので、そもそもよく分かっていないのが問題だと思います。
その後もネット上のコードから書き換えを試しているのですが、ビルドが通りません。
また、Visual Studioのサジェスチョン機能でコードを改変してみても同様でした。
一応動いているコードはあるのですが、プログラムと呼ぶにもお恥ずかしい内容で、メンテナンス性も最悪だと思います。
また、これでは該当コードを張り付けたtdが全て同時に編集状態になるのも問題です。

補足情報（FW/ツールのバージョンなど）

開発環境：Visual Studio2022 .NET7.0
動作確認環境：Windows11, edge

Comments

[退会済みユーザー]

そもそも何がしたいのですか？　XY 問題のような気がしますけど。

XY 問題とは、X という課題があって、Y という解決策を考えついて Y について質問したが（質問には X は書かないで）、Y は X の解決策とはなっておらず、回答者と質問者間で話がかみ合わず、一向に解決にならないということです。

X も書いてください。「tdを@onclickでクリックするとプルダウンに変化し、プルダウンの内容を選択するとtdに文字列」は Y で、すなわち X をやるための手段に過ぎないと思いますが、では、その X とは何か。

[macaca]

なるほど、お恥ずかしい次第です。失礼いたしました。図などを入れて、大幅に書き換えました。

[退会済みユーザー]

データソースは SQL Server とか CSV ファイルなどで、初期画面ではその一覧を表形式で表示して、ユーザーがそれを見て編集し、編集結果をデータソースに書き戻すということを考えていて、プルダウンはユーザー入力の便宜を図るために使うという話ですか？

そういう目的だとすると Blazor では難しい（というより現実的ではない）と思います。

ASP.NET Web Forms アプリであれば GridView などのサーバーコンロトールを利用して比較的容易に実装できますが（具体例下記）、MVC とか Razor Page では無理です。

DropDownList での NULL の処置
http://surferonwww.info/BlogEngine/post/2015/10/23/dropdpwnlist-handling-null-in-database.aspx

MVC とか Razor Page は、スキャフォールディング機能を利用して DB の CRUD を行うコードを自動生成することができますが、それでも一覧表示画面と編集画面は全く異なるものになります。

Blazor はそれ以上に無理だと思います。

[macaca]

何度もお世話になり恐縮です。
概ねご慧眼の通りとなります。

ただ、私の方ではblazorを使用しないという決定権を持っていないのが現状です。
サーバ／クライアント共にblazorで行くというのは決まっていて、私はあくまでクライアントサイドのデザインを任されているに過ぎません。
ですので、クライアントサイドで表層的に動くモックが出来れば、ひとまず私のミッションとしては完了となります。

それに付随してc#とblazorも覚えれば尚良いですよ、という段階です。
初心者丸出しなので既にご判断しておられるとは思いますが。
上には折を見て話そうと思います。

度々のご回答、誠にありがとうございます。

[退会済みユーザー]

Blazor WASM はサーバー側は Web API、クライアント側は結局ブラウザなので、基本 Web アプリと同様にステートレスで、普通にやったらステートレスという条件でできることしかできないという話になると思います。そこを何とかするというのはかなり大変だと思います。自分は頑張ってくださいとしか言えません。

[macaca]

かしこまりました。ありがとうございます。
貴重なお時間を使っていただき感謝しております。