Sending a Javascript array to controller ASP.NET MVC

Question

I'm trying to store user input in a javascript array and send it to controller via ajax call. But all I get in controller's parameter is null. Here's the code:

<table class="table-condensed table-bordered table-striped table-responsive">
    @foreach (var project in projects)
    {
        <tr>     
            @foreach (var parameter in parameters)
            {
                <td>
                    <input type="text" class="form-control remar" id=@i />
                </td>
                i++;
            }
        </tr>
    }
    <tr>
        <td colspan=@(parameters.Count() + 1)>
            <button class="btn btn-primary pull-right" onclick="insert()">Submit Remarks</button>
        </td>
    </tr>
</table>   

<script>
function insert() {
var remarks = [];
jQuery(".remark").each(function () {
    remarks.push(jQuery(this).val());
});
$.ajax({
    type: "POST",
    url: "@Url.Action("AddRemarksToEvaluationSheet", "Teacher")",
    data: JSON.stringify({ function_param: remarks }),
    contentType: "application/json; charset=utf-8;"
});
}
</script>

Controller:

public ActionResult AddRemarksToEvaluationSheet(string[] function_param)
    {
        return View();
    }

Any help? P.S. the above code is edited. It worked!

score 0 · Accepted Answer · answered May 18 '16 at 15:20

You've got lots going on here...

First, don't give your input boxes ids of numbers - in this scenario, it doesn't look like you even use the value...But if you need it, put the value into a data element:

<input type="text" class="form-control remark" data-remark-id="@i" />

When retrieving the values, you need to get the value, not the textbox itself:

var remarks = [];
jQuery(".remark").each(function() {
    remarks.push(jQuery(this).val());
});

When doing anything weird with parameters, like arrays or complex objects, if you use JSON instead of the default of URL-encoded, it will make things nicer.

You should also avoid absolute paths, and use Url.Action instead, so that it'll work regardless of where your app lives relative to the domain.

$.ajax({
    type: "POST",
    url: "@Url.Action("AddRemarksToEvaluationSheet", "Teacher")",
    data: JSON.stringify({ function_param: remarks }),
    contentType: "application/json; charset=utf-8;"
});

And you can accept an array of strings, rather than of objects:

[HttpPost]
public ActionResult AddRemarksToEvaluationSheet(string[] function_param)
{
}

Thanks for your help. I just tried all of it and but the parameter is null. — Resham, May 18 '16 at 15:32
Try editing your question to include what you've got now - I tried this exact thing and it's working, so you must have something else going on. — Joe Enos, May 18 '16 at 15:34
oh it worked. Sorry I made a mistake earlier. Thanks so much :) — Resham, May 18 '16 at 15:43

score 0 · Answer 2 · answered May 18 '16 at 15:37

I have a feeling that you aren't getting the remarks in the array in the first place.

If you aren't already, use a browser that allows you to debug the js. If you use Chrome, right-click -> inpsect element (or F12). Go to the 'Sources' tab, go to your js file and put a break point to see what the remarks array looks like.

Regarding the code:

You do not seem to need id attributes on the inputs. Let alone numerical ids.

To populate the remarks array, get all dom elements having the class you placed on all inputs. For each one, push the value in the array.

var remarks = [];
$(".form-control").each(function() {
    remarks.push($(this).val());
});

You can add extra code to only add the ones with value.

var remarks = [];
    $(".form-control").each(function() {
        if($(this).val().length){
           remarks.push($(this).val());
        }
    });

The ajax call:

$.ajax({
    type: "POST",
    url: addRemarksUrl,
    data: JSON.stringify({ function_param: remarks }),
    contentType: "application/json; charset=utf-8;"
});

Where addRemarksUrl can be a global variable declared in the html.

There are other ways of getting the url. Have a look here:

How to send razor created Url to js file

This user offers 3 possible solutions:

global js variable
custom "data-" attribute
hidden input

The issue has been resolved. Thanks for your answer :) – Resham May 18 '16 at 15:47 — Resham, May 18 '16 at 15:47

Sending a Javascript array to controller ASP.NET MVC

2 Answers2