Как считать данные из HTML таблицы в метод контроллера ASP.net при изменении

Прошу подсказать как можно считать данные из таблицы HTML при изменении и передать в контроллер ASP HTML разметка простейшая

<table id="1" class="heavyTable">
    @{
        var rows = Model.GetUpperBound(0) + 1;   
        var columns = Model.Length / rows;       
                                                    
                                                    
        @for (int i = 0; i < rows; i++)
        {
            <tr>
                @for (int j = 0; j < columns; j++)
                {

                    @Html.Raw(Model[i, j])

                }
            </tr>
        }
    }
</table>

С JS знаком максимально плохо. Нашел MutationObserver, но выдает ошибку что метод устарел. Код контроллера для вывода данных:

public IActionResult Index()
{
    var newFile = "Feeds.xlsx";
    Workbook wb = new Workbook(newFile);
    WorksheetCollection collection = wb.Worksheets;
    Worksheet worksheet = collection[0];
    int rows = worksheet.Cells.MaxRow + 1;
    int cols = worksheet.Cells.MaxColumn;

    string[,] arr = new string[rows, cols + 1];

    if (rows > 0 && cols > 0)
    {
        int rowsCount = 0;
        for (int i = 0; i < rows; i++)
        {
            string bacgroung = "";

            if(i!=0&&worksheet.Cells[i, 10].Value==null&& worksheet.Cells[i, 2].Value.ToString()== "Новый" || i != 0 && worksheet.Cells[i, 10].Value.ToString()=="" && worksheet.Cells[i, 2].Value.ToString() == "Новый")
            {
                bacgroung = " background-color: red;'";
            }
            else if(i != 0&& worksheet.Cells[i, 2].Value.ToString() == "Новый")
            {
                string[] day = worksheet.Cells[i, 10].Value.ToString().Split("//");
                if ((DateTime.Now - DateTime.Parse(day[day.Count() -2])).Days > 3)
                {
                    //bacgroung = " background-color: red;'";
                }
            }
            var rowHiden = worksheet.Cells.Rows[i].IsHidden;
            if (!rowHiden)
            {
                for (int j = 0; j <= cols; j++)
                {

                    int colimnMergeCount = 0;
                    string str = "";

                    str = "<td style='border-collapse: collapse; border: 1px solid black;";
                    if (bacgroung != "")
                    {
                        str += bacgroung;
                    }
                    else
                    {
                        str += "'";
                    }
                    if (i != 0 && j == 4 || i != 0 && j == 5 || i != 0 && j == 8)
                    {
                        str += " contenteditable='true' ";
                    }

                    str += ">";
                    if (i != 0 && j == 1)
                    {
                        str += (DateTime.Now - DateTime.Parse(worksheet.Cells[i, j - 1].Value.ToString())).Days;
                    }
                    if (worksheet.Cells[i, j].Value != null)
                    {
                        str += worksheet.Cells[i, j].Value.ToString() + "</td>";
                    }
                    else
                        str += "</td>";
                    arr[rowsCount, j] = str;
                    j = j + colimnMergeCount;
                }
            }
            rowsCount++;
        }
    }
    return View(arr);
}

Пробовал MutationObserver, но пишет что метод устарел. Искал информацию про прослушивание DOM объектов, но там нет информации про изменение таблицы


Ответы (1 шт):

Автор решения: Vinni

Решил проблему стандартной формой ASP.net и задействованием кнопки через JS.

Код:

@foreach (var row in Model)
{
    <form asp-action="OnGetFamilyNameByCode" method="post">
    <tr style="border-collapse: collapse; border: 1px solid black;">
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.dateOfApplication" readonly name="dateOfApplication" [email protected] /></td>
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input readonly [email protected] /></td>
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.state" readonly name="state" value="@row.state"></td>
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.orderNumberOfTheComplaint" name="orderNumberOfTheComplaint" id="input_event_code" type="text" value="" onblur="geteventtype();" value="@row.orderNumberOfTheComplaint" /></td>
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.affiliationDepartment" name="affiliationDepartment" name="affiliationDepartment" onblur="geteventtype();" value="@row.affiliationDepartment.ToString()" /></td>
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.clientsMail" readonly value="@row.clientsMail.ToString()" name="clientsMail">
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.subjectOfTheLetter" readonly name="subjectOfTheLetter" value="@row.subjectOfTheLetter.ToString()">
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.brand" onblur="geteventtype();" name="brand" value="@row.brand.ToString()">
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.state" readonly name="state" value="@row.daysInTheWork">
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.dateOfResponses" readonly name="dateOfResponses" value="@row.dateOfResponses.ToString()">
        <td style="min-width:100px; border-collapse: collapse; border: 1px solid black;"><input asp-for="@row.dateOfCalls" readonly name="dateOfCalls" value="@row.dateOfCalls.ToString()">

    </tr>
    <input class="button" type="submit" hidden="true" value="Отправить" />
    </form>
}

@section Scripts{
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }

    <script>
        function geteventtype() {

            var elements = document.querySelector(".button");
            elements.click();
        }
    </script>

}
→ Ссылка