Post
Ask Question
Tri Setia

Tri Setia

  • 1.3k
  • 464
  • 24.8k

How to populate data from Repeater to modal bootstrap in asp.net

Mar 3 2021 4:56 AM
I will bind data from Repeater1 to modal. If user click LinkButton1 on Repeater1 I want the data populate to modal, but l’m din’t get the data although the modal is showing.
  1. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">  
  2. <!—This is the my Repeater1-->  
  3. <asp:Repeater ID="Repeater1" runat="server">  
  4.         <HeaderTemplate>  
  5.             <table id="myTable" class="table table-hover table-responsive table-borderless">  
  6.                 <thead class="table table-dark">  
  7.                     <tr class="text-center">  
  8.                         <th>Nomer ID</th>  
  9.                         <th>Tanggal Muat</th>  
  10.                         <th>Nama Driver</th>  
  11.                         <th>Nomer Lambung</th>  
  12.                         <th>Nomer DO</th>  
  13.                         <th>Jumlah Tonase Pengiriman</th>  
  14.                         <th>Tanggal Timbang Diport</th>  
  15.                         <th>Jumlah Tonase Penerimaan</th>  
  16.                         <th>Nomer CRF</th>  
  17.                         <th>Ngesub Ke Tambang</th>  
  18.                         <th>Selisih</th>  
  19.                         <th>Persentase</th>  
  20.                         <th>Pinalti</th>  
  21.                         <th>Keterangan</th>  
  22.                         <th>#</th>  
  23.                     </tr>  
  24.                 </thead>  
  25.                 <tbody>  
  26.         </HeaderTemplate>  
  27.         <ItemTemplate>  
  28.             <tr class="text-center">  
  29.                 <td>  
  30.                     <asp:Label ID="Label1" runat="server" Text='<%#Eval("no_id")%>'></asp:Label>  
  31.                 </td>  
  32.                 <td>  
  33.                     <%#Eval("tgl_muat", "{0: dd/MM/yyyy}")%>  
  34.                 </td>  
  35.                 <td>  
  36.                     <%#Eval("nama_driver")%>  
  37.                 </td>  
  38.                 <td>  
  39.                     <%#Eval("no_lambung")%>  
  40.                 </td>  
  41.                 <td>  
  42.                     <%#Eval("no_do")%>  
  43.                 </td>  
  44.                 <td>  
  45.                     <%#Eval("tonase_pengiriman")%>  
  46.                 </td>  
  47.                 <td>  
  48.                     <%#Eval("tgl_timbang_diport", "{0: dd/MM/yyyy}")%>  
  49.                 </td>  
  50.                 <td>  
  51.                     <%#Eval("tonase_penerimaan")%>  
  52.                 </td>  
  53.                 <td>  
  54.                     <%#Eval("no_crf")%>  
  55.                 </td>  
  56.                 <td>  
  57.                     <%#Eval("ngesub_ke_tambang")%>  
  58.                 </td>  
  59.                 <td>  
  60.                     <%#Eval("selisih")%>  
  61.                 </td>  
  62.                 <td>  
  63.                     <%#Eval("persentase") %>  
  64.                 </td>  
  65.                 <td>  
  66.                     <%#Eval("pinalti")%>  
  67.                 </td>  
  68.                 <td>  
  69.                     <%#Eval("keterangan")%>  
  70.                 </td>  
  71.                 <td>  
  72.                     <asp:LinkButton ID="LinkButton1" OnClick="LinkButton1_Click" data-toggle="modal" data-target="#ModalDetilData" data-backdrop="static" class="fa fa-edit btn btn-warning btn-sm" runat="server"> Detail</asp:LinkButton>  
  73.                 </td>  
  74.             </tr>  
  75.         </ItemTemplate>  
  76.         <FooterTemplate>  
  77.             </tbody> </table>  
  78.         </FooterTemplate>  
  79.     </asp:Repeater>  
  80. <!—This is the modal -->  
  81. <!-- Start The Modal DetaiDataCoal -->  
  82.     <div id="ModalDetilData" class="modal fade" data-keyboard="false" >  
  83.         <div class="modal-dialog modal-lg">  
  84.             <div class="modal-content">  
  85.                 <!-- Modal Header -->  
  86.                 <div class="modal-header bg bg-blue">  
  87.                     <div align="center">  
  88.                         <h4 class="modal-title">Detail Data Coal</h4>  
  89.                     </div>  
  90.                     <button type="button" class="close" data-dismiss="modal">  
  91.                         ×</button>  
  92.                 </div>  
  93.                 <!-- Modal body -->  
  94.                 <div class="modal-body">  
  95.                     <div class="row">  
  96.                         <div class="col-md-12">  
  97.                             <div class="card">  
  98.                                 <div class="card-body">  
  99.                                     <div class="row">  
  100.                                         <div class="col-md-6">  
  101.                                             <div class="form-group">  
  102.                                                 <label for="NoID">  
  103.                                                     Nomer ID</label>  
  104.                                                 <asp:TextBox ID="txtNoID" runat="server" CssClass="form-control"  
  105.                                                     placeholder=""></asp:TextBox>  
  106.                                             </div>  
  107.                                         </div>  
  108.                                         <div class="col-md-6">  
  109.                                             <div class="form-group">  
  110.                                                 <label for="UserName">  
  111.                                                     Tanggal Muat</label>  
  112.                                                 <asp:TextBox ID="txtDetailTanggalMuat" runat="server" CssClass="form-control"  
  113.                                                     placeholder=" Enter Tanggal Muat Dari Tambang"></asp:TextBox>  
  114.                                             </div>  
  115.                                         </div>  
  116.                                         <div class="col-md-6">  
  117.                                             <div class="form-group">  
  118.                                                 <label for="Password">  
  119.                                                     Nama Driver</label>  
  120.                                                 <asp:TextBox ID="txtDetilDataNamaDriver"  runat="server" CssClass="form-control" placeholder="Enter Nama Driver"></asp:TextBox>  
  121.                                             </div>  
  122.                                         </div>  
  123.                                         <div class="col-md-6">  
  124.                                             <div class="form-group">  
  125.                                                 <label for="UserName">  
  126.                                                     Nomer Lambung</label>  
  127.                                                 <asp:TextBox ID="txtDetilDataNomerLambung"  runat="server" CssClass="form-control" placeholder="Enter Nomer Lambung"></asp:TextBox>  
  128.                                             </div>  
  129.                                         </div>  
  130.                                         <div class="col-md-6">  
  131.                                             <div class="form-group">  
  132.                                                 <label for="Password">  
  133.                                                     Nomer DO</label>  
  134.                                                 <asp:TextBox ID="txtDetilDataNomerDO"  runat="server" CssClass="form-control" placeholder="Enter Nomer DO"></asp:TextBox>  
  135.                                             </div>  
  136.                                         </div>  
  137.                                         <div class="col-md-6">  
  138.                                             <div class="form-group">  
  139.                                                 <label for="UserName">  
  140.                                                     Jumlah Tonase Pengiriman</label>  
  141.                                                 <asp:TextBox ID="txtDetilDataJumlahTonasePengiriman"  runat="server" CssClass="form-control"  
  142.                                                     placeholder="Enter Jumlah Tonase Pengiriman"></asp:TextBox>  
  143.                                             </div>  
  144.                                         </div>  
  145.                                         <div class="col-md-6">  
  146.                                             <div class="form-group">  
  147.                                                 <label for="Password">  
  148.                                                     Tanggal Timbang Diport</label>  
  149.                                                 <asp:TextBox ID="txtDetailTanggalTimbangDiport"  runat="server" CssClass="form-control"  
  150.                                                     placeholder="Enter Tanggal Timbang Diport"></asp:TextBox>  
  151.                                             </div>  
  152.                                         </div>  
  153.                                         <div class="col-md-6">  
  154.                                             <div class="form-group">  
  155.                                                 <label for="UserName">  
  156.                                                     Jumlah Tonase Penerimaan</label>  
  157.                                                 <asp:TextBox ID="txtDetilDataJumlahTonasePenerimaan"  runat="server" CssClass="form-control"  
  158.                                                     placeholder="Enter Jumlah Tonase Penerimaan"></asp:TextBox>  
  159.                                             </div>  
  160.                                         </div>  
  161.                                         <div class="col-md-6">  
  162.                                             <div class="form-group">  
  163.                                                 <label for="Password">  
  164.                                                     Nomer CRF</label>  
  165.                                                 <asp:TextBox ID="txtDetilDataNomerCRF"  runat="server" CssClass="form-control" placeholder="Enter Nomer CRF"></asp:TextBox>  
  166.                                             </div>  
  167.                                         </div>  
  168.                                         <div class="col-md-6">  
  169.                                             <div class="form-group">  
  170.                                                 <label for="Password">  
  171.                                                     Ngesub Ke Tambang</label>  
  172.                                                 <asp:TextBox ID="txtDetilDataNgesubKeTambang"  runat="server" CssClass="form-control" placeholder="Enter Ngesub Ke Tambang"></asp:TextBox>  
  173.                                             </div>  
  174.                                         </div>  
  175.                                         <div class="col-md-6">  
  176.                                             <div class="form-group">  
  177.                                                 <label for="UserName">  
  178.                                                     Selisih</label>  
  179.                                                 <asp:TextBox ID="txtDetilDataSelisih"  runat="server" CssClass="form-control" placeholder="Enter Selisih"></asp:TextBox>  
  180.                                             </div>  
  181.                                         </div>  
  182.                                         <div class="col-md-6">  
  183.                                             <div class="form-group">  
  184.                                                 <label for="Password">  
  185.                                                     Persentase</label>  
  186.                                                 <asp:TextBox ID="txtDetilDataPersentase"  runat="server" CssClass="form-control" placeholder="Enter Persentase"></asp:TextBox>  
  187.                                             </div>  
  188.                                         </div>  
  189.                                         <div class="col-md-6">  
  190.                                             <div class="form-group">  
  191.                                                 <label for="UserName">  
  192.                                                     Pinalti</label>  
  193.                                                 <asp:TextBox ID="txtDetilDataPinalti"  runat="server" CssClass="form-control" placeholder="Enter Pinalti"></asp:TextBox>  
  194.                                             </div>  
  195.                                         </div>  
  196.                                         <div class="col-md-12">  
  197.                                             <div class="form-group">  
  198.                                                 <label for="Password">  
  199.                                                     Keterangan</label>  
  200.                                                 <asp:TextBox ID="txtDetilDataKeterangan"  TextMode="MultiLine" Height="150px" runat="server" CssClass="form-control" placeholder="Enter Keterangan"></asp:TextBox>  
  201.                                             </div>  
  202.                                         </div>  
  203.                                         <div class="col-md-6">  
  204.                                             <div class="form-group">  
  205.                                                 <div align="center">  
  206.                                                     <asp:Button ID="btnUpdateDataCoal" CssClass="btn btn-success btn-block" runat="server" Text="Update Data" OnClick="btnUpdateDataCoal_Click" />  
  207.                                                 </div>  
  208.                                             </div>  
  209.                                         </div>  
  210.                                         <div class="col-md-6">  
  211.                                             <div class="form-group">  
  212.                                                 <div align="center">  
  213.                                                     <asp:Button ID="btnDeleteData" CssClass="btn btn-danger btn-block" runat="server" Text="Delete Data" OnClick="btnDeleteData_Click" />  
  214.                                                 </div>  
  215.                                             </div>  
  216.                                         </div>  
  217.                                     </div>  
  218.                                 </div>  
  219.                             </div>  
  220.                         </div>  
  221.                     </div>  
  222.                 </div>  
  223.             </div>  
  224.         </div>  
  225.     </div>  
  226.     <!-- End The Modal DetaiDataCoal -->  
  227. </asp:Content>  
  1. <!-- This is method for show data on the Repeater1 -->  
  2. public void ShowData()  
  3. {  
  4.     using (SqlConnection con = new SqlConnection(koneksi))  
  5.     {  
  6.         using (SqlCommand sqlcmd = new SqlCommand())  
  7.         {  
  8.             con.Open();  
  9.             sqlcmd.Connection = con;  
  10.             sqlcmd.CommandType = CommandType.Text;  
  11.             sqlcmd.CommandText = "Select * From dbo.tbl_coal";  
  12.             SqlDataAdapter adp = new SqlDataAdapter(sqlcmd);  
  13.             DataTable dt = new DataTable();  
  14.             adp.Fill(dt);  
  15.             Repeater1.DataSource = dt;  
  16.             Repeater1.DataBind();  
  17.             con.Close();  
  18.         }  
  19.     }  
  20. }  
  21. <!-- This is method for bind data from Repeater1 to Modal-->  
  22. protected void LinkButton1_Click(object sender, EventArgs e)  
  23. {  
  24.     RepeaterItem item = (sender as LinkButton).Parent as RepeaterItem;  
  25.     int Id = Convert.ToInt32((item.FindControl("Label1") as System.Web.UI.WebControls.Label).Text);  
  26.     using (SqlConnection con = new SqlConnection(koneksi))  
  27.     {  
  28.         using (SqlCommand sqlcmd = new SqlCommand("SPGetByID"))  
  29.         {  
  30.             con.Open();  
  31.             sqlcmd.Connection = con;  
  32.             sqlcmd.CommandType = CommandType.StoredProcedure;  
  33.             SqlDataAdapter adp = new SqlDataAdapter(sqlcmd);  
  34.             SqlParameter param = new SqlParameter("@no_id", Id);  
  35.             sqlcmd.Parameters.Add(param);  
  36.             using (SqlDataReader rdr = sqlcmd.ExecuteReader())  
  37.             {  
  38.                 while (rdr.Read())  
  39.                 {  
  40.                     txtNoID.Text = rdr["no_id"].ToString();  
  41.                     txtDetailTanggalMuat.Text = rdr["tgl_muat"].ToString();  
  42.                     txtDetilDataNamaDriver.Text = rdr["nama_driver"].ToString();  
  43.                     txtDetilDataNomerLambung.Text = rdr["no_lambung"].ToString();  
  44.                     txtDetilDataNomerDO.Text = rdr["no_do"].ToString();  
  45.                     txtDetilDataJumlahTonasePengiriman.Text = rdr["tonase_pengiriman"].ToString();  
  46.                     txtDetailTanggalTimbangDiport.Text = rdr["tgl_timbang_diport"].ToString();  
  47.                     txtDetilDataJumlahTonasePenerimaan.Text = rdr["tonase_penerimaan"].ToString();  
  48.                     txtDetilDataNomerCRF.Text = rdr["no_crf"].ToString();  
  49.                     txtDetilDataNgesubKeTambang.Text = rdr["ngesub_ke_tambang"].ToString();  
  50.                     txtDetilDataSelisih.Text = rdr["selisih"].ToString();  
  51.                     txtDetilDataPersentase.Text = rdr["persentase"].ToString();  
  52.                     txtDetilDataPinalti.Text = rdr["pinalti"].ToString();  
  53.                     txtDetilDataKeterangan.Text = rdr["keterangan"].ToString();  
  54.                 }  
  55.             }  
  56.             con.Close();  
  57.         }  
  58.     }  
  59. }  
Any help could be appreciated

Answers (3)