Wednesday 22 July 2015

Accordion in Web Form

Accordion ini kalo dalam pikiran ku sih kayak drop downlist lah simple nya.
Jadi kalo kita click button tertentu, akan muncul informasi tambahan di bawah nya.
terserah sih mau dibuat dimana, hehehe...

Kira-kira seperti ini tampilan nya.

Jadi pada saat User click Waktu Tunggu maka akan muncul CheckBoxList seperti pada gambar di atas.

 @{string id_pertanyaan = "";
        int step = 0;
    }
   @using (Html.BeginForm("InsertTransaksi", "T_Transaksi", FormMethod.Post))
    {

    foreach (System.Data.DataRow item in Model)
    {
        step = step + 1;
        id_pertanyaan = Html.Encode(item[0]);
        <div class="accordion" id="accordion2">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_@step">
                        <table class="table1" align="center">
                            <tr>
                                <td>

                                    <div class="ukuranfont"><button id="btnPertanyaan" class="paddingClass" name="pilihPertanyaan" value="@Html.Encode(item[0])" style="margin-right:40px; margin-bottom:10px;width:450px; border-radius:8px; border-width:3px; border-color:blueviolet" onclick="">@Html.Encode(item[1])</button></div>


                                </td>
                            </tr>
                        </table>
                    </a>
                </div>
                <div id="collapse_@step" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <table class="table1" align="center">
                            <tr>
                              
                                <td>
                                    @{
                                        WebAppSatisfactionOfCustomers.Models.Detail_Pertanyaan dp = new WebAppSatisfactionOfCustomers.Models.Detail_Pertanyaan();
                                        System.Data.DataSet dsDetailPertanyaan = new System.Data.DataSet();
                                        System.Data.DataTable dtDetailPertanyaan = new System.Data.DataTable();

                                        dsDetailPertanyaan = dp.GetDataBYIdPertanyaan(id_pertanyaan);
                                        dtDetailPertanyaan = dsDetailPertanyaan.Tables[0];
                                        string sDetailPertanyaan = "";
                                        string IdDetail = "";
                                        foreach (System.Data.DataRow drDetailPertanyaan in dtDetailPertanyaan.Rows)
                                        {
                                            sDetailPertanyaan = drDetailPertanyaan["nama_detail_pertanyaan"].ToString();
                                            IdDetail = drDetailPertanyaan["id_detail_pertanyaan"].ToString();
                                            <div class="styleFont"><input id="chkDetailPertanyaan" name="chkDetailPertanyaan" type="checkbox" value="@IdDetail" style="margin-right:20px; margin-bottom:6px" />@sDetailPertanyaan</div>
                                        }
                                    }
                                  

                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

        </div>


Semoga bermanfaat :)




No comments:

Post a Comment