vb.net 中带有 RadioButtonList 控件的嵌套 GridView

Question

我有 2 个带有单选按钮列表控件的 GridView。第一个网格视图的单选按钮列表具有是、否、不适用等列表项。单击“否”列表项时，应显示嵌套的网格视图及其关联的单选按钮。

当页面加载时，我可以看到所有网格视图及其关联的单选按钮，但当单击“否”单选按钮时，gridview2 不会显示和隐藏。我为该功能使用了 javascript，但没有按预期工作。我正在提供我的 vb.net 代码和 aspx 代码。任何帮助表示赞赏。

Vb.net 代码

公共类_默认

Inherits Page

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

    If Not IsPostBack Then

        GridView1.DataSource = GetData("select * from Questions")

        GridView1.DataBind()


    End If

End Sub

Private Shared Function GetData(query As String) As DataTable

    Dim strConnString As String = ConfigurationManager.ConnectionStrings("String").ConnectionString

    Using con As New SqlConnection(strConnString)

        Using cmd As New SqlCommand()

            cmd.CommandText = query

            Using sda As New SqlDataAdapter()

                cmd.Connection = con

                sda.SelectCommand = cmd

                Using ds As New DataSet()

                    Dim dt As New DataTable()

                    sda.Fill(dt)

                    Return dt

                End Using

            End Using

        End Using

    End Using

End Function



Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)

    If e.Row.RowType = DataControlRowType.DataRow Then

        Dim questid As String = GridView1.DataKeys(e.Row.RowIndex).Value.ToString()

        Dim GridView2 As GridView = TryCast(e.Row.FindControl("GridView2"), GridView)

        GridView2.DataSource = GetData(String.Format("SELECT * from Standards where Questions= '{0}'", questid))

        GridView2.DataBind()

    End If

End Sub

结束类

Aspx 页面

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None" CssClass="Grid"
 DataKeyNames="QstnID" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Question" HeaderText="Questions" />  
   <asp:TemplateField>
    <ItemTemplate> 
            <asp:RadioButtonList ID="QuestList" runat="server" DataValueField="Question" RepeatDirection="Horizontal">
              <asp:ListItem Enabled="False" Style="display: none" Text="" Value="0"></asp:ListItem>
              <asp:ListItem Value="Yes">Yes</asp:ListItem>
              <asp:ListItem Value="No">No</asp:ListItem>
              <asp:ListItem Value="N/A">N/A</asp:ListItem>
             </asp:RadioButtonList>
        <br> 
       </br>
        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid" GridLines="None">
            <Columns>
                <asp:BoundField DataField="Description" HeaderText="Standards" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:RadioButtonList ID="StandList" runat="server" DataValueField="Description" RepeatDirection="Horizontal">
                            <asp:ListItem Enabled="False" Style="display: none" Text="" Value="0"></asp:ListItem>
                            <asp:ListItem Value="Yes">Yes</asp:ListItem>
                            <asp:ListItem Value="No" Selected="False">No</asp:ListItem>
                            <asp:ListItem Value="N/A">N/A</asp:ListItem>
                        </asp:RadioButtonList>
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <br>
        </br>

    </ItemTemplate>
   </asp:TemplateField>
  </Columns>
</asp:GridView> 

<asp:SqlDataSource ID="Response" runat="server" ConnectionString="<%$ ConnectionStrings:String1%>" SelectCommand="SELECT [Description] FROM [Standards]"></asp:SqlDataSource>
<asp:SqlDataSource ID="WcmQC" runat="server" ConnectionString="<%$ ConnectionStrings:String2 %>" SelectCommand="SELECT [Question] FROM [Questions]"></asp:SqlDataSource>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
$(document).ready(function () {
        $('#QuestList input').click(function () {
            var value = $('#QuestList input:checked').val();
            if (value == "Yes") {
                $("#GridView2").show();
             else {
                 $("#GridView2").hide();  
            }
            }
        });
    });
</script>

</asp:Content>

Answer 1

在您的 JS 中，您使用的是 ID“QuestList”：

$('#QuestList input').click(function () {

因为它是一个服务器控件，它会有一个由“QuestList”组成的客户端 ID，前面是容器名称的层次结构。而且它也在一个中继器/网格中，这使得它的 id 更加复杂。

使用类而不是 id 来定位您的列表。像这样的：

<asp:RadioButtonList ID="QuestList" CssClass="MyListClass" runat="server" DataValueField="Question" RepeatDirection="Horizontal">

和

$('.MyListClass input').click(function () {

Answer 2

我试用了您的代码并发现了几个 JS 错误，这些错误导致事件处理无法正常工作。我在下面的代码示例中展示了一些修复，它们是：

1. 在你拉入 JQuery 脚本的地方，你需要用</script> 关闭该行。您无法将它与您尝试做的一般脚本块合并。

2. 参考我的第一个答案（关于客户端和服务器 ID），您还需要修复 #GridView2 的 ID。在这种情况下，我可能会使用服务器脚本块来获取客户端 ID（更多内容见下文）。

3. if 语句中的大括号不匹配。您不需要第一行的大括号，但如果您更喜欢该样式并包含它，那么您在 else 之前缺少匹配的样式：

   if (value == "Yes") { $("#GridView2").show(); else

4. 虽然我建议使用 class 而不是 id 来附加单击处理程序，但不要在处理程序中执行相同的操作来定位被单击的单选按钮。该类有多个单选按钮。相反，使用this 来定位事件源对象（被点击的单选按钮）。

下面为您复制的是我在应用上述修复后最终得到的工作 JS。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.MyListClass input').click(function () {
        alert($(this).val());
<%--     if (this.value == "Yes") 
            $("#GridView2").show();
         else 
            $("#GridView2").hide();  --%>
        });
    });
</script>

如您所见，它目前只显示一个警报，因为恐怕您还有一些调查和设计工作要做，以决定如何在您的事件处理程序中定位正确的 GridView2 实例。但是，这很容易，有不止一种方法，并且有一点耐心，您现在应该能够根据我提供的其他信息以及一些谷歌搜索来解决它。 HTH。