3

ボタンを含む がありますGridViewTemplateFieldこのボタンは、以下に示すように別のウィンドウを含むモーダル ウィンドウを開きGridViewます。

のテンプレート フィールドGridview1:

<asp:TemplateField>
<ItemTemplate>
    <asp:Button ID="btnOpen" runat="server" Text="Show Gridview" OnClick="btnOpen_Click" data-toggle="modal" data-target="#myModal"/>
</ItemTemplate>

モーダル ウィンドウ:

<div class="modal" id="idModal">
        <div class="container">
            <div class="modal-header">
                <h1>Transaction Details<a class="close-modal" href="#">&times;</a></h1>
            </div>
            <div class="modal-body">
                <asp:GridView ID="gvDetail" runat="server" AutoGenerateColumns="false" DataSourceID="SqlgvDetail"
                OnRowDataBound="gvDetail_RowDataBound" CssClass="table table-hover table-bordered" EmptyDataText="No data to display.">
                    <Columns>
                        <asp:BoundField DataField="metalid" HeaderText="Metal ID"/>
                        <asp:BoundField DataField="enddate" HeaderText="End Date" DataFormatString="{0:dd-MM-yyyy}" />
                        <asp:BoundField DataField="startdate" HeaderText="Start Date" DataFormatString="{0:dd-MM-yyyy}" />
                        <asp:BoundField DataField="clientref" HeaderText="Client Ref" />
                        <asp:BoundField DataField="quantity" HeaderText="Quantity" DataFormatString="{0:N2}" />
                    </Columns>
                </asp:GridView>
            </div>
            <div class="modal-footer">
                <asp:Button ID="btn_close" runat="server" Text="OK" CssClass="close-modal btn-sm btn-primary"/>
            </div>
        </div>
    </div>
    <div class="modal-backdrop"></div>

GridView2SqlDataSource:

<asp:SqlDataSource ID="SqlgvDetail" runat="server" ConnectionString="<%$ ConnectionStrings:InventoryConnectionString %>"
    SelectCommand="SELECT td.metalid , td.enddate , td.startdate , td.clientref , td.quantity FROM trxdetail td">
</asp:SqlDataSource>

これで、このコードは正常に機能し、期待どおりにモーダル ウィンドウが開きますSelectCommand。ただし、GridView1 の行の値に基づいて where 句を追加する必要があります。例えば...WHERE td.clientref = GridView1.SelectedRow.Cells[0].Text

助けてください!

編集:モーダルウィンドウ:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <asp:GridView ID="gvDetail" runat="server" AutoGenerateColumns="false" DataSourceID="SqlgvDetail"
                    OnRowDataBound="gvDetail_RowDataBound" CssClass="table table-hover table-bordered" EmptyDataText="No data to display.">
                        <Columns>
                            <asp:BoundField DataField="metalid" HeaderText="Metal ID"/>
                            <asp:BoundField DataField="enddate" HeaderText="End Date" DataFormatString="{0:dd-MM-yyyy}" />
                            <asp:BoundField DataField="startdate" HeaderText="Start Date" DataFormatString="{0:dd-MM-yyyy}" />
                            <asp:BoundField DataField="clientref" HeaderText="Client Ref" />
                            <asp:BoundField DataField="quantity" HeaderText="Quantity" DataFormatString="{0:N2}" />
                        </Columns>
                    </asp:GridView>
                </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>

モーダル JS:

$(document).ready(function () {
        $("#btnOpen").click(function () {
            $("#myModal").modal();
        });
    });
4

1 に答える 1