Сканировать таблицу HTML методом OnPost бритвенной страницы - PullRequest
Новая
       8

Сканировать таблицу HTML методом OnPost бритвенной страницы

0 голосов
/ 05 мая 2020

Доброе утро, я разрабатываю свое веб-приложение на страницах. Net 3.1 и Razor. На одной из моих страниц у меня есть таблица с некоторыми полями ввода в различных столбцах, которые пользователь может изменять по своему вкусу. 

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

На моей странице также есть кнопка, с помощью которой я хотел бы просканировать все строки моей таблицы и передать значения указанной строки методу, который, если некоторые условия выполняются для указанной строки c, она обновляет БД с помощью EF Core с данными из полей указанной строки.

Как лучше всего достичь моей цели? Могу ли я связать всю таблицу со свойством модели и просматривать строки в моей модели?

Спасибо!

1 Ответ

1 голос
/ 06 мая 2020

Как лучше всего достичь моей цели? Могу ли я связать всю таблицу со свойством модели и сканировать строки в моей модели?

Чтобы выполнить вышеуказанное требование, вы можете заставить свой метод обработчика 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>

Результат теста

enter image description here

...