asp.net C#如何通过单击按钮切换div样式

wfauudbj  于 2023-03-31  发布在  .NET
关注(0)|答案(1)|浏览(148)

我的问题是:第一次单击按钮时,显示div;但随后的单击保持此状态,并且display不会转换为none。
在LiB.aspx中我创建了一个按钮和一个div,我想通过点击按钮来显示div;当再次点击时,这个div可以显示为none(默认)。这两个步骤可以循环重复。.aspx的代码如下所示。

<asp:Button ID="Button1" runat="server" Text="moreLimits" OnClick="Button1_Click" />
<div id="child1" class="childl" style="display: none;" runat="server"></div>

与. aspx.cs文件相关的代码如下。

bool bShow = true;
protected void Button1_Click(object sender, EventArgs e)
    {
        
        if (bShow)
        {
            Button1.Text = "cancelLimits";
            child1.Style.Value = "display:block";
            bShow = false;
        }
        else
        {
            Button1.Text = "moreLimits";
            child1.Style.Value = "display:none";
            bShow = true;
        }

    }

我的怀疑是bShow没有被修改为false。但是我不确定如何解决它,或者有其他正确的写法。非常感谢能解决这个问题并给予帮助的人!

ccrfmcuu

ccrfmcuu1#

在许多方面,这是一个很好的问题!
第一天,第一件事,第一堂网络开发课?
这就是我们所说的无状态。
无政府主义这个词吗
我的意思是每次你的网页(这是坐在用户的桌面)只是一个网页。
你不像在桌面上那样为每个用户配备一台电脑,你只有一台电脑--一台网络服务器。
10个用户中的任何一个都可以点击该按钮(假设假想的10个用户)。
那么,这场秀的状况如何?
答:
这一页后面的代码?
每次都是从头开始!!
你必须掌握一个所谓的“往返”或后回网络土地的概念。
它的工作原理是这样的:
你有这个

注意非常,但超过关闭,请注意我如何没有页面显示在右侧(在服务器上)。
Web服务器正在等待处理任何页面,来自您的任何用户-而不仅仅是您!
你没有这个:
请注意,您的页面类代码并不在服务器的内存中.
你没有这个:
注意这里非常小心-网页在客户端计算机上-它根本不存在于Web服务器端。

你甚至没有这个:

现在你点击你的按钮,网页被发送到网络服务器。
这一点:

现在你的页面已经在服务器上了。
现在,页面类的示例已经创建,您的代码开始运行。
您的隐藏代码可以修改控件(甚至控件是否可见),但页面不与用户交互-只有代码可以修改网页。因此,可以对网页进行一次更改或多次更改,但当您更新文本框等内容时,用户尚未看到这些更改。因此,你不能说运行一个循环来打开和关闭一个文本框-因为这些变化发生在服务器上-客户端浏览器不再有网页了!!!
然后它被发送回客户端,服务器端类示例和代码被丢弃-不存在!!!您的服务器端页面类被处理-从内存中删除,背后的网页代码不再存在。
因此,页面返回到客户端,重新显示,加载JavaScript,然后JavaScript开始运行。

请注意,我没有在右侧显示页面。
在服务器上?一旦页面被发送回用户?
在服务器端,页面(和代码变量)被处理,删除,不再存在。Web服务器现在准备好让任何其他用户回发他们的页面。
所以,你的代码(页面类)是无状态的。代码中的变量每次都重新开始。(事实上所有的代码都是这样!)
因此,您不能像以前那样在页面类的“基”级设置某个值,因为该页面不会保留在内存中!
它只存在于“往返”期间,并且只存在于页面在服务器上运行的时间内。
然后页面返回到客户端。网页被重新加载,重新绘制,页面上的JavaScript等也开始了!!!
(you可以认为客户端的JavaScript代码在浏览器非常像服务器在反向!!!-它的变量(客户端)也现在被重新设置!!!)。
那么,如何处理这个问题呢?
有几种“常见”的方法。
在Session[]中保留变量值。
会话是一个服务器端的“东西”,它允许你把一些值塞进,它们仍然“持久”在服务器上--即使当网页被处理掉的时候(我说过每次页面返回给用户的时候都会发生)。
所以,session就是这样一种方式。
另一条路?
您可以使用所谓的ViewState。
ViewState与Session“类似”,但它不是对“一个”用户全局的,而只是对当前网页。
因此,session()可以用来将值传递给另一个页面,ViewState不能。
ViewState是基于浏览器的(它在每个浏览器页面中),而session()是每个用户的(服务器端)。
另一种常见的方式?
你可以使用一个隐藏的文本框,甚至是一个名为“hiddenField”的控件。这是网页上的控件,你可以检查控件的值。
另一种方法呢?
将值放入URL,或所谓的“url查询参数”。
有很多方法可以做到这一点。
让我们用两种方式来做这件事:
第一个例子,我们将使用session:
所以,我们的代码变成这样:

