3

I have a GridView with a TemplateField containing a button. This button opens up a modal window which contains another GridView as seen below:

Template Field in Gridview1:

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

Modal Window:

<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>

GridView2 SqlDataSource:

<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>

Now this code works fine and opens up the modal window with the SelectCommand as expected. However, I need to add a where clause based on a row value from GridView1. E.g. ...WHERE td.clientref = GridView1.SelectedRow.Cells[0].Text

Help please!

Edit: Modal Window:

<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>

Modal JS:

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

1 回答 1

1

您实际上可以将 an 设置为 GridView<asp:ControlParameter>的SelectedValue。我想这就是你要找的。正如文档所说：

作为更进一步的快捷方式，您可以使用 SelectedValue 属性直接确定所选行的第一个键字段的数据键值。

因此，您可以将DataKeyNamesGridView1 上的值设置为您想在 WHERE 子句中使用的任何值。

<asp:GridView ID="GridView1" runat="server" DataKeyNames="clientref"
    ...
</asp:GridView>

然后将其设置为 SqlDataSource 中的控制参数。

<asp:SqlDataSource ID="SqlgvDetail" runat="server"
    ConnectionString="<%$ ConnectionStrings:InventoryConnectionString %>"
    SelectCommand="SELECT td.metalid, td.enddate, td.startdate, td.clientref , td.quantity 
                   FROM trxdetail td
                   WHERE clientref=@clientref">
    <SelectParameters>
        <asp:ControlParameter ControlID="GridView1"
            PropertyName="SelectedValue"
            Name="clientref"
            Type="Whatever type clientref is" />
    </SelectParameters>
</asp:SqlDataSource>

请记住，您需要确保 GridView1 中的行实际上被标记为 SelectedRow。您可以在按钮单击事件中执行此操作。

protected void btnOpen_Click(object sender, EventArgs e)
{
    // Find the index to select
    Button btnOpen = (Button)sender;
    GridViewRow row = (GridViewRow)btnOpen.NamingContainer;
    int selectedIndex = row.DataItemIndex;

    // Set the selected index of the GridView
    GridView1.SelectedIndex = selectedIndex;

    // Bind the detail GridView now that the row is selected so 
    // that its SqlDataSource can get a SelectedValue for the
    // parent GridView
    gvDetail.DataBind();
}
于 2016-05-05T13:19:11.570 回答