在 Razor 页面的 OnPost 方法上扫描 HTML 表

Question

早上好，我正在 .Net 3.1 和 Razor 页面中开发我的 Web 应用程序。在我的一个页面中，我有一个表格，其中包含不同列中的一些输入字段，用户可以根据自己的喜好进行修改。

<table id="myTbl" class="display nowrap table-sm table-striped table-hover table-bordered" >
<thead>
    <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
    </tr>
</thead>
<tbody>
    @foreach (var prop in Model.Props)
    {
    <tr>
        <td>@prop.Unitid</td>
        <td>
            <input type="checkbox" checked="@Model.Method1(prop.Unitid)" />
        </td>
        <td>
            <input type="checkbox" checked="@Model.Method2(prop.Unitid)" />
        </td>
        <td>
            <input type="text" placeholder="@Model.Method3(prop.Unitid)" />
        </td>
        <td>
            <input type="text" placeholder="@Model.Method4(prop.Unitid)" />
        </td>
        <td>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" id="@("checkBoxV" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "V")" />
                <label class="custom-control-label" for="@("checkBoxV" + prop.Unitid)">V</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" id="@("checkBoxW" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "W")" />
                <label class="custom-control-label" for="@("checkBoxW" + prop.Unitid)">W</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" id="@("checkBoxS" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "S")" />
                <label class="custom-control-label" for="@("checkBoxS" + prop.Unitid)">S</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" id="@("checkBoxP" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "P")" />
                <label class="custom-control-label" for="@("checkBoxP" + prop.Unitid)">P</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" id="@("checkBoxA" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "A")" />
                <label class="custom-control-label" for="@("checkBoxA" + prop.Unitid)">A</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" id="@("checkBoxM" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "M")" />
                <label class="custom-control-label" for="@("checkBoxM" + prop.Unitid)">M</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" id="@("checkBoxU" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "U")" />
                <label class="custom-control-label" for="@("checkBoxU" + prop.Unitid)">U</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" id="@("checkBoxD" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "D")" />
                <label class="custom-control-label" for="@("checkBoxD" + prop.Unitid)">D</label>
            </div>
        </td>
    </tr>
    }

</tbody>

在我的页面中，我还有一个按钮，我想用它扫描表的所有行并将所述行的值传递给一个方法，如果该特定行满足某些条件，它会更新DB 使用 EF Core 与来自所述行的字段的数据。

实现我的目标的最佳做法是什么？我可以将整个表关联到模型属性并扫描模型中的行吗？

谢谢！

Answer 1

实现我的目标的最佳做法是什么？我可以将整个表关联到模型属性并扫描模型中的行吗？

要实现上述要求，您可以让您的处理方法OnPost 接受一个参数，并为您的输入字段指定name 属性以匹配自定义模型类的属性，这将有助于将值绑定到模型自动生成。

自定义模型类

public class MyCustomModel
{
    public int Unitid { get; set; }
    public bool Col2Checked { get; set; }
    public bool Col3Checked { get; set; }
    public string Col4Val { get; set; }
    public string Col5Val { get; set; }

    public Col6Childs Col6Val { get; set; }
}

public class Col6Childs
{
    public bool IsV { get; set; }
    public bool IsW { get; set; }
    public bool IsS { get; set; }
    public bool IsP { get; set; }
    public bool IsA { get; set; }
    public bool IsM { get; set; }
    public bool IsU { get; set; }
    public bool IsD { get; set; }
}

处理方法

public IActionResult OnPost(List<MyCustomModel> myCustomModel)
{
    //code logic here
    //...

在页面中

<form method="post">
    <table id="myTbl" class="display nowrap table-sm table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
                <th>Col5</th>
                <th>Col6</th>
            </tr>
        </thead>
        <tbody>

            @foreach (var prop in Model.Props)
            {


                <tr>
                    <td>
                        @prop.Unitid
                        <input type="hidden" name="myCustomModel[@index].Unitid" value="@prop.Unitid">
                    </td>
                    <td>
                        <input type="checkbox" checked="@Model.Method1(prop.Unitid)" name="myCustomModel[@index].Col2Checked" />
                    </td>
                    <td>
                        <input type="checkbox" checked="@Model.Method2(prop.Unitid)" name="myCustomModel[@index].Col3Checked" />
                    </td>
                    <td>
                        <input type="text" placeholder="@Model.Method3(prop.Unitid)" name="myCustomModel[@index].Col4Val" />
                    </td>
                    <td>
                        <input type="text" placeholder="@Model.Method4(prop.Unitid)" name="myCustomModel[@index].Col5Val" />
                    </td>
                    <td>
                        <div class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" id="@("checkBoxV" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "V")" name="myCustomModel[@index].Col6Val.IsV" value="true" />
                            <input type="hidden" name="myCustomModel[@index].Col6Val.IsV" value="false" />
                            <label class="custom-control-label" for="@("checkBoxV" + prop.Unitid)">V</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" id="@("checkBoxW" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "W")" name="myCustomModel[@index].Col6Val.IsW" value="true" />
                            <input type="hidden" name="myCustomModel[@index].Col6Val.IsW" value="false" />
                            <label class="custom-control-label" for="@("checkBoxW" + prop.Unitid)">W</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" id="@("checkBoxS" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "S")" name="myCustomModel[@index].Col6Val.IsS" value="true" />
                            <input type="hidden" name="myCustomModel[@index].Col6Val.IsS" value="false" />
                            <label class="custom-control-label" for="@("checkBoxS" + prop.Unitid)">S</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" id="@("checkBoxP" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "P")" name="myCustomModel[@index].Col6Val.IsP" value="true" />
                            <input type="hidden" name="myCustomModel[@index].Col6Val.IsP" value="false" />
                            <label class="custom-control-label" for="@("checkBoxP" + prop.Unitid)">P</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" id="@("checkBoxA" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "A")" name="myCustomModel[@index].Col6Val.IsA" value="true" />
                            <input type="hidden" name="myCustomModel[@index].Col6Val.IsA" value="false" />
                            <label class="custom-control-label" for="@("checkBoxA" + prop.Unitid)">A</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" id="@("checkBoxM" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "M")" name="myCustomModel[@index].Col6Val.IsM" value="true" />
                            <input type="hidden" name="myCustomModel[@index].Col6Val.IsM" value="false" />
                            <label class="custom-control-label" for="@("checkBoxM" + prop.Unitid)">M</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" id="@("checkBoxU" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "U")" name="myCustomModel[@index].Col6Val.IsU" value="true" />
                            <input type="hidden" name="myCustomModel[@index].Col6Val.IsU" value="false" />
                            <label class="custom-control-label" for="@("checkBoxU" + prop.Unitid)">U</label>
                        </div>
                        <div class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" id="@("checkBoxD" + prop.Unitid)" class="custom-control-input" checked="@Model.Method5(prop.Unitid, "D")" name="myCustomModel[@index].Col6Val.IsD" value="true" />
                            <input type="hidden" name="myCustomModel[@index].Col6Val.IsD" value="false" />
                            <label class="custom-control-label" for="@("checkBoxD" + prop.Unitid)">D</label>
                        </div>
                    </td>
                </tr>

               index++;     
            }
        </tbody>
    </table>
    <input type="submit" value="Submit" />
</form>

测试结果