Question

我正努力在按钮点击时显示一个面板（其中包含两个标签，并在页面加载时隐藏）但没有成功。

当我点击一个按钮（id = Button1）时，它应该显示一个面板（id = anspanel）但不会发生这种情况。而不是它保持原样，即按钮点击没有任何反应。我找不到原因。看看我的代码。告诉我我犯错误的地方和解决方案。

.aspx： -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Student_Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<script type="text/javascript">
    var currentTab = 0;
    $(function () {
        $("#tabs").tabs({
            select: function (e, i) {
                currentTab = i.index;
            }
        });
    });
    $("#btnNext").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
        tabs.tabs('select', currentTab);
        $("#btnPrevious").show();
        if (currentTab == (c - 1)) {
            $("#btnNext").hide();
        } else {
            $("#btnNext").show();
        }
    });
    $("#btnPrevious").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
        tabs.tabs('select', currentTab);
        if (currentTab == 0) {
            $("#btnNext").show();
            $("#btnPrevious").hide();
        }
        if (currentTab < (c - 1)) {
            $("#btnNext").show();
        }
    });

    $(function () {
        //$("#Panel2").hide();
        document.getElementById('form1').onsubmit = function () {
            return false;
        }//Avoid Reloading
        $("#Button1").click(function () {
            if ($('#anspanel').is(":hidden")) {
                $('#anspanel').show();
       
            }
            else {
                $('#anspanel').hide();
            }

            if ($("#Button1").val() == "Show Answer") {
                $("#Button1").val("Hide Answer");
            } else {
                $("#Button1").val("Show Answer");
            }
       

        });
       
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>


        <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
        <li><a href="#tabs-4">Tab 4</a></li>
        <li><a href="#tabs-5">Tab 5</a></li>
    </ul>
    <div id="tabs-1">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>

        <asp:Panel ID="Panel1" runat="server">

            <asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
            <br />
            <br />
            <br />
           <span>A-</span> <asp:Label ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
            <br />
            <br />
            <span>B-</span> <asp:Label ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
            <br />
            <br />
            <span>C-</span> <asp:Label ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
            <br />
            <br />
            <span>D-</span> <asp:Label ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
            <br />
            <br />
            &nbsp;&nbsp;
            <asp:Button ID="Button1" runat="server" Text="Show Answer"  />
            <br />

            <asp:Panel id="anspanel" runat="server">

                <span>Correct Answer is :-</span><asp:Label ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
                <br />
                <br />
                <asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>


            </asp:Panel>


        </asp:Panel>
        <br />
        <br />

                 </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

       
    </div>
    <div id="tabs-2">
        Tab 2 Content
    </div>
    <div id="tabs-3">
        Tab 3 Content
    </div>
     <div id="tabs-4">
        Tab 4 Content
    </div>
     <div id="tabs-5">
        Tab 5 Content
    </div>
</div>
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />

    
    </div>
    </form>
</body>
</html>

.aspx.cs： -

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;


public partial class Student_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.DataSource = GetData("SELECT top 2 Question, Option1, Option2, Option3, Option4, CorrectAns, Explanation FROM Questions");
        GridView1.DataBind();
        foreach (GridViewRow row in GridView1.Rows)
        {
            if (row.RowType == DataControlRowType.DataRow)
            {
                Panel panel1 = (Panel)row.FindControl("Panel1");
                Panel anspanel = (Panel)panel1.FindControl("anspanel");
                anspanel.Style.Add("display", "none");
            }
        }
    }
}

private DataSet GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds);
                return ds;
            }
        }
    }
}
}

错误： -

Server Error in '/' Application.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error: 


Line 24:                     Panel panel1 = (Panel)row.FindControl("Panel1");
Line 25:                     Panel anspanel = (Panel)panel1.FindControl("anspanel");
Line 26:                     anspanel.Style.Add("display", "none");
Line 27:                 }
Line 28:             }

Source File: e:\Way2Success\Student\Test.aspx.cs    Line: 26 

Stack Trace: 


[NullReferenceException: Object reference not set to an instance of an object.]
Student_Test.Page_Load(Object sender, EventArgs e) in e:\Way2Success\Student\Test.aspx.cs:26
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +51
System.Web.UI.Control.OnLoad(EventArgs e) +95
System.Web.UI.Control.LoadRecursive() +59
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2952

Answer 1

问题是，您的"ct100_ContentPlaceHolder1_Button1"和Button1到"ct100_ContentPlaceHolder1_anspanel"的ID都会设置为anspanel。

有两种解决方案：

1） 将客户端ID模式设置为静态：添加到您的元素，以便保留静态ID。

对Button1和anspanel元素进行此更改。

<asp:Button ID="Button1" ClientIDMode="Static" runat="server" Text="Show Answer" />

和

<asp:Panel id="anspanel" ClientIDMode="Static" runat="server">

退出的脚本必须正常工作。

2） 更改脚本以使用clientId。

$("#<%= Button1.ClientID %>")代替$("#Button1")

和

$("#<%= anspanel.ClientID %>")代替$("#anspanel")

编辑1：在您提到它仅适用于第一个按钮后，我意识到您拥有了gridview，并且您最终会对所有面板具有相同的ID与Jquery不兼容。所以我的想法是使用class选择器。以下是我建议你做的一些改变......

 <asp:Panel ID="Panel1" runat="server">

  <asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'>
   ....
   ....
   <asp:Button class="panelButton" runat="server" Text="Show Answer"  />
   <br />

   <asp:Panel class="AnswerPanel" runat="server">

请注意，我已在按钮和面板中添加了类。我也删除了ID，因为没有必要。

然后在你的jquery中更改代码如下

$(".panelButton").click(function () {
   var $thisButton = $(this); //save button into a variable
   var $ansPanel = $(this).parent().find('.AnswerPanel'); //save ans panel into a variable

   if ($ansPanel.is(":hidden")) {
      $ansPanel.show();           
   }
   else {
      $ansPanel.hide();
   }

   if ($thisButton.val() == "Show Answer") {
       $thisButton.val("Hide Answer");
   } else {
       $thisButton.val("Show Answer");
   }               
});

Answer 2

使用jQuery通过其ID调用asp.net控件，您应该使用以下代码：$("#<%= yourButtonId.ClientID %>")。

因此，在您的情况下，请尝试使用$("#<%= Button1.ClientID %>").click();代替$("#Button1").click()。

如何使用jquery隐藏/显示<panel>？

2 个答案: