javascript - 在 asp.net mvc 中使用 foreach 循环显示模态

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/@<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ff6ebfaf2b1ccfaebeaefd6dba0ebf6fba2dff6ebfaf2b1cbfeecf4d6db" rel="noreferrer noopener nofollow">[email protected]</a>'" />
                            <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 动态变化。只是一遍又一遍地使用相同的情态。因此，我将 taskID 连接到模式名称的末尾和 url 中，这样它就会调用如下所示的内容:

<input type="button" class="btn btn-default" data-toggle="modal" data-target="#<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d19041d1e402d0419080043390c1e062429" rel="noreferrer noopener nofollow">[email protected]</a>" value="Tips" />

div class="modal fade" id="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfabb6afacf29fb6abbab2f18bbeacb4969b" rel="noreferrer noopener nofollow">[email protected]</a>" tabindex="-1" role="dialog" aria-labelledby="tipsLabel">

每个任务 ID 都是唯一的，因此在 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>