Как передать неизвестное количество записей таблицы из представления обратно в контроллер в ASP.NET

Question

Я пытаюсь передать кучу данных из моего представления контроллеру при отправке формы.Однако в моей форме есть таблица, в которую пользователь может добавлять записи, поэтому до тех пор, пока они не заполнят форму, я не могу знать, сколько будет записей в таблице.

Мне нужно передать эти данные, введенные втаблица из представления назад к контроллеру как-то вместе с другой информацией в других областях ... Это то, что я сделал до сих пор:

@using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post,
    new
    {
        traName = Request.Form["nameOfTra"],
        itemDesc = Request.Form[""],
        quantity = Request.Form[""],
        cost = Request.Form[""],
        amount = Request.Form["amountRequested"],
        memberName = Request.Form["commiteeMember"],
        date = Request.Form["agmDate"],
        signed = Request.Form["signed"],
        dated = Request.Form["dated"]
    }))
    {
    <h1 style="text-align: center;"> TRA grant application </h1>
    <h4 style="text-align: center;">This is the TRA Grant form for the association named below who agree to use these funds to cover the cost of administration of the TRA</h4>
    <p>
        <label for="nameOfTralbl">Name of TRA:</label>
        <input type="text" name="nameOfTra" value="" />
    </p>
    <h4> List of items the money will be spent on</h4>

    <table id="traTable">
        <tr>
            <td>Description of Items</td>
            <td>Quantity</td>
            <td>Cost</td>
        </tr>
        <tr>
            <td><input type='text' size="30" /></td>
            <td><input type='text' size="30" /></td>
            <td><input type='text' size="30" /></td>
        </tr>
    </table>
    <br />
    <button onclick="addRow()">Add Item</button>

    <script>
        function addRow() {
            var table = document.getElementById("traTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);

            cell1.innerHTML = "<input type='text' size='30'/>";
            cell2.innerHTML = "<input type='text' size='30'/>";
            cell3.innerHTML = "<input type='text' size='30'/>";
        }
    </script>

    if (@Model.uploaded != true)
    {
        <h2>Attach Documents:</h2>
        using (Html.BeginForm("Index",
                                       "Home",
                                       FormMethod.Post,
                                       new { enctype = "multipart/form-data", enctype2 = "multipart/form-data", enctype3 = "multipart/form-data" }))
        {
            <h4>Attach receipt:</h4>
            <input type="file" name="file" id="file" /><br>

            <br>
            <h4>Attach receipt log sheet:</h4>
            <input type="file" name="file2" id="file2" /><br>

            <br>
            <h4>Attach ETRA meeting minutes:</h4>
            <input type="file" name="file3" id="file3" /><br>

            <br>
            <input type="submit" value="Upload documents" />
        }
    }
    else
    {
        <h4>Documents have been successfully uploaded!</h4>

    }
    <p>
        <label for="amountRequestedlbl">Amount Requested (£):</label>
        <input type="text" name="amountRequested" value="" />
    </p>
    <p>
        <label for="commiteeMemberlbl">Name of committee member making application:</label>
        <input type="text" name="commiteeMember" value="" />
    </p>
    <br />




    <p>
        <label for="agmDatelbl">Date of AGM:</label>
        <input type="text" name="agmDate" value="" />
    </p>
    <p>
        <label for="signedlbl">Signed</label>
        <input type="text" name="signed" value="" />
    </p>
    <p>
        <label for="datedlbl">Dated</label>
        <input type="text" name="dated" value="" />
    </p>
    }


public ActionResult SubmitForm(string traName, string itemDesc, string quantity, string cost, float amount,
            string memberName, string date, string signed, string dated)
        {

            DBAccess dbAccess = new DBAccess();
            int reference = dbAccess.recordForm(traName, itemDesc, quantity, cost, amount, memberName, date, signed, dated);


            return View();

        }

Но, конечно, это не работает как itemDesc, quantity и cost - это столбцы таблицы, поэтому при заполнении формы может быть несколько записей.

Answer 1

Вы можете создать JSON для пользовательских данных на стороне клиента и опубликовать данные JSON на контроллере, а затем проанализировать эти данные с помощью библиотеки NewtonSoft.Json.

Библиотека Newtonsoft.Json, используемая для преобразования JSON в DataTable или IEnumerable

Answer 2

Я предлагаю вам добавить скрытый ввод, чтобы контролировать, сколько раз пользователь нажал на кнопку добавить.

<input type="hidden" id="rows" value="1" />

Затем вы должны манипулировать этим значением в вашей функции jquery для увеличенияавтоматически добавить «Id» в каждую ячейку:

  function addRow() {
    var table = document.getElementById("traTable");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    cell1.innerHTML = "<input type='text' size='30' id='cell1_"+$('#rows').val()+"'/>";
    cell2.innerHTML = "<input type='text' size='30' id='cell2_" + $('#rows').val() + "'/>";
    cell3.innerHTML = "<input type='text' size='30' id='cell3_" + $('#rows').val() + "'/>";

    $('#rows').val(parseInt($('#rows').val()) + 1)
  }

Теперь в контроллере вы можете найти введенные значения в ячейках, используя свойство Request:

public ActionResult SubmitForm(string traName, string itemDesc, string quantity, string cost, float amount,
            string memberName, string date, string signed, string dated)
        {
            string typedTextInCell1 = Request["cell1_1"];
            string typedTextInCell2 = Request["cell2_1"];
            string typedTextInCell3 = Request["cell3_1"];

            return View();

        }