javascript - Display modal with a foreach loop in asp.net mvc -
i have table created using foreach. half of table foreach display values 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 , 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">×</span></button> <h4 class="modal-title" id="instructionslabel">instructions</h4> </div> <div class="modal-body"> <p>placeholder text isntructions or of sort.</p> @html.textareafor(modelitem => item.ccinstruction, new {@class = "form-control", @rows = "6", @style = "width: 80%;"}) <p>placeholder text isntructions or of 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 model. since code in foreach loop shouldn't these display each 1 when clicks instructions button?
so noticed was calling same modal each time because modal id wasn't dynamically changing foreach. same modal on , over. concatenated taskid on end of modal name , in url call 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 unique won't same ever in foreach loop.
so when html generates 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 isntructions or of 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 isntructions or of 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>
Comments
Post a Comment