ASP.NET MVCでのラジオボタンについて

Question

社員一人一人にアンケートを取る仕組みをASP.NET MVC 5（言語はC#），SQLServer2014で開発中です。
10問の設問につき、5段階（5:非常に満足、4:満足、3:普通～）で回答してもらいます。
この回答部分を単に5，或いは1のように数値をテキストボックスに入力するのではなく、ラジオボタンで選択させたいと考えます。

年度（smallint）・社員番号（int）・設問No（smallint）・設問文（nvarchar(max)）・回答（smallint）という列から成る設問回答テーブルに、
データを格納します。1社員につき10の設問ですので10レコード出来るイメージです。

Modelとしまして下記QAModelsを用意しました。

public class QAModels
{
    [DisplayName("年度")]
    public short Year { get; set; }
    
    [DisplayName("社員番号")]
    public int EmpId { get; set; }
    
    [DisplayName("設問No")]
    public short QNo { get; set; }
    
    [DisplayName("設問文")]
    public string QDesc { get; set; }

    [DisplayName("回答")]
    public short Ans { get; set; }
}

そして以下のようにViewを記述してみたのですが、肝心のラジオボタンが各行で選択出来ません。
（1行目で選択したとしても、2行目を選択すると消えてしまう）

        <table class="table table-bordered">
            <tr><th>No</th><th>設問</th><th>回答</th></tr>
                foreach (var item in Model)
                {
                    <tr>
                        <td>@item.QNo</td>
                        <td>@item.QDesc</td>
                        <td>
                            <label>
                                @Html.RadioButtonFor(
                                    m => item.Ans,
                                    1,
                                    new { @id = "QA" + @item.QNo }
                                )
                                1
                            </label>
                            <label>
                                @Html.RadioButtonFor(
                                    m => item.Ans,
                                    2,
                                    new { @id = "QA" + @item.QNo }
                                )
                                2
                            </label>
                            <label>
                                @Html.RadioButtonFor(
                                    m => item.Ans,
                                    3,
                                    new { @id = "QA" + @item.QNo }
                                )
                                3
                            </label>
                            <label>
                                @Html.RadioButtonFor(
                                    m => item.Ans,
                                    4,
                                    new { @id = "QA" + @item.QNo }
                                )
                                4
                            </label>
                            <label>
                                @Html.RadioButtonFor(
                                    m => item.Ans,
                                    5,
                                    new { @id = "QA" + @item.QNo }
                                )
                                5
                            </label>
                        </td>
                    </tr>
                }
        </table>

各行でラジオボタンにて回答させるには、どのようにすれば良いか、
ヒント・アドバイスの程何卒よろしくお願いいたします。

Comments

[退会済みユーザー]

MVC5 とのことですのでタグの ASP.NET MVC 4 は不適切です。ASP.NET, ASP.NET MVC Framework というタグがありますのでそちらを付けていただくようお願いします。

[masterofpuppets]

大変失礼いたしました。修正いたしましたので、何卒よろしくお願いいたします。

[退会済みユーザー]

> 1行目で選択したとしても、2行目を選択すると消えてしまう　← そこは RadioButtonFor が input type="radio" という html 要素にレンダリングされる際の name 属性の設定で解決できますが、それだけではダメで、ボタンクリックなどで結果をサーバー側で取得できる必要もあるのですよね？

[退会済みユーザー]

もう一つ、「10問の設問」ということは 10 個の QAModels コレクションがアクションメソッドでモデルバインドされるようにする必要があると思いますが、そこのところはどう考えていますか？　その必要があるということですともう一工夫必要ですが？　参考： http://surferonwww.info/BlogEngine/post/2014/09/01/validation-of-collection-data-during-model-binding-using-data-annotation.aspx

Answer 1

生成されたHTMLを確認すればわかると思いますが、name属性が全て「item.Ans」だからです。
行毎にname属性を変える必要があります。
あとついでにid属性が行毎に同じですが、ページ内で一意である必要があります。

htmlAttributesのパラメータを下記のようにしたらできると思います。

new { @Name = $"QA{item.QNo}", @id = $"QA{item.QNo}_[選択肢のvalue]"}

補足で

@for (int i = 1; i <= 5; i++)
{
    <label>
        @Html.RadioButtonFor(
            m => item.Ans,
            i,
            new { @Name = $"QA{item.QNo}", @id = $"QA{item.QNo}_{i}"}
        )
        @i
    </label>
}

としたら記述量が減ります。

Comments

[masterofpuppets]

workaholist様
早速のご回答、誠にありがとうございました。
ご教示いただいた内容で、解決することが出来ました。
御礼申し上げます。

[退会済みユーザー]

