ASP.NET MVC5 ボタンクリックで複数のEditboxに文字列を挿入する

こんにちわ！
https://teratail.com/questions/165936の発展形になるかと思いますが、前回HtmlヘルパーのIdForを利用し、ボタンクリックでそのボタンと同じテーブルにあるエディタに文字列を挿入しました。
今回は画面上部の一括入力ボタンを押して、平日のみ定時の開始、終了、休憩時間を挿入するようにしたいです。
しかし前回と異なるのが、１つのボタンに対し、平日判定された可変複数のEditboxに値を挿入する必要があり、どうしたらいいか悩んでいます。
ちなみに平日判定はビューの日付表示のところで行っています。是非何かアドバイスをお願いします。

ビュー：

@model Kintai_CS_.Models.KintaiModel

@{
    /**/

    ViewBag.Title = "勤務表";
    Layout = "~/Views/Shared/_Layout.cshtml";


    Dictionary<int, SelectList> dictionary = (Dictionary<int, SelectList>)ViewBag.Situation;
}
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <header id="header" class="header">
        ・・・
        <div>
            <button type="button" class="btn btn-primary" style="margin-right:5px;width:120px">ユーザ管理</button>
            <button type="button" class="btn btn-primary" style="margin-right:5px;width:100px">履歴表示</button>
            @{
                if (Model.MonthlyData.flag == "入力中")
                {
                    <button type="button" class="btn btn-primary" style="margin-right:5px;width:100px">一括入力</button>
                    <button type="submit" name="lastMonth" class="btn btn-primary" style="margin-right:5px;width:80px">前月</button>
                    <button type="submit" name="nextMonth" class="btn btn-primary" style="margin-right:5px;width:80px">翌月</button>
                    <button type="submit" name="update" class="btn btn-primary" style="margin-right:5px;width:80px">更新</button>
                    <button type="button" class="btn btn-primary" style="width:100px">承認依頼</button>
                }
                else
                {
                   ・・・
                }
            }

        </div>
    </header>
    <body id="body" class="body">
        ・・・
        <table class="table">
            <tr>
                <th>
                    <nobr>日付</nobr>
                </th>
                <th>
                    <nobr>曜日</nobr>
                </th>
                <th style="text-align:center">
                    <nobr>始業時刻</nobr>
                </th>
                <th style="text-align:center">
                    <nobr>終業時刻</nobr>
                </th>
                <th style="text-align:center">
                    <nobr>休憩時間</nobr>
                </th>
                <th>
                    <nobr>所定時間</nobr>
                </th>
                <th>
                    <nobr>残業時間</nobr>
                </th>
                <th style="text-align:center">
                    <nobr>勤怠状況</nobr>
                </th>
                <th style="text-align:center">
                    <nobr>補助</nobr>
                </th>
                <th style="text-align:center">
                    <nobr>備考</nobr>
                </th>
            </tr>

            @for (int idx = 0; idx < Model.Kintais.Count; idx++)
            {
                <tr>
                    @*土は青、日祝は赤にする*@
                    @{
                        string week = Model.Kintais[idx].Date.ToString("ddd");
                        bool PublicHoliday = false;
                        for (int i = 0; i < Model.Public_holidays.Count(); i++)
                        {
                            if (Model.Kintais[idx].Date == Model.Public_holidays[i].Date)
                            {
                                <td class="red">@(idx + 1)</td>
                                <td class="red">@week</td>
                                PublicHoliday = true;
                            }
                        }
                        if (PublicHoliday == false)
                        {
                            if (week == "土")
                            {
                                <td class="blue">@(idx + 1)</td>
                                <td class="blue">@week</td>
                            }
                            else if (week == "日")
                            {
                                <td class="red">@(idx + 1)</td>
                                <td class="red">@week</td>
                            }
                            else
                            {
                                <td class="black">@(idx + 1)</td>
                                <td class="black">@week</td>
                            }
                        }
                    }
                    @{
                        //状態フラグが"入力中"の場合、エディタの編集を許可する
                        if (Model.MonthlyData.flag == "入力中")
                        {
                            <td>
                                @Html.EditorFor(model => model.Kintais[idx].Open, new { htmlAttributes = new { @class = "form-control", style = "text-align:center" } })
                                @Html.ValidationMessageFor(model => model.Kintais[idx].Open, "", new { @class = "text-danger" })
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Kintais[idx].Close, new { htmlAttributes = new { @class = "form-control", style = "text-align:center" } })
                                @Html.ValidationMessageFor(model => model.Kintais[idx].Close, "", new { @class = "text-danger" })
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Kintais[idx].Rest, new { htmlAttributes = new { @class = "form-control", style = "text-align:center" } })
                                @Html.ValidationMessageFor(model => model.Kintais[idx].Rest, "", new { @class = "text-danger" })
                            </td>
                            <td style="vertical-align:middle;text-align:center">
                                @Html.DisplayFor(model => model.Kintais[idx].Worktime)
                                @Html.HiddenFor(model => model.Kintais[idx].Worktime)
                            </td>
                            <td style="vertical-align:middle;text-align:center">
                                @Html.DisplayFor(model => model.Kintais[idx].Overtime)
                                @Html.HiddenFor(model => model.Kintais[idx].Overtime)
                            </td>
                            <td style="vertical-align:middle">
                                @Html.DropDownListFor(model => model.Kintais[idx].Situation, dictionary[Model.Kintais[idx].Situation], new { @class = "form-control", style = "width:130px;padding:5px" })
                            </td>
                            <td style="width: 66px">
                                <nobr>
                                    <button type="button"
                                            onclick="setRegularWorkTime('@Html.IdFor(model => model.Kintais[idx].Open)', '@Html.IdFor(model => model.Kintais[idx].Close)', '@Html.IdFor(model => model.Kintais[idx].Rest)')"
                                            class="btn btn-primary">
                                        定時
                                    </button>
                                </nobr>
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Kintais[idx].Remark, new { htmlAttributes = new { @class = "form-control", style = "width:190px" } })
                                @Html.ValidationMessageFor(model => model.Kintais[idx].Remark, "", new { @class = "text-danger" })
                            </td>
                        }
                        //状態フラグが"入力中"以外の場合、エディタの編集を許可しない
                        else
                        {
                            ・・・
                        }
                    }
                    ・・・
                </tr>
            }
            ・・・
        </table>
    </body>


}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        //<![CDATA[
        function setRegularWorkTime(from, to, rest) {
            document.getElementById(from).value = "@Model.PersonalInfo.ordinary_open";
            document.getElementById(to).value = "@Model.PersonalInfo.ordinary_close";
            document.getElementById(rest).value = "@Model.Rest_time";
        }
        function setRegularMeetingTime(from, to) {
            document.getElementById(from).value = "18:30";
            document.getElementById(to).value = "20:30";
        }    //]]>
    </script>
}

