GridView利用TempleteField中的LinkButton加JavaScript，達到點選Row任何位置就可選擇Row

时间：2021-08-23 18:26:17

緣起

承接上一篇【如何透過JavaScript來觸發LinkButton的PostBack，呼叫後端的程式】，這一篇就利用那個技巧，來實現在GridView中，點選Row的任一位置，就可以選擇該Row。

範例：北風的Employees與Orders

我們利用北風資料庫中的Employees與Orders這兩個資料表，來當作我們的範例，透過兩個GridView，第一個GridView顯示所有的Empolyees資料，而點選其中的一個Employee，就在第二個GridView顯示該Employee所有的訂單，這部分透過拖拉放的方式，不用寫任何程式即可達成。(拖拉放的過程，類似這一篇的錄影教學：GridView展現Master-Detail的幾種方式(包含動態錄影教學))而我們先在第一個GridView(Employees)裡面，安排一個TempleteField，然後裡面安排一個LinkButton，並且設定該LinkButton的CommandName為Select。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"
    EmptyDataText="沒有資料錄可顯示。">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select">選擇</asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" ReadOnly="True"
            SortExpression="EmployeeID" />
        <asp:BoundField DataField="LastName" HeaderText="LastName"
            SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
            SortExpression="FirstName" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
    ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
    SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [Region], [PostalCode], [Country], [HomePhone], [Extension], [Photo], [Notes], [ReportsTo], [PhotoPath] FROM [Employees]" >
</asp:SqlDataSource>

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
    DataKeyNames="OrderID" DataSourceID="SqlDataSource2" EmptyDataText="沒有資料錄可顯示。">
    <Columns>
        <asp:BoundField DataField="OrderID" HeaderText="OrderID" InsertVisible="False"
            ReadOnly="True" SortExpression="OrderID" />
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"
            SortExpression="CustomerID" />
        <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"
            SortExpression="EmployeeID" />
        <asp:BoundField DataField="OrderDate" HeaderText="OrderDate"
            SortExpression="OrderDate" />
        <asp:BoundField DataField="RequiredDate" HeaderText="RequiredDate"
            SortExpression="RequiredDate" />
        <asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate"
            SortExpression="ShippedDate" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
    ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
    SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate], [RequiredDate], [ShippedDate] FROM [Orders] WHERE ([EmployeeID] = @EmployeeID)" >
    <SelectParameters>
        <asp:ControlParameter ControlID="GridView1" Name="EmployeeID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>

觀察HTML原始碼

以上的操作過程並不特別困難。然後我們去觀察一下他在瀏覽器上的HTML與JavaScript的原始碼

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

    <td>
                <a id="GridView1_ctl02_LinkButton1" href="javascript:__doPostBack('GridView1$ctl02$LinkButton1','')">選擇</a>
            </td><td>1</td><td>Davolio</td><td>Nancy</td>
</tr><tr>
    <td>
                <a id="GridView1_ctl03_LinkButton1" href="javascript:__doPostBack('GridView1$ctl03$LinkButton1','')">選擇</a>
            </td><td>2</td><td>Fuller</td><td>Andrew</td>
</tr><tr>
    <td>
                <a id="GridView1_ctl04_LinkButton1" href="javascript:__doPostBack('GridView1$ctl04$LinkButton1','')">選擇</a>
            </td><td>3</td><td>Leverling</td><td>Janet</td>
</tr><tr>
    <td>
                <a id="GridView1_ctl05_LinkButton1" href="javascript:__doPostBack('GridView1$ctl05$LinkButton1','')">選擇</a>
            </td><td>4</td><td>Peacock</td><td>Margaret</td>
</tr><tr>
    <td>

可以觀察到

  1. GridView產生的HTML是一個<table></table>
  2. LinkButton所產生的<a>透過呼叫【javascript:__doPostBack('GridView1$ctl02$LinkButton1','')】來觸發PostBack產生Select的動作，並且觸發後端的RowSelecting,RowSelected等事件。
  3. JavaScript所傳遞的參數，剛好就是該<a>的id，也就是該LinkButton的ClientId，不過不同的是，ClientID用底線【_】，在參數中確是用【$】

有了以上的觀察，我們就可以利用這樣個結果，如果我們讓GridView的每一個Row(Client端是<Tr>)可以有個JavaScript的【Click事件】，並且做LinkButton一樣的事情，這樣就可以讓該Row的任一位置都有選擇的功能了。

RowDataBound加上JavaScript控制

有了以上的觀察，我們就可以在GridView1的RowDataBound的事件中，加上需要的JavaScript控制。

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
    '判斷資料列才做事情
    If e.Row.RowType = DataControlRowType.DataRow Then
        '取得LinkButton物件
        Dim lb As LinkButton = e.Row.Cells(0).FindControl("LinkButton1")

        '判斷有取得物件，才做是情
        If lb IsNot Nothing Then

            '取得LinkButton的ClientID
            Dim lbClientId As String = lb.ClientID

            '將底線【_】置換為【$】
            lbClientId = Replace(lbClientId, "_", "$")

            '設定要加上的JavaScript
            Dim tScript As String = ""
            tScript = "__doPostBack('" + lbClientId + "','')"

            '把JavaScript加在Row的【onclick】屬性裡面
            e.Row.Attributes.Add("onclick", tScript)

            '增加變換手指游標，以及背景顏色
            e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.backgroundColor='yellow';")
            e.Row.Attributes.Add("onmouseout", "this.style.cursor='';this.style.backgroundColor='';")
        End If
    End If