ユーザーの入力結果を POST して、アクションメソッドで結果を取得するところまで解決できたのですか？

[masterofpuppets]

SurferOnWww様

お世話になります。
いえ、実はまだその部分は未着手でございます。
ご指摘のように10個分のQAモデルが必要になるとなると…そもそもの設計が破綻しておりますでしょうか・・・
お恥ずかしい限りです。

[退会済みユーザー]

上の質問に対する私の 2018/10/11 12:41 コメントを見て下さい。10 個の QAModels のコレクションのモデルバインディングがうまく行われるようにするには、レンダリングされる html 要素の name 属性が連番のインデックスを含むようにする必要があります。そこまで考えないとこの先で破綻するのではないかと思います。

[workaholist]

POST値を取得するだけならアクションメソッドの引数をモデルではなくFormCollectionにしたり、Request.Formから取得できます。
キレイにやりたいのであればモデルを列挙で持つのではなく、モデル１つのなかにAns1、Ans2...みたいな感じでプロパティを持てば良いと思います。

[退会済みユーザー]

質問者さん＞
私のコメントの話が分からなければ、新たに別のスレッドを立てて質問してください。

[退会済みユーザー]

workaholist さん＞

質問者さんの要件を満たすためには、10 個の QAModels のコレクションのモデルバインディングができる必要がある、即ち public ActionResult ActionMethod(List<QAModels> model) の引数で取得できる必要があると思います。

「FormCollectionにしたり、Request.Formから取得」とか「モデル１つのなかにAns1、Ans2...みたいな感じ」では、不可能ではないかもしれませんが、かなり無理があると思います。少なくともスマートなやり方ではありません。

[workaholist]

SurferOnWwwさん

質問者さんの要件は「ラジオボタンを各行で選択できるようにする」なのでそれ以上のことは考えていません。
それ以上の要件（設問数は可変or固定、アノテーション検証有無、データ取得・登録方法など）は不明なので、疑問になればまた質問が出ると考えています。
ある程度、要件を予測されるのであれば、前提条件を記述した上でこういう風に実装したら良いと回答されたら良いと思われます。

[退会済みユーザー]

> 質問者さんの要件は「ラジオボタンを各行で選択できるようにする」なのでそれ以上のことは考えていません。

いえ、それは違うと思いますよ。最終的に何をしたいのかを考えて回答しないと、場合によっては、迷走するばかりで解決から遠ざかるばかりと思ってます。私のコメントを「要件を予測」とのことですが、そんなことはなくて「1社員につき10の設問ですので10レコード出来る」という要件は質問に書いてあります。

> こういう風に実装したら良いと回答されたら良いと思われます。

上に書きましたが、質問者さんが新たに別のスレッドを立てて質問したら対応します。

[workaholist]

「1社員につき10の設問ですので10レコード出来る」のであれば「モデル１つのなかにAns1、Ans2...みたいな感じ」でできませんか？
QNo1, Ans1, QNo2, Ans2 ... QNo10, Ans10 というプロパティ持つモデルを１つ作れば public ActionResult ActionMethod(QAModels model) とできると思いますが。

[退会済みユーザー]

もっとスマートにできる方法があります。そのあたりは質問者さんが新たに別のスレッドを立てて質問したら書きます。ここで書いても誰も見てなさそうで、書く気力が出てきませんので。スミマセン

[workaholist]

それならなぜわざわざ私の回答にコメントを付けたのですか？
ベストアンサーって付けてるけどベストじゃないよ！そのベストを知ってるけど言わないけどね。と言いたかっただけですか？

[masterofpuppets]

SurferOnWww様
workaholist様

お世話になっております。
本件では私の至らないせいでご迷惑をお掛けし申し訳ございません。
おっしゃる通り、POSTで返す部分で迷走しております。
明日改めて別の質問として上げさせていただきます。
何卒よろしくお願いいたします。

[退会済みユーザー]

＞ それならなぜわざわざ私の回答にコメントを付けたのですか？

はっきり言わせてもらえれば、その場しのぎの回答というだけで、真の解決にはなってないからです。ここは質問者さん専用の Q&A スレッドではなく、情報共有の場と思ってます。一般閲覧者が見たとき、私が関わったスレッドで一般閲覧者がミスリードされる可能性のあることには黙ってられません。

[workaholist]

この回答欄で真の解決をしたいということですので、この回答欄で真の解決をよろしくお願いします。
「別のスレッドで or 気力がわかないなら」はこの回答欄で立派な意見を言われているので言い訳になりません。
以降、私はコメントしません。

[退会済みユーザー]

質問者さんが新しく別のスレッド ↓ を立てたのでそちらで回答します。
https://teratail.com/questions/151505