我有2个GridViews相互嵌套,带有单选按钮列表控件。第一个网格视图的单选按钮列表包含列表项,如是,否,N / A.单击“否”列表项时,它应显示嵌套的网格视图及其关联的单选按钮。
当页面加载时我可以看到所有网格视图及其相关的radiobutton,但是当点击“no”单选按钮时gridview2不会显示和隐藏。我使用javascript来实现该功能但不能按预期工作。我提供我的vb.net代码和aspx代码。任何帮助表示赞赏。
Vb.net代码
公共类_Default
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>
在你的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 () {
我试用了你的代码并发现了几个JS错误,它们阻止了事件处理工作。我在下面的代码示例中展示了一些修复,它们是:
</script>
关闭该行。您不能像通常那样将其与常规脚本块合并。if
声明中有不匹配的括号。你不需要第一行的大括号,但是如果你喜欢那种风格并且包含它,你就会在else
之前找不到匹配的大括号:
if (value == "Yes") {
$("#GridView2").show();
else
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。