In my web application, there is a section where I load the values from the model using For loop
So I added a button to trigger the script.
I want to know how to get the model data EmpMarks to the array and sum.
This is the View
<tbody> @for (int i = 0; i < Model.First().KPIMarksVMList.Count(); i++)
{
<tr>
<td style="display:none;"> @Html.HiddenFor(model => model.First().KPIMarksVMList[i].KPIId) </td>
<td width="60%"> @Html.DisplayFor(model => model.First().KPIMarksVMList[i].KPIName, new { htmlAttributes = new { @class = "form-control" } }) </td>
<td>
<div class="radio">
@Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "1") 1
@Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "2") 2
@Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "3") 3
@Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "4") 4
@Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "5", new { @checked = "Checked" }) 5 </div>
</td>
</tr>
}
</tbody>
</table>
<input type="button" value="Check MarksRequest" class="btn btn-success" onclick="Calculation();" />
This is what I tried
function Calculation()
{
var myArray = [];
@foreach (var item in Model.First().KPIMarksVMList)
{
@:myArray.push('@item.EmpMarks');
}
console.log(myArray)
}
Array Returns with 0. Not getting user clicked value
This is the calculation I want to do in the script.
Need to predefine these in the script.
const int kpMarks = 65;
int kpiCounts = mainDetailsVM.KPIMarksVMList.Count();
decimal KpMarksPerQuiz = (kpMarks / kpiCounts) / 5;
decimal kpiMarks = 0;
This need to add within the Foreach
decimal k = KpMarksPerQuiz * item.EmpMarks;
kpiMarks += k;
Have you tried viewBag or
If you waiting for triger a button you can call ajax call in button click and the backend function return a json
I hope I answered right
I managed to pass the values from View to Controller by changing .First() in the View to [0], e.g. @Html.RadioButtonFor(model => model[0].KPIMarksVMList[i].EmpMarks, "1")
The name attribute generated in the View is different for .First() and [0].
When using .First():
<input id="KPIMarksVMList_0__EmpMarks" name="KPIMarksVMList[0].EmpMarks" type="radio" value="1" />
When using [0]:
<input name="[0].KPIMarksVMList[0].EmpMarks" type="radio" value="1">
Changing .First() to [0] allow Razor to generate correct HTML to pass data from View to Controller.
Here are the code for ajax call:
@model List<MyModel>
@using (Html.BeginForm("Calculation", "Controller", FormMethod.Post, new { id = "form" }))
{
...
<div class="radio">
<div>@Html.RadioButtonFor(model => model[0].KPIMarksVMList[i].EmpMarks, "1") 1</div>
<div>@Html.RadioButtonFor(model => model[0].KPIMarksVMList[i].EmpMarks, "2") 2</div>
<div>@Html.RadioButtonFor(model => model[0].KPIMarksVMList[i].EmpMarks, "3") 3</div>
<div>@Html.RadioButtonFor(model => model[0].KPIMarksVMList[i].EmpMarks, "4") 4</div>
<div>@Html.RadioButtonFor(model => model[0].KPIMarksVMList[i].EmpMarks, "5", new { @checked = "Checked" }) 5</div>
</div>
...
<input type="button" value="Check MarksRequest" class="btn btn-success" onclick="submitForm()"/>
}
<script>
function submitForm(){
$.ajax({
url: '../Controller/Calculation',
type: 'POST',
dataType: 'json',
data: $('#form').serialize(),
success: function (data) {
console.log(data);
}
});
}
</script>
public JsonResult Calculation(List<MyModel> dataList)
{
const int kpMarks = 65;
int kpiCounts = dataList.First().KPIMarksVMList.Count();
decimal KpMarksPerQuiz = (kpMarks / kpiCounts) / 5;
decimal kpiMarks = 0;
foreach (var item in dataList.First().KPIMarksVMList)
{
decimal k = KpMarksPerQuiz * item.EmpMarks;
kpiMarks += k;
}
return Json(new { kpiMarks = kpiMarks });
}