Sending the model back to the controller on form submission - forms

Question

I want to create list using dropdown.
I have model class with following properties.
public class EditPaymentMethod
{
public List<string> BPay { get; set; }
public List<BillerCode> BillerCodes { get; set; }
}
public class BillerCode
{
public List<string> CodeList { get; set; }
}
In my mock class, I'm creating mock data as follows:
public static EditPaymentMethod GetPaymentMethodDetails(int tenantID)
{
for (int i = 0; i < obj.MyProperty.BPay.Count; i++)
{
obj.BillerCodes.Add(new BillerCode { CodeList = new List<string> { "AAA" + i, "BBB" + i } });
}
return obj;
}
In View:
#using (Html.BeginForm("EditPaymentMethod","PaymentMethod",FormMethod.Post))
{
#for (int i = 0; i < Model.MyProperty.BPay.Count; i++)
{
<div class="list_scbill">
#Html.Label("Biller Codes")
</div>
<div style="display: block; margin-left: 87px;">
#Html.DropDownListFor(model => model.BillerCodes[i].CodeList, new SelectList(Model.BillerCodes[i].CodeList))
</div>
}
<div id="BtnsDiv">
<button id="btn_SaveChanges" type="submit">
Save
</button>
<button id="btn_Cancel" type="button">
Cancel
</button>
</div>
}
In Controller:
public ActionResult EditPaymentMethod(EditPaymentMethod model)
{
if (ModelState.IsValid)
{
//CODE TO SAVE DATA THROUGH THE SERVICE
}
return View(model);
}
When I try to submit the form, EditPaymentMethod gets the model with BillerCodes as null.
Any idea where I'm going wrong?
Thanks in advance.

Answer 1

Couple things right off the bat, number one you are not actually passing the model to your controller in the route values dictionary.
#using (Html.BeginForm("EditPaymentMethod","PaymentMethod",new {model = Model}, FormMethod.Post))
will add your model as a parameter to your post. Also your controller is currently a get request you will need to flag it as a post or the controller will by default try to get the serialized string from the url rather than the request body.
[HttpPost]
public ActionResult EditPaymentMethod(EditPaymentMethod model)

Answer 2

Use ListBoxFor for a multi-select, instead of DropDownListFor, which just produces a single-select whose posted value will not be correct for the modelbinder to bind to a list.

Answer 3

For the same you have to create List Variable in Model
and on view page you have to
#Html.ListBoxFor(model => model.SelectedList, new SelectList(Model.SelectList, "Id", "Name"), new { #class = "js-example-basic-multiple form-control", #multiple = "multiple", #id = "SelectListId" })
var ListModel = {
"Id": 0,
"SelectedList": $("#SelectedListId").val(),
};
$.ajax({
url: '/Test/Test/',
type: "Post",
async: false,
dataType: "html",
data: JSON.stringify(ListModel),
contentType: "application/json;charset=utf-8",
success: function (result) {
}
});
Model Should be :
public class EditPaymentMethod
{
public List<string> BPay { get; set; }
public List<BillerCode> BillerCodes { get; set; }
public int[] SelectedList{ get; set; }
}