End Sub

讓【選擇】消失

運作看看，果然是可以了。不過，還有個問題，如果想要讓LinkButton那個【選擇】的字不見，怎麼做??這個當然不能把LinkButton刪除掉，因為我們主要還是透過LinkButton來達到這樣的效果，方式很簡單，讓LinkButton的【選擇】變成空白即可。

<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select"> </asp:LinkButton>

那麼如果連那個欄位(看起來空的TempleteField)也不要呢，也可以，首先要挑選其中一個欄位轉為TempleteField，例如我選擇EmployeeID，然後把剛剛的LinkButton剪下→貼上到EmployeeID裡面的ItemTemplete就可以囉

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"
    EmptyDataText="沒有資料錄可顯示。">
    <Columns>
        <asp:TemplateField HeaderText="EmployeeID" SortExpression="EmployeeID">
            <EditItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("EmployeeID") %>'></asp:Label>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("EmployeeID") %>'></asp:Label>
                <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select"> </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
            SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
            SortExpression="FirstName" />
    </Columns>
</asp:GridView>

這樣的技巧，其實可以運用在很多地方，讓我們的程式可以設計的更靈活些。提供大家參考

後記補充：

感謝TerryChen大大的指導，提出不同的做法，小喵研究了一下。如果將GridView不使用Templete，但是務必勾選【樞紐分析選取模式】，此時會在GridView裡面多了一個CommandField，裡面會有選取的命令。如果以後不想看到這個選取，可以設定他為不顯示。所以GridView的內容如下：

view plain copy to clipboard print
  1. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
  2.     DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" 
  3.     EmptyDataText="沒有資料錄可顯示。"> 
  4.     <Columns> 
  5.         <asp:CommandField ShowSelectButton="True" Visible="False" /> 
  6.         <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" ReadOnly="True" 
  7.             SortExpression="EmployeeID" /> 
  8.         <asp:BoundField DataField="LastName" HeaderText="LastName" 
  9.             SortExpression="LastName" /> 
  10.         <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
  11.             SortExpression="FirstName" /> 
  12.     </Columns> 
  13. </asp:GridView> 

這時候在GridView的RowDataBound事件中，加入如下

view plain copy to clipboard print
  1. Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound  
  2.     If e.Row.RowType = DataControlRowType.DataRow Then 
  3.         Dim tScript As String = "" 
  4.         '透過GetPostBackClientHyperlink產生PostBack的JavaScript  
  5.         tScript = ClientScript.GetPostBackClientHyperlink(Me.GridView1, "Select$" + e.Row.RowIndex.ToString())  
  6.         '加入PostBack的JavaScript  
  7.         e.Row.Attributes.Add("onclick", tScript)  
  8.         '設定游標為手  
  9.         e.Row.Style("cursor") = "hand" 
  10.         '增加變換背景顏色  
  11.         e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='yellow';")  
  12.         e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='';")  
  13.     End If 
  14. End Sub 

這樣就可以獲得一樣的效果。這邊發現，主要是透過內建的CommandField，他其實也是類似LinkButton的模式，產生PostBack的語法。而透過這樣的練習讓小喵發覺，正確的去產生PostBack的JavaScript，應該要透過【ClientScript.GetPostBackHyperlink】來產生比較恰當。

因此，小喵的程式，也修正了一下，讓ClientScript.GetPostBackHyperlink來產生Script，而不是強制的產生…修改結果如下：

view plain copy to clipboard print
  1. Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound  
  2.     '判斷資料列才做事情  
  3.     If e.Row.RowType = DataControlRowType.DataRow Then 
  4.         '取得LinkButton物件  
  5.         Dim lb As LinkButton = e.Row.Cells(0).FindControl("LinkButton1")  
  6.  
  7.         '判斷有取得物件，才做是情  
  8.         If lb IsNot Nothing Then 
  9.             '設定要加上的JavaScript  
  10.             Dim tScript As String = "" 
  11.             tScript = Page.ClientScript.GetPostBackClientHyperlink(lb, "")  
  12.  
  13.             '把JavaScript加在Row的【onclick】屬性裡面  
  14.             e.Row.Attributes.Add("onclick", tScript)  
  15.  
  16.             '增加變換手指游標，以及背景顏色  
  17.             e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.backgroundColor='yellow';")  
  18.             e.Row.Attributes.Add("onmouseout", "this.style.cursor='';this.style.backgroundColor='';")  
  19.         End If 
  20.     End If 
  21. End Sub 

标签：

相关文章