编辑按钮不显示

Question

我有一个asp.net页面。 底部有一个“编辑”按钮，默认情况下是不可见的。 通过单击左侧栏上的按钮，应该显示它。 但它不起作用，需要帮助。 谢谢。 码：

<div id="wrap">
      <div id="header">
    </div>
     <div id="nav">
        <asp:Button ID="Lookup" runat="server" Text="Lookup" CssClass="nav_buttons" ClientIDMode="Static"/>
        <asp:Button ID="Metric" runat="server" Text="Metric" CssClass="nav_buttons" />
    </div>
    <div id="sidebar">
        <asp:Button ID="Button1" runat="server" Text="Button1" ClientIDMode="Static" CssClass="sidebar_buttons"
            OnClick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="Button2" CssClass="sidebar_buttons" />
    </div>
     <div id="sameheight">
        <div id="gridview">
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
                DataSourceID="SqlDataSource1" AutoGenerateEditButton="True" AutoGenerateSelectButton="True" />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT * FROM [t1]"></asp:SqlDataSource>
        <asp:GridView ID="GridView2" runat="server" AllowPaging="True" AllowSorting="True"
                AutoGenerateColumns="False" DataKeyNames="sKey" DataSourceID="SqlDataSource2" />
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT * FROM [t2]"></asp:SqlDataSource>
        </div>
        <div id="btnEdit">
            <asp:Button ID="Edit" runat="server" ClientIDMode="Static" Text="Edit" OnClientClick="javascript:Edit_Click();return false;" />
        </div>
    </div>
    <script>
        $(document).ready(function () {
            var divone = $("#sidebar").height();
            var divtwo = $("#gridview").height();
            var maxdiv = Math.max(divone, divtwo);
            $("#sidebar").height(maxdiv);
            $("#gridview").height(maxdiv);
        });
         $("#Button1").click(function (event) {
            $("#Edit").show();
        }); 
    </script>
</div>

CSS：

#wrap
{
width: 800px;
background-color: #99c;
overflow: hidden;
}
#header
{
border-style: solid;
border-width: 1px;
background-color: #ddd;
width: 800px;
padding-top: 30px;
padding-bottom: 30px;
}
#sidebar
{
float: left;
width: 125px;
padding-top: 10px;
background-color: #C0C0C0;
}
#nav
{
background-color: #c99;
padding-top: 30px;
padding-bottom: 30px;
width: 800px;
border-style: solid;
border-width: 1px;
}

.sidebar_buttons {margin-top：10px; margin-left：2px; 宽度：120px; }

#gridview
{
float: right;
width: 675px;
}

#Edit
{
float: left;
display: none;

}


#sameheight
{
 float: right;
 }

代码背后：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebTest
{
public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GridView1.Visible = false;
        GridView2.Visible = false;
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
         GridView1.DataBind();
         GridView1.Visible = true;

         GridView2.DataSource = null;
         GridView2.Visible = false;
    }
}

图像布局：

Answer 1

需要引用Button1的ClientID才能在JavaScript中访问它

$("#Button1").click(function (event) { 

将会

$('#<%= Button1.ClientID %>').click(function (event) {

Answer 2

由于您在按钮单击时进行回发，您是否可以设置初始Visible =“false”，然后在回发时将可见性更改为true。

由于页面由于回发而重新绘制，因此会忘记在javascript中进行的客户端更改。