Show Bootstrap Popup Modal from inside a Repeater in Asp.Net

Today ill show you how to add Bootstrap Popup Modal from inside a Repeater in Asp.Net.
I feel AJAX Popup Modal is too 'heavy'! so i have found a way to use Bootstrap Popup Modal instead. Hope you guys like it..!!

Add a Repeater control and bind it to a DataSource of your choice :

  <asp:Repeater ID="Repeater1" runat="server">
                                                            <ItemTemplate>
                                                                <tr>
                                                                    <td>
                                                                        <%#DataBinder.Eval(Container.DataItem, "SID")%>
                                                                    </td>
                                                                    <td>
                                                                        <b>Name : </b><%#DataBinder.Eval(Container.DataItem, "NAME")%>
                                                                        <br />
                                                                        <b>Contact : </b><%#DataBinder.Eval(Container.DataItem, "Country")%>
                                                                    </td>                                                                   
                                                                    <td>

                                " data-target in <a> should be same as the id of the popup modal"


                                                                          <a href="#" data-toggle="modal"  data-target="#<%#DataBinder.Eval(Container.DataItem, "SID")%>_modal"  data-animate-modal="jello">
                                                                          <i class="icon fa fa-fw ti-eye" aria-hidden="true"></i>
                                                                          View Info
                                                                         </a>

                                                                    </td>
                                                                </tr>
                                                            
 The Bootstrap Popup Modal : 

The id of the modal div is dynamic value, change it according to your requirement , I have added _modal at the end of the SID:


  <div id="<%#DataBinder.Eval(Container.DataItem, "SID")%>_modal" class="modal fade animated" role="dialog">
                                                                    <div class="modal-dialog">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <button type="button" class="close"
                                                                                    data-dismiss="modal">
                                                                                    &times;</button>
                                                                                <h4 class="modal-title">Sales Record</h4>
                                                                            </div>
                                                                            <div class="modal-body">                                                                                                            <div class="input-group">
                                                                                <span style="width: 165px" class="input-group-addon">Student ID</span>
                                                                                <input type="text" value='<%#Eval("SID") %>' class="form-control" id="Text1" runat="server">
  <div class="input-group">
                                                                                <span style="width: 165px" class="input-group-addon">Name</span>
                                                                                <input type="text" value='<%#Eval("NAME") %>' class="form-control" id="Text1" runat="server">
                                                                            </div>                                                                            </div>




                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                                                                    Close
                                              
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </ItemTemplate>
                                                        </asp:Repeater>

That' all guys.! Thank You. Happy Coding.......and smoking.. :)