行動規範の内容に同意します

回答1件

ベストアンサー

平日の曜日は必ず <td class="black">@week</td> となるようですので、各行の 2 つ目の td 要素で class="black" という要素を手掛かりに、そこからその行の兄弟 td 要素の中の <input type="text" ... /> 要素を id 属性名（Open, Close, Rest という文字が含まれるはず）を頼りに探して、その value 属性に設定する・・・ということになるかと思います。

それには jQuery を使ってセレクタやメソッドを利用するのが良いと思います。jQuery を勉強することをお勧めします。

投稿2018/12/26 07:41

退会済みユーザー

総合スコア0

blackdifferent

2018/12/26 08:38

ご回答いただきありがとうございます。 jQueryは何度か目にしましたが、一度も使ったことがないので勉強してみたいと思います。

blackdifferent

2018/12/27 02:26 編集

こちらのコードでテーブル一列目のエディタに数値が入ることは確認出来ましたが、平日のclass="black"をどのように手掛かりにすれば良いか分かりません。何かアドバイスを頂けると嬉しいです。 $(function() { $('#test').click(function (e) { $('#Kintais_0__Open').val("@Model.PersonalInfo.ordinary_open"); $('#Kintais_0__Close').val("@Model.PersonalInfo.ordinary_close"); $('#Kintais_0__Rest').val("@Model.Rest_time"); }); });

退会済みユーザー

2018/12/27 03:41

jQuery のセレクタは、それで指定される全ての jQuery オブジェクトのコレクションを取得できるので、セレクタを適切に設定することを考えて下さい。今回のケースでは、対象となる始業時間のテキストボックスは「black というクラスを持つ要素の (.black)、兄弟の (~)、td 要素の (td)、子の (>)、 input 要素で id 属性が Open で終わる (input[id=$Open])」となるはずです。そして、上の「・・・」内の条件のセレクタで取得した jQuery オブジェクトのコレクションに val メソッドを適用し、その引数に "@Model.PersonalInfo.ordinary_open" を設定するということになるはずです。例えば、以下のような感じです。 $('.black ~ td > input[id$=Open]').val("@Model.PersonalInfo.ordinary_open"); あくまで「感じ」です。上記をそのまま使ってできるかどうかは試してない（生成される html コードが書いてないので試せない）ので不明ですが、こんな感じでできるはずです。「jQuery」「セレクタ」をキーワードにしてググれば参考になる記事が多々ヒットするので、もしうまく行かない場合は、それらの記事を読んで勉強してセレクタを考えてください。

blackdifferent

2018/12/27 04:03

上記のコードで実装できました。ありがとうございました。

行動規範の内容に同意します