How can I simplify posting tons of parameters to the controller?

Question

I am creating a form that requires multiple inputs from the user. The code below is 1/3 of the form, as since it has a lot of parameters I have split it into three.

Basically, I have a matrix question that requires 36 different inputs.

Can anyone advise me about how I can accept those input values without creating an action with 36 parameters?

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col" >
                    Physics
                </th>
                <th scope="col">
                    English Literature
                </th>
                <th scope="col">
                  Social Studies
                </th>
                <th scope="col" >
                    French
                </th>
                <th scope="col">
                    Italian
                </th>
                <th scope="col">
                    Home Economics
                </th>
                <th scope="col">
                    Mathematics
                </th>
                <th scope="col">
                    Biology
                </th>
                <th scope="col">
                    Chemistry
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Class A</th>
                <td><input type="number" min="0" name="Col1Row1" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col2Row1" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col3Row1" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col4Row1" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col5Row1" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col6Row1" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col7Row1" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col8Row1" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col9Row1" class="form-control" required /></td>
            </tr>
            <tr>
                <th scope="row">Class B</th>
                <td><input type="number" min="0" name="Col1Row2" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col2Row2" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col3Row2" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col4Row2" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col5Row2" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col6Row2" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col7Row2" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col8Row2" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col9Row2" class="form-control" required /></td>
            </tr>
            <tr>
                <th scope="row">Class C</th>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col1Row3" class="form-control" required /></td>
            </tr>
            <tr>
                <th scope="row">Class D</th>
                <td><input type="number" min="0" name="Col1Row4" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col2Row4" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col3Row4" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col4Row4" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col5Row4" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col6Row4" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col7Row4" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col8Row4" class="form-control" required /></td>
                <td><input type="number" min="0" name="Col9Row4" class="form-control" required /></td>
            </tr>
            <tr>
        </tbody>
    </table>
</div>
<br />
<br />
<div class="row no-gutters">
    <div class="col-lg-1 col-lg-offset-1">
        <input type="submit" name="submit" class="btn btn-success btn-lg sbn " value="Back" />
    </div>
    <div class="col-lg-8"></div>
    <div class="col-lg-2">
        <input type="submit" name="submit" class="btn btn-success btn-lg sb" style="padding-right:10px;" value="Next" />
    </div>
</div>

And this is the Action in the Controller. It doesn't have any logic yet, as I'm stuck wondering how I can modify the current code structure.

public ActionResult TemplateOne()
{
    return View();
}

[HttpPost]
public ActionResult TemplateOne(int Col1Row1,int Col2Row1,int Col3Row1,int Col4Row1,int Col5Row1,int Col6Row1,int Col7Row1,int Col8Row1,int Col9Row1,int Col1Row2,
                                int Col2Row2,int Col3Row2,int Col4Row2,int Col5Row2,int Col6Row2,int Col7Row2,int Col8Row2,int Col9Row2,int Col1Row3,
                                int Col2Row3,int Col3Row3,int Col4Row3,int Col5Row3,int Col6Row3,int Col7Row3,int Col9Row3,int Col1Row4,int Col2Row4,
                                int Col3Row4,int Col4Row4,int Col5Row4,int Col6Row4,int Col7Row4,int Col8Row4,int Col9Row4)
{

    return View();
}

Answer 1

I would say, while there are limitations in the number of input parameters and also you are not able to use params in Controller's Action, my best solution is to try to have an input model in your action; then add your input controls into an HTML Form and try to use the jquery snippet below in order to format your data into a JSON object so can be passed through an AJAX request.

Obviously, you require to have JQuery included.

Javascript:

$.fn.serializeFormToObject = function () {
    //serialize to array
    var data = $(this).serializeArray();

    //add also disabled items
    $(':disabled[name]', this).each(function () {
        data.push({ name: this.name, value: $(this).val() });
    });

    //map to object
    var obj = {};
    data.map(function (x) { obj[x.name] = x.value; });

    return obj;
};

var data = $("#Your_Form").serializeFormToObject();
//add this data to your AJAX request

Input Model:

public class InputModel 
{
   //Define your properties here ...
}

Action:

[HttpPost]
public ActionResult TemplateOne(InputModel input)
{

    return View();
}

Answer 2

If you want to send a lot of data to a controller (e.g. PUT or POST), I would advice you to use JSON. The .NET framework will automatically serialize it for you into the object you want. For example:

DTO:

public class CreateTemplateOne {
  public int Col1Row1;
  public int Col2Row1;
  etc
}

Controller:

[HttpPost]
public async Task<IActionResult> TemplateOneCreate([FromBody] CreateTemplateOne createTemplateOne)
{
 // You will have createTemplateOne filled in now from the input.
}

Send to API JSON:

{
 'Col1Row1': 1,
 'Col2Row1': 2
}