I have a form within a view with code that looks like this:
@using (Html.BeginForm("Summary", "ControllerName", FormMethod.Post))
{
<div class="row">
<label for="Election[1].percent" class="col-sm-9 col-form-label text-left">text line 1</label>
<div class="col-sm-3">
<input type="number" class="form-control election" id="Election[1].percent" min="0" max="100" value="0">
<input type="number" hidden id="Election[1].fund" value="1" />
</div>
</div>
<div class="row">
<label for="Election[2].percent" class="col-sm-9 col-form-label text-left">text line 2</label>
<div class="col-sm-3">
<input type="number" class="form-control election" id="Election[2].percent" min="0" max="100" value="0">
<input type="number" hidden id="Election[2].fund" value="1" />
</div>
</div>
<div class="row">
<label for="Election[3].percent" class="col-sm-9 col-form-label text-left">text line 3</label>
<div class="col-sm-3">
<input type="number" class="form-control election" id="Election[3].percent" min="0" max="100" value="0">
<input type="number" hidden id="Election[3].fund" value="1" />
</div>
</div>
}
The above is generated in the view based on data being passed in the model. There can be up to 100 rows being generated. As you can see, in each iteration, the subscript of Election increases by 1.
I have a model that looks like this:
public class FundElection
{
public int percent { get; set; }
public int fund { get; set; }
}
In my controller, I have this code:
[HttpPost]
public ActionResult Summary(List<FundElection> formData)
{
return View();
}
The submit button is disabled by default on the form and there is jQuery code in the view which totals the user entered percents as the user enters them. Once the total of all percents is 100, the submit button becomes enabled.
This is the code that runs to do that:
$(function () {
$('.election').change(function () {
var sum = 0;
$('.election').each(function () {
sum += parseInt($(this).val());
});
var totalElection = sum + "%";
$("#ElectionTotal").text(totalElection)
if (sum == 100) {
$("#submitButton").prop("disabled", false);
} else {
$("#submitButton").prop("disabled", true);
}
})
});
When I set a breakpoint on the return View() and run the application, the view gets generated correctly. When I click on the submit button (once the percents entered total 100) the form gets submitted but the breakpoint is never hit. In fact, when using Chrome, Chrome reports there is a problem with the page /ControllerName/Summary and when I test with Safari, I just get a blank page.
Any idea where the form went?
Thanks.
Edited: Here is an image from the Network tab that shows the bottom few elements on the form and the error that is being reported.
Edit 2:
I changed the form in the view from POST to GET so I could see the data and I changed the action method in the controller from [HttpPost] to [HttpGet].
This is what is being passed;
https://localhost:5001/OnlineEnrollment/Summary?Election%5B1%5D.percent=0&Election%5B1%5D.fund=1&Election%5B2%5D.percent=0&Election%5B2%5D.fund=2&Election%5B3%5D.percent=0&Election%5B3%5D.fund=3&Election%5B4%5D.percent=0&Election%5B4%5D.fund=4&Election%5B5%5D.percent=0&Election%5B5%5D.fund=5&Election%5B6%5D.percent=0&Election%5B6%5D.fund=6&Election%5B7%5D.percent=0&Election%5B7%5D.fund=7&Election%5B8%5D.percent=0&Election%5B8%5D.fund=8&Election%5B9%5D.percent=0&Election%5B9%5D.fund=9&Election%5B10%5D.percent=0&Election%5B10%5D.fund=10&Election%5B11%5D.percent=0&Election%5B11%5D.fund=11&Election%5B13%5D.percent=0&Election%5B13%5D.fund=13&Election%5B14%5D.percent=0&Election%5B14%5D.fund=14&Election%5B15%5D.percent=0&Election%5B15%5D.fund=15&Election%5B16%5D.percent=0&Election%5B16%5D.fund=16&Election%5B17%5D.percent=0&Election%5B17%5D.fund=17&Election%5B18%5D.percent=0&Election%5B18%5D.fund=18&Election%5B19%5D.percent=0&Election%5B19%5D.fund=19&Election%5B22%5D.percent=0&Election%5B22%5D.fund=22&Election%5B23%5D.percent=0&Election%5B23%5D.fund=23&Election%5B24%5D.percent=0&Election%5B24%5D.fund=24&Election%5B25%5D.percent=0&Election%5B25%5D.fund=25&Election%5B26%5D.percent=0&Election%5B26%5D.fund=26&Election%5B27%5D.percent=0&Election%5B27%5D.fund=27&Election%5B28%5D.percent=0&Election%5B28%5D.fund=28&Election%5B29%5D.percent=0&Election%5B29%5D.fund=29&Election%5B30%5D.percent=0&Election%5B30%5D.fund=30&Election%5B31%5D.percent=0&Election%5B31%5D.fund=31&Election%5B32%5D.percent=0&Election%5B32%5D.fund=32&Election%5B33%5D.percent=0&Election%5B33%5D.fund=33&Election%5B34%5D.percent=0&Election%5B34%5D.fund=34&Election%5B35%5D.percent=0&Election%5B35%5D.fund=35&Election%5B36%5D.percent=0&Election%5B36%5D.fund=36&Election%5B37%5D.percent=075&Election%5B37%5D.fund=37&Election%5B40%5D.percent=25&Election%5B40%5D.fund=40
Is it possible that the naming convention is causing this issue?