bool bShow = true;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            bShow = true;
            Session["MyShow"] = bShow;
        }
        else
        {
            // restore state of bShow
            bShow = (bool)["MyShow"];
        }
    }

    protected void cmdTest_Click(object sender, EventArgs e)
    {

        if (bShow)
        {
            Button1.Text = "cancelLimits";
            child1.Style.Value = "display:block";
            bShow = false;
        }
        else
        {
            Button1.Text = "moreLimits";
            child1.Style.Value = "display:none";
            bShow = true;
        }
    }

因此,我们将我们的“变量”的值放在服务器端。注意,会话是“每个用户”的,但对所有代码都是全局的。
用户浏览器状态:
如前所述,像文本框之类的东西?如果它们有一个runat=server标记,那么在大多数情况下(不是所有),控件状态是持久化的。我应该指出,对于普通的jane HTML标记,这样的值是不持久化的,但是在“大多数”情况下,带有runat=server的控件的状态是持久化的。
因此,我们可以使用控件的状态。
这样做:
因此,放弃使用bShow(因为我们现在知道它不会持久),我们可以这样做:

protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (child1.Style["display"] == "block")
        {
            child1.Style.Add("display","none");
        }
        else
        {
            child1.Style.Add("display", "block");
        }
    }

事实上,我们甚至可以这样做:
(use在样式的地方可见)。

<div id="child1" class="childl" visible="false" runat="server">
            <h3>this is our div</h3>
        </div>

然后:

protected void Button1_Click(object sender, EventArgs e)
    {
        child1.Visible = !child1.Visible;
    }

注意上面的例子要小心。如果你设置了一个控件visible = false,那么这个控件永远不会被发送到浏览器端(在页面往返之后)。这可能非常有用,但它也意味着客户端JavaScript代码不能隐藏/显示这个控件,因为这个控件不会被发送或渲染到客户端。
说到客户端代码?
可以编写代码来在客户端代码中100%隐藏/显示“div”,并且不需要回发,也不需要往返。
所以,这个:

<asp:Button ID="Button1" runat="server" Text="moreLimits" 
            OnClientClick="myhideshow();return false;"/>
        <br />
        <script>
            function myhideshow() {
                var mydiv = document.getElementById("child1")
                if (mydiv.style.display == 'none') {
                    mydiv.style.display = 'block';
                } else {
                    mydiv.style.display = 'none';
                }
            }
        </script>
        <br />
        <div id="child1" class="childl" style="display:none" runat="server">
            <h3>this is our div</h3>
        </div>

在上面的例子中,注意浏览器“微调器”是如何显示没有等待的,因为我们没有进行往返。
所以,在网络世界里?
“最大的挑战”是我们的代码是无状态的,实际上每次回发都非常像从头开始。
因此,你必须在你的“工具包”中加入状态的概念。
使用哪种类型的状态(ViewState,session(),control state)将在很大程度上定义您编写代码的新方法,并掌握Web开发与桌面开发的差异。
基本的概念是,你的页面“类”和代码从头开始,每次按钮或任何回发发生。
通常,今天,提高性能并为用户提供“桌面”般体验的一个大目标是我们“考虑”在浏览器(JavaScript)中编写客户端代码,因为这样的操作不需要非常昂贵的“往返”,这需要时间,并减慢页面的操作。
然而,当开始时,通常上述概念在您的开发方法中并不那么牢固,并且编写JavaScript代码通常是一种“痛苦”,但对于许多简单的事情,这是非常值得的,因为您不必将整个页面发送到Web服务器只是为了运行一些代码。人们常常试图将越来越多的代码从服务器侧推到客户端侧代码,因此,您的代码和“许多”操作可以在没有昂贵的回发或所谓的往返的情况下发生。
因此,往返的概念是任何Web开发所必需的,并且沿着着这个概念的是术语“无状态”,因为你的页面代码(代码背后)实际上是从零开始的,每次任何按钮发生任何回发。一旦服务器端代码背后已经运行,并且页面发送回用户?
服务器端的页面被转储,处理,Web服务器现在准备好处理任何用户发送到Web服务器的任何其他网页-不仅仅是您的页面!!!
有一台计算机和一个Web处理器,因此您在内存中没有代码+变量仅用于一个用户-Web服务器是多用户的,因此在桌面领域使用的常见编码方法将不适用于Web领域。

相关问题