在 javascript 函数中使用剃刀代码

Question

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

 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 调用。我希望问题现在更清楚了，如果您需要进一步的输入，请告诉我。

Answer 1

这里有两个选项；要么没有元素将 chkbox 设置为 true（在这种情况下，我们不应该期待任何输出），要么 //code 看起来很酷，足以欺骗处理器试图运行它是服务器端；你可以尝试给它 <text> 提示：

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

Answer 2

将您的 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>

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

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

如果你理解了逻辑，这段代码可以进一步简化。

在 javascript 函数中使用剃刀代码

Using razor code within javascript function

c#

model-view-controller

jquery

razor