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.

What i actually have is a grid which is populated from a view model, each row in the grid would have a checkbox...at the click of the update button at the bottom i am trying to update the edited data in the grid corresponding to the checked checkboxes . i personally found razor syntax very convenient, so that explains the above approach. Let me know if further clarifications are required — MR K
– MR K, Commented Mar 18, 2015 at 10:02
What is your desired output? What bits do you want to be client-side? is item.chkbox true for any elements? — Marc Gravell
– Marc Gravell, Commented Mar 18, 2015 at 10:04
In this case you won't be able to use Razor model, as the model will be used on the page load to render grid and Your requirement is to process rows that are checked after click on Update Button And on click of update button, razor model will not be available. — Puneet
– Puneet, Commented Mar 18, 2015 at 10:06
@marcGravell Yes it is expected that item.chkbox would be checked for one or more rows, based on which an ajax call would be fired. — MR K
– MR K, Commented Mar 18, 2015 at 10:07

Puneet · Accepted Answer · 2015-03-18 10:57:31Z

2

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.

answered Mar 18, 2015 at 10:57

Puneet

2,05110 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MR K Over a year ago

With a few changes, i could make the above code work..its the only approach that actually worked...but you are right there has to be a simplified way.

Puneet Over a year ago

At present, using this approach you would be calling Server side method for EACH row. What I suggest is to Post the WHOLE grid data to the server using Form tag. And there at the server side, you can easily check what Row is checked/updated and can process the data at once. It would save a lot of time of yours and server as well

Marc Gravell · Accepted Answer · 2015-03-18 10:18:29Z

1

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>
    }
}

answered Mar 18, 2015 at 10:18

Marc Gravell

1.1m273 gold badges2.6k silver badges3k bronze badges

3 Comments

MR K Over a year ago

Nope , item is undefined -Js error...tried assigning item to var item1, but to no avail , i guess razor is invisible here.

Marc Gravell Over a year ago

@MRK unless you can show what you're trying to do in //code, it is impossible for us to comment much more than the above... are you perhaps omitting a lot of code that could make razor thing that the if should be client-side? because that would cause "item is undefined" - in which case, @if(item.chkbox) - but to get "item is undefined", you're already getting more client-side than you suggest in the question

MR K Over a year ago

updated my question , pls see if it makes more sense.

Collectives™ on Stack Overflow

Using razor code within javascript function

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related