在 razor 页面的 OnPost 方法上扫描 HTML table

Question

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

<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>

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

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

谢谢！

Answer 1

What is the best practice to obtain my goal? Can I associate the entire table to a model property and scan through the rows in my model?

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

自定义模型class

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>

测试结果

在 razor 页面的 OnPost 方法上扫描 HTML table

Scan through HTML table on the OnPost method of a razor page

c#

entity-framework

asp.net-core

razor-pages