How to pass unknown number of table records from view back to controller in ASP.NET

Question

I am trying to pass a bunch of data from my view to the controller upon submission of the form. However, my form has a table which the user can add records to so until they complete the form I can't know how many records in the table there will be.

I need to pass this data entered into the table from the view back to the controller somehow along with other information in other fields... This is what I have done so far:

@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();

        }

But of course this doesn't work as the itemDesc, quantity and cost are columns from the table and so there could be multiple records when the form is being filled out.

Suggest you start by reading [this answer](https://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Sep 17 '18 at 10:58

score 0 · Answer 1 · answered Sep 17 '18 at 11:25

I suggest you to add an input hidden to have a control of how many times the user has clicked in the button add.

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

Then you have to manipule this value in your jquery function to increment automaticaly and add an "Id" in each cell:

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

Now, in controller you can found the typed values in cells using Request property:

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();

        }

Is there any disadvantages to using this "typed in cell" way of accessing data from the fields? It seems fragile — Renji, Sep 17 '18 at 12:05
With this approach how do I pass in the value of the hidden field to the controller? — Renji, Sep 17 '18 at 12:49
Its hard to work with dynamic fields editable... To pass the hidden value to controller, you can send in method params or you can delegate one 'id' and recover it through Request in controller. — Victor Laio, Sep 17 '18 at 13:21

score 0 · Answer 2 · answered Sep 17 '18 at 11:32

0

You can create JSON for client-side user data and post JSON data to the controller then parse that data using NewtonSoft.Json library.

Newtonsoft.Json library used for convert JSON into DataTable or IEnumerable

answered Sep 17 '18 at 11:32

Hrishikesh

299
1
14

I never worked with JSON before, can you link me to a guide or something – Renji Sep 17 '18 at 12:50

How to pass unknown number of table records from view back to controller in ASP.NET

2 Answers2