Passing Id and User Selected Value to the JavaScript from Model List

user_17961431 0
Viewed 52

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;
arrays javascript c#
1 Answers

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 });
}
user_196643040
Related