iT邦幫忙

0

MVC的View要怎麼長出陣列的資料呢?

正在嘗試自己練習MVC的View,目前遇到以下困難,目前我的Option希望這個陣列在用for迴圈長表格時,不知道該怎麼去實作(第一個tbody),
是否只能設計成部分檢視呢?

@{
    var rows = new[]{
        new{
            Title="Title1:",
            Description="Description1",
            Option=new[]{
                new {Item="Yes",Check="Y"},
                new {Item="No",Check="N"}
            }
        },
        new
        {
            Title = "Title2",
            Description = "Description2",
            Option = new[]{
                new {Item="Item1",Check ="NA"},
                new {Item="Item2",Check="NA"}
            }
        }
    };
}

<div>
    <table style='border:1px black solid;' border='1'>
        <thead>
            <tr height='20px'>
                <td colspan='2'></td>
            </tr>
        </thead>
        <!--第一個tbody是嘗試將資料跟外觀拆開,所以上面定一個資料,這邊則用for迴圈去長表格-->
        <tbody>
            @for (var i = 0; i < rows.Length; i++)
            {
                var row = rows[i];
                <tr>
                    <td colspan='2' class='report-content' style='font-weight:bold;'>
                        @(row.Title)
                    </td>
                </tr>
                <tr>
                    <td>
                        @(row.Description)
                    </td>
                    <!--如何在此加入row.Option.Item呢?-->
                    <td style='font-weight:bold;'>
                    </td>
                </tr>
            }
        </tbody>
        
        <!--第二個tbody是將資料跟外觀全部寫再一起-->
        <tbody>
        <tr>
            <td colspan='2' style='font-weight:bold;'>
                Title1
            </td>
        </tr>
        <tr>
            <td>
                Description1
            </td>
            <td style='font-weight:bold;'>
                <input type='checkbox' checked='checked' disabled='disabled'>Yes<br />
                <input type='checkbox' disabled='disabled'>No
            </td>
        </tr>

        <tr>
            <td colspan='2' style='font-weight:bold;'>
                Title2
            </td>
        </tr>
        <tr>
            <td style='font-weight:bold;'>
                    Description2
            </td>
            <td>
                Item1<br />
                Item2
            </td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr height='0'>
                <td width='50%' style='border:none'></td>
                <td width='50%' style='border:none'></td>
            </tr>
        </tfoot>
    </table>
</div>

預期表格長相
https://ithelp.ithome.com.tw/upload/images/20190715/20115336XaOowh07tZ.jpg

1 個回答

0
小魚
iT邦高手 1 級 ‧ 2019-07-15 17:05:31
最佳解答
@{
    var rows = new[]{
        new{
            Title="Title1:",
            Description="Description1",
            Option=new[]{
                new {Item="Yes",Check="Y"},
                new {Item="No",Check="N"}
            }
        },
        new
        {
            Title = "Title2",
            Description = "Description2",
            Option = new[]{
                new {Item="Item1",Check ="NA"},
                new {Item="Item2",Check="NA"}
            }
        }
    };
}

<div>
    <table style='border:1px black solid;' border='1'>
        <thead>
            <tr height='20px'>
                <td colspan='2'></td>
            </tr>
        </thead>
        <!--第一個tbody是嘗試將資料跟外觀拆開,所以上面定一個資料,這邊則用for迴圈去長表格-->
        <tbody>
            @for (var i = 0; i < rows.Length; i++)
            {
                var row = rows[i];
                <tr>
                    <td colspan='2' class='report-content' style='font-weight:bold;'>
                        @(row.Title)
                    </td>
                </tr>
                <tr>
                    <td>
                        @(row.Description)
                    </td>
                    <!--如何在此加入row.Option.Item呢?-->
                    <td style='font-weight:bold;'>
                        @foreach (var data in row.Option)
                        {
                            if (data.Check == "Y" || data.Check == "N")
                            {
                                <input type='checkbox' @Html.Raw(data.Check == "Y" ? "checked='checked'" : "") disabled='disabled'>@Html.Raw(data.Check == "Y" ? "Yes" : "No")<br />

                            }
                            else if (data.Check == "NA")
                            {
                                @Html.Raw($"{data.Item}<br>");
                            }
                        }
                    </td>
                </tr>
            }
        </tbody>

        <!--第二個tbody是將資料跟外觀全部寫再一起-->
        <tbody>
            <tr>
                <td colspan='2' style='font-weight:bold;'>
                    Title1
                </td>
            </tr>
            <tr>
                <td>
                    Description1
                </td>
                <td style='font-weight:bold;'>
                    <input type='checkbox' checked='checked' disabled='disabled'>Yes<br />
                    <input type='checkbox' disabled='disabled'>No
                </td>
            </tr>

            <tr>
                <td colspan='2' style='font-weight:bold;'>
                    Title2
                </td>
            </tr>
            <tr>
                <td style='font-weight:bold;'>
                    Description2
                </td>
                <td>
                    Item1<br />
                    Item2
                </td>
            </tr>
        </tbody>

        <tfoot>
            <tr height='0'>
                <td width='50%' style='border:none'></td>
                <td width='50%' style='border:none'></td>
            </tr>
        </tfoot>
    </table>
</div>

結果
https://ithelp.ithome.com.tw/upload/images/20190715/20105694ZwpKD1HPmW.png

anniecat iT邦新手 4 級 ‧ 2019-07-15 17:54:01 檢舉

有再瞭解 foreach 與 for 的差異,謝謝~

小魚 iT邦高手 1 級 ‧ 2019-07-15 18:07:33 檢舉

foreach是直接使用陣列底下的object,
通常如果for不需要判斷index的話,
用foreach替代其實是沒有差的,
看個人習慣,
兩種方式其實是很類似的,
而且現在幾乎主流的前後端語言都有支援foreach,
或是類似的功能只是名稱不同.

anniecat iT邦新手 4 級 ‧ 2019-07-16 09:41:14 檢舉

好的,再次感謝~

我要發表回答

立即登入回答