单击Gridview Row上的任意位置以使用Javascript在文本框中显示值

Question

我无法在文本框中显示gridview行值。我用C＃完成了这个，但我不想要回发和更新面板。我想用Jquery函数完成它。它听起来仍然很容易，但复杂的部分是，我使用2个面板，1个有文本框，另一个有网格。单击行上的任何位置应显示另一个面板中文本框中的行项（CustomerId可能是线索），将面板隐藏在网格中。代码在下面..

`<asp:Panel ID="Panel1" runat="server" DefaultButton="btnSave">
<table>
    <tr>
        <td>
            <asp:Label ID="lblFname" runat="server" Text="First Name:"></asp:Label></td>
        <td>
            <asp:TextBox ID="txtFname" runat="server"></asp:TextBox></td>

    </tr>
    <tr>
        <td>
            <asp:Label ID="lblLname" runat="server" Text="Last Name:"></asp:Label></td>
        <td>
            <asp:TextBox ID="txtLname" runat="server"></asp:TextBox></td>

    </tr>
    <tr>
        <td>
            <asp:Label ID="lblDesignation" runat="server" Text="Designation:"></asp:Label></td>
        <td>
            <asp:TextBox ID="txtDesignation" runat="server"></asp:TextBox></td>

    </tr>

    <tr>
        <td>
        </td>
        <td> <asp:Button ID="btnSave" runat="server" Text="Save" Width="54px" ValidationGroup="Master" BackColor="Silver" />
            <asp:Button ID="btnDelete" runat="server" Text="Delete" Width="57px" BackColor="Silver" />
            <asp:Button ID="btnFind" runat="server" Text="Find" Width="54px" OnClick="btnFind_Click" BackColor="Silver" />
        </td>
    </tr>
</table>
        </asp:Panel>`

<asp:Panel ID="Panel2" runat="server">
        <table>
            <tr>
                <td>
        <asp:GridView ID="GridView1" runat="server" style="margin-top: 0px" AutoGenerateColumns="False" CellSpacing="5" CellPadding="3" OnRowCommand="GridView1_RowCommand">
            <Columns>
    <asp:TemplateField HeaderText="First Name" HeaderStyle-Width="150px"> 
           <ItemTemplate>
                 <asp:LinkButton ID="LinkButton1" runat="server" CommandName ="FirstName" Text='<%#Eval("FirstName") %>'  CommandArgument='<%#Eval("CustomerId") %>'  OnClientClick='<%#Eval("CustomerId","javascript:return sel({0});")%>'/>
           </ItemTemplate></asp:TemplateField>
                         <asp:TemplateField HeaderText="Last Name" HeaderStyle-Width="150px">
                             <ItemTemplate>
                 <asp:LinkButton ID="LinkButton2" runat="server" CommandName ="LastName" Text='<%#Eval("LastName") %>'  CommandArgument='<%#Eval("CustomerId") %>'/>
           </ItemTemplate>
                         </asp:TemplateField>
                         <asp:TemplateField HeaderText="Designation" HeaderStyle-Width="150px">
                             <ItemTemplate>
                 <asp:LinkButton ID="LinkButton3" runat="server" CommandName ="Designation" Text='<%#Eval("Designation") %>'  CommandArgument='<%#Eval("CustomerId") %>'/>
           </ItemTemplate>
                         </asp:TemplateField> </Columns>
            <HeaderStyle BackColor="#CCCCCC" BorderColor="Black" />

        </asp:GridView>
               </td>
                     </tr>
            <tr>
                <td> <asp:Button ID="btnBack" runat="server" Text="Back" OnClientClick="JavaScript: window.history.back(1); return false;" /> </td>
            </tr>
       </table>
       </asp:Panel>

安德烈，检查我的最后一次尝试！

`<script type="text/javascript">
    $(function sel() {
        $('#<%=GridView1.ClientID%> td').click(function () {
            $('#<%=txtFname.ClientID%>').val($(".FirstName", $(this).closest("tr")).html());
            $('#<%=txtLname.ClientID%>').val($(".LastName", $(this).closest("tr")).html());
            $('#<%=txtDesignation.ClientID%>').val($(".Designation", $(this).closest("tr")).html());                
            <%--{document.getElementById("btnBack").style.display="none";}
        $('#<%=Panel2.ClientID %>').toggle()--%>
            return false;
        });

    });`

我继续努力，取得了一些成功！我通过使用linkbutton的onClientClick属性获得了customerID。现在我试图通过AjaxCall调用webmethod（该方法用文本框填充行值w.r.t到customerID）。

 <script type="text/javascript">  
    function select(CustomerId)
    {
        var id = CustomerId;
        var Panel1 = document.getElementById("Panel1");
        var Panel2 = document.getElementById("Panel2");
        $.ajax({
            type: "POST",
            url: "AjaxPost.aspx/Select",
            data: '{"id": ' + id + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                Panel2.style.display == "none";
                Panel1.style.display == "block"
            },
            error: function (err) {
                alert("Error");   
            }
        });
        //alert(CustomerId);
        return false;
    }

这就是我获取ID的方式

<ItemTemplate>
                 <asp:LinkButton ID="LinkButton1" runat="server" CommandName ="FirstName" Text='<%#Eval("FirstName") %>' OnClientClick='<%#Eval("CustomerId","javascript:return select({0});")%>'/>
           </ItemTemplate>