Question

我有一个使用foreach创建的表。这是表的一半，foreach用于显示数据库中的值。

     @foreach (var item in Model)
                {
                    <tr>

                        <td>
                            @Html.DisplayFor(modelItem => item.TaskName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TaskAssignment)
                        </td>
                         <td>
                                @Html.DisplayFor(modelItem => item.CCInstruction)
                            </td>

                        <td>
                            <select>
                                <option>Employer</option>
                                <option>Employee</option>
                                <option>Employee and Employer</option>
                            </select>
                        </td>
                        <td>
                            <input type="button" class="btn btn-default" value="Fields" onclick="window.location.href = '../../OBClientSetupTaskFields/Index/@item.SetupID?tid=@item.TaskID'" />
                            <input type="button" class="btn btn-default" value="Documents" />
                            <input type="button" class="btn btn-default" data-toggle="modal" data-target="#instructions" value="Instructions" />
                            <input type="button" class="btn btn-default" value="tips" />
 <!--Modals-->
                        <div class="modal fade" id="instructions" tabindex="-1" role="dialog" aria-labelledby="instructionsLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="instructionsLabel">Instructions</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Placeholder text for isntructions or anything of that sort.</p>
                                        @Html.TextAreaFor(modelItem => item.CCInstruction, new {@class = "form-control", @rows = "6", @style = "width: 80%;"})
                                        <p>Placeholder text for isntructions or anything of that sort.</p>
                                        @Html.TextAreaFor(modelItem => item.EEInstruction, new {@class = "form-control", @rows = "6", @style = "width: 80%;"})
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </td>

                    </tr>
                }

            </table>

该foreach显示模型中可用的每个输入。由于代码在foreach循环中，当有人点击指令按钮时，不应显示每个代码吗？

Answer 1

所以我注意到我每次都基本上调用相同的模态，因为模态id不会随着foreach动态变化。它只是一遍又一遍的模态。所以我在模式名称的末尾和url中连接了taskID，所以它会调用类似这样的东西：

<input type="button" class="btn btn-default" data-toggle="modal" data-target="#tips-@item.TaskID" value="Tips" />

div class="modal fade" id="tips-@item.TaskID" tabindex="-1" role="dialog" aria-labelledby="tipsLabel">

每个taskID都是唯一的，因此在foreach循环中它将不再相同。

因此，当HTML生成它时输出：

<input type="button" class="btn btn-default" data-toggle="modal" data-target="#instructions-10" value="Instructions">

<div class="modal fade" id="instructions-10" tabindex="-1" role="dialog" aria-labelledby="instructionsLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="instructionsLabel">Instructions</h4>
                                </div>
                                <div class="modal-body">
                                    <p>Placeholder text for isntructions or anything of that sort.</p>
                                    <textarea class="form-control" cols="20" id="item_CCInstruction" name="item.CCInstruction" rows="6" style="width: 80%;">Testing 2</textarea>
                                    <p>Placeholder text for isntructions or anything of that sort.</p>
                                    <textarea class="form-control" cols="20" id="item_EEInstruction" name="item.EEInstruction" rows="6" style="width: 80%;">Testing 2</textarea>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>

在asp.net mvc中显示带有foreach循环的模态

1 个答案: