c#之在 javascript 函数中使用 Razor 代码

下面是我的观点...如您所见，网格正在从 View 模型中填充

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

用户可以选择选中复选框并单击上面的按钮...之后我需要选中已选中的复选框并获取相应的数据以在 ajax 调用中发送。

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

在上面的 js 函数中，UpdateEffortDetail 只是一个 ajax 调用。 我希望问题现在更清楚了，如果您需要进一步的输入，请告诉我。

请您参考如下方法:

将您的 Grid rows 放入 ID 为“divGrid”的 Div 中，以便我们可以在 javascript 代码中轻松访问它。

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

此脚本将从复选框被选中的网格中获取所有行，然后我们在该复选框上循环，找到它的父行。我们从父行中找到要更新的数据。

这是获取更新的行数据的方法。

如果您了解逻辑，可以进一步简化此代码。