Member 14564587 Ответов: 2

Извлечение значения из представления(формат сетки) в контроллер


Working with MVC, Razor pages. Trying to create a grid with a functionality to insert rows within the grid (not against a pop up or a separate page) with a click of + and delete a row on - . The counter is not working on the front end (Razor HTML). Code given below. Any one can help please?


Что я уже пробовал:

@model New_Booking_Home.Models.Booking

@{
    Layout = null;
}

<!DOCTYPE html>
<body>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <div class="container">
          <div class="row">
                <p></p>
                <table id="myTable" style="width:100%">
                    <tr>
                        <td>
                            <button value="ADD" type="button" class="btnplus tooltip" onclick="myCreateFunction(this)"></button>
                        </td>
                        <td>
                            <div>Container Type</div>
                        </td>
                        <td>
                            <div>Quantity</div>
                        </td>
                    </tr>


                    @if (Model != null)
                    {
                        int i = 0;
                        foreach (var item in Model.cargolist2.ToList())
                        {
                            <!-- for (int i = 0; i < Model.cargolist2.Count; i++)-->
                            <tr>
                                <td>


                                    <button value="delete" type="button" class="btndel tooltip" onclick="deleteRow(this)"></button>


                                </td>
                                <td>
                                    @Html.EditorFor(model => model.cargolist2[i].CntrtypeID, new { htmlAttributes = new { @class = "form-control textbx" } })
                                    @Html.ValidationMessageFor(model => model.cargolist2[i].CntrtypeID, "", new { @class = "text-danger" })
                                </td>
                                <td>
                                    @Html.EditorFor(model => model.cargolist2[i].Qty, new { htmlAttributes = new { placeholder = "Enter quantity", @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.cargolist2[i].Qty, "", new { @class = "text-danger" })
                                </td>
                            </tr>
                        }
                    }
                </table>
            </div>
            <div>
                <input type="submit" class="genbtn" value="Submit" />
        </div>
    }


    <script>
    function myCreateFunction() {
        var table = document.getElementById("myTable");
        var x = document.getElementById("myTable").rows.length;

        x = x + 1;

        var row = table.insertRow();
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML =  '<button class="btndel tooltip" type="button" value="Delete" onclick="deleteRow(this)"></button>';
        cell2.innerHTML = '@Html.EditorFor(model => model.cargolist2[' + x + '].CntrtypeID, new { htmlAttributes = new { @class = "form-control textbx" } })                                @Html.ValidationMessageFor(model => model.cargolist2[' + x + '].CntrtypeID, "", new { @class = "text-danger" })';
        cell3.innerHTML = '@Html.EditorFor(model => model.cargolist2[' + x + '].Qty, new { htmlAttributes = new { placeholder = "Enter quantity", @class = "form-control" } })                         @Html.ValidationMessageFor(model => model.cargolist2[' + x + '].Qty, "", new { @class = "text-danger" });';
}



  function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
  }


    </script>
</body>
</html>

2 Ответов

Рейтинг:
2
Рейтинг:
0

F-ES Sitecore

Вы должны оценить разделение кода сервера и кода клиента. Ваш серверный код (все После @) сначала запускается на сервере, полученный html-код затем отправляется клиенту для выполнения, и в этот момент ваш js запускается, поэтому вы не можете иметь серверный код, выполняемый динамически в вашем javascript. Просмотрите исходный код вашей страницы и посмотрите на javascript для строки, которая начинается

cell2.innerHTML = ...


Это точный код, который выполняется каждый раз, когда вы вызываете функцию myCreateFunction.

Все, что вам нужно сделать, это создать входные элементы, используя тот же формат html, что и EditorFor. Опять же, если вы просматриваете Источник, вы увидите, что это за формат, важным битом является "имя", которое будет именем, производным от вашего модала с числом в квадратных скобках, указывающим, что он является частью массива, поэтому у вас будут элементы с именами типа "myElement[0]", "myElement[1]" и т. д. Когда подобные элементы отправляются вместе с вашей формой, они анализируются в массив с помощью файла .net.

Во всяком случае, есть базовый пример, который показывает, как это сделать здесь;

ASP.NET MVC3 динамически добавляемые поля формы привязка модели[^]

Он показывает, как создать входной html-код, используя правильный формат, просто адаптируйте его для ваших собственных имен переменных.


Maciej Los

5ed!

Dave Kreskowiak

"Ваш серверный код (все после @) запускается первым на клиент..."??

Разве вы не имеете в виду "бегает по сервер"?

F-ES Sitecore

Да, именно это я и сказал.

*нервно кашляет.*