编辑按钮不显示答案

【问题标题】：Edit button doesn't show up编辑按钮不显示
【发布时间】：2012-04-03 22:18:35
【问题描述】：

我有一个 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 { 边距顶部：10px；左边距：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;
    }
}

} 图像布局：

【问题讨论】：

标签： javascript asp.net css

【解决方案1】：

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

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

会

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

【讨论】：

正确 - 抱歉，因为它正在执行回发，并且默认情况下该按钮不可见。如果在服务器端 Button1_OnClick 事件中添加 Button1.Visible = True ，一旦他们单击按钮，它就会显示按钮，回发并且按钮仍然可见。
还是不可见，我在活动中添加了。 Edit.Visible=true;
因为 display:none 在 CSS 中。

【解决方案2】：

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

由于回发页面被重绘，所以忘记了在javascript中所做的客户端更改。

【讨论】：