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

Question

I have a table that is created using a foreach. This is half of the table with the foreach to display the values from the database.

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

That foreach displays each input available in the model. Since the code is in the foreach loop shouldn't these display each one when someone clicks the instructions button?

Answer 1

So what I noticed was that I was basically calling the same modal each time because the modal id wasn't dynamically changing with the foreach. It was just the same modal over and over. So I concatenated the taskID on the end of the modal name and in the url so it would call something like this:

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

Each taskID is unique so it won't be the same ever in the foreach loop.

So when the HTML generates it output this:

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