Вложенный GridView с элементом управления RadioButtonList в vb.net

Question

У меня есть 2 GridView, вложенных друг в друга с элементами управления списком переключателей. Список переключателей в первом представлении таблицы содержит такие элементы, как Да, Нет, Н / Д. Если щелкнуть элемент списка «Нет», он должен отобразить вложенную сетку и соответствующие переключатели.

Я вижу все виды сетки и связанные с ней радиокнопки, когда страница загружена, но 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>

Answer 1

Я опробовал ваш код и обнаружил несколько ошибок JS, которые мешали работе обработки событий.В приведенном ниже примере кода я показал некоторые исправления:

1. Там, где вы используете сценарий JQuery, вам нужно закрыть строку с помощью </script>.Вы не можете объединить его с общим блоком сценария, как пытались это сделать.

2. Обращаясь к моему первому ответу (по вопросу идентификаторов клиента и сервера), вам необходимоисправьте свой идентификатор для # GridView2.В этом случае я мог бы использовать блок серверного скрипта для получения идентификатора клиента (подробнее об этом ниже).

3. В вашем выражении if есть несоответствующие скобки.Вам не нужна скобка в первой строке, но если вы предпочитаете этот стиль и включаете его, вы пропускаете соответствующую скобку до else:

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

4. В то время как я предложил использовать класс, а не 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 в вашем событии.обработчик.Тем не менее, это будет достаточно просто, есть более чем один подход, и, проявив немного терпения, вы теперь сможете разобраться в этом с другой информацией, которую я дал, плюс немного поиска в Google.НТН.

Answer 2

В вашем JS вы используете идентификатор "QuestList":

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

Поскольку это серверный элемент управления, ему будет предшествовать идентификатор клиента, состоящий из "QuestList"по иерархии имен контейнеров.И это также внутри повторителя / сетки, что еще больше усложняет его идентификатор.

Вместо идентификатора используйте class для нацеливания на ваш список.Примерно так:

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

и

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