I'm experiencing an issue with a form containing data presented in a table structure
@model IEnumerable<myType>
@Html.AntiForgeryToken()
@using (Ajax.BeginForm("Save", "NOC", null, ajaxopts, new { @encType = "multipart/form-data", @id = "myform", @name = "myform" }))
{
<table>
<tr>
<td><input type="hidden" name="myType[0].ID" id="myType[0].ID" value="16" /></td>
<td><input type="text" name="myType[0].Name" id="myType[0].Name" value="Jim" /></td>
<td><input type="checkbox" name="myType[0].Selected" id="myType[0].Selected" checked /></td>
</tr>
<tr>
<td><input type="hidden" name="myType[1].ID" id="myType[1].ID" value="17" /></td>
<td><input type="text" name="myType[1].Name" id="myType[1].Name" value="Bob" /></td>
<td><input type="checkbox" name="myType[1].Selected" id="myType[1].Selected" /></td>
</tr>
</table>
<button id="process" value="Save" class="btn btn-primary">Save</button>
}
When inspecting the Form Data section in Chrome, I can see the list of data that is being sent to the controller....
myType[0].ID: 16
myType[0].Name: Jim
myType[0].Selected: on
myType[1].ID: 17
myType[1].Name: Bob
However, despite this, the controller receives null values.
[HttpPost]
public async Task<ActionResult> SaveData(IEnumerable<myType> model)
{
return Json("Hi");
}
In addition, when checking the Preview in Chrome Dev Tools, it displays "Hi" as the response from the Controller.
My JavaScript code is as follows:
$("#process").on("click", function (event){
event.preventDefault();
var formData = $("#myForm").serialize();
$.ajax({
url: url,
type: "POST",
data: formData
})
});
The 'myType' model is defined as:
public class myType
{
public int ID { get; set; }
public string Name { get; set; }
public bool Selected { get; set; }
}
I am not receiving any JavaScript errors, but unfortunately no data seems to be reaching the controller. Any assistance would be greatly appreciated.
Thank you.