Using razor code within javascript function

Question

The below is from my view...as you can see the grid is getting populated from the View model

 for (int i = 0; i < Model._effGrid.Count; i++)
    {
            <div id="gridRow@(i)" class="row">

                <div class="col-md-1">
                    @Html.CheckBoxFor(m => m._effGrid[i].chkBox, new { id = ("chkGridRow" + i), @unchecked = true })
                    @*<input type="checkbox" id="chkBox@(i)" />*@
                </div>

                <div class="col-md-2">
                    @Html.DropDownListFor(m => m._effGrid[i].iterationId, new SelectList(Model.Iterations, "Value", "Text", Model._effGrid[i].iterationId), new { id = ("drpIteration" + i) })

                </div>
                <div class="col-md-2">
                    @Html.DropDownListFor(m => m._effGrid[i].PhaseID, new SelectList(Model.Phases, "Value", "Text", Model._effGrid[i].PhaseID), new { id = ("drpPhase" + i) })
                </div>

                <div class="col-md-2">
                    @Html.DropDownListFor(m => m._effGrid[i].ActivityID, new SelectList(Model.Activities, "Value", "Text", Model._effGrid[i].ActivityID), new { id = ("drpActivity" + i) })
                </div>
                <div class="col-md-2">
                    @*<input id="dtEffort@(i)" type="date" class="textwidth90percent texthieght10percent" value="@Model._effGrid[i].EffortDate.ToString("yyyy-MM-dd")">*@
                    @*@Html.EditorFor(m => m._effGrid[i].EffortDate)*@
                    @Html.TextBoxFor(m => m._effGrid[i].EffortDate, Model._effGrid[i].EffortDate.ToString("yyyy-MM-dd"), new { type = "date", @class = "textwidth90percent texthieght10percent" })

                </div>

                <div class="col-md-1">
                    @Html.TextBoxFor(m => m._effGrid[i].Hours, new { id = ("hours" + i), @class = "textwidth60percent" })
                </div>

                <div class="col-md-1" style="visibility: hidden">
                    @Html.TextBoxFor(m => m._effGrid[i].effortid)
                </div>

            </div>
        counter = i;
    }
        }

The user may choose to check on the chkboxes and click the above button...UPON which i need to check the checkbox that was checked and get the corresponding data to send in an ajax call.

<script type="text/javascript">
    $(document).ready(function () {
        $("#SaveEffortChanges").click(function (e) {
            debugger;
  @foreach (var item in Model._effGrid)
                {
                    var it = item;


            if (it.chkBox)
                    {
                          UpdateEffortDetail(it.effortid, it.iterationId, it.ActivityID, it.PhaseID, it.EffortDate, it.Hours);
                    } 


                }

            //$("#EffortForm").submit(e.data)
        });
 }
        );

In the above js function UpdateEffortDetail is merely an ajax call. I hope the question is clearer now, let me know if you need further inputs.

Answer 1

Put your Grid rows inside the Div with id "divGrid", so that we can access it easily in the javascript code.

    <script type="text/javascript">
    $(document).ready(function () {
        $("#SaveEffortChanges").click(function (e) {

          $("#divGrid").find('input[type=checkbox]:checked').each(function(){

            var row = $(this).closest('div.row');
            var effortid = row.find('input[name*="effortid"]').val();
            var iterationId = row.find('input[name*="iterationId"]').val();
            var ActivityID = row.find('input[name*="ActivityID"]').val();
            var PhaseID = row.find('input[name*="PhaseID"]').val();;
            var EffortDate = row.find('input[name*="EffortDate"]').val();
            var Hours = row.find('input[name*="Hours"]').val();

            //Use Ajax method to call your Update method on Server side with above updated data
          });

        });
 }
        );

</script>

This script will get all the Rows from the grid whose checkbox is checked and then we loop on that checkbox, find it's Parent Row. From parent row we find the data to update.

This is how you can get the updated rows data.

This code can be simplified more if you get the logic.

Answer 2

There are two options here; either no elements have chkbox set to true (in which case, we shouldn't expect any output), or the //code is looking razor-esque enough to fool the processor into trying to run it server side; you could try giving it the <text> hint:

@foreach (item in Model.grid)
{
    if (item.chkbox)
    {
        <text>
        //code
        </text>
    }
}