javascript - 编辑按钮不显示

标签 javascript asp.net css

我有一个 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;
    }
}

} 图像布局: Layout

最佳答案

需要引用 Button1 的 ClientID 以使其在 JavaScript 中可访问

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

会是

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

关于javascript - 编辑按钮不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9994853/

相关文章:

c# - 从 $.post 传递数组到 Action

javascript - 您如何使用 javascript 在 FF 中切换 div 的可见性? (IE 和 Chrome 工作正常)

javascript - Firestore数据结构: Storing An Order in Firestore

c# - C# 中的 HttpSession 等价物

asp.net - 如何将身份验证方法添加到现有的 Okta 到 ASP.NET 项目

c# - 我可以在 .NET Framework 4.0 上运行 MVC 5 应用程序吗?

css - 如果访客在移动设备上,切换 2 个 div

javascript - 使用导出到 vanilla javascript 的 react 组件创建 npm 包

javascript - JQuery 等高行

css - 将卡片展开整个宽度