GridView - Клиентское предложение "ГДЕ" в SqlDataSource?

Question

У меня есть GridView с TemplateField содержащий кнопку. Эта кнопка открывает модальное окно, которое содержит другое 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>

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>

Теперь этот код работает нормально и открывает модальное окно с SelectCommand как и ожидалось. Однако мне нужно добавить предложение where на основе значения строки из GridView1. Например ...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();
        });
    });

Answer 1

Вы можете на самом деле установить <asp:ControlParameter> в SelectedValue GridView. Я думаю, это то, что вы ищете. Как сказано в документации:

В качестве дальнейшего ярлыка вы можете непосредственно определить значение ключа данных первого ключевого поля выбранной строки, используя свойство SelectedValue.

Так что вы можете сделать, это установить DataKeyNames значение GridView1, равное любому значению, которое вы хотите использовать в предложении 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();
}