0

我在 aspx 页面上有这段代码:

<div id="bloc1">
    Hey you
</div>

<asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" OnClientClick="change_page()" />
<input id="Button1" type="button" value="button" onclick="change_page()" />

<div id="bloc2" style="display:none">
    Hey me
</div>

<script type="text/javascript">
    function change_page() {
        document.getElementById("bloc2").style.display = "block";
        document.getElementById("bloc1").style.display = "none";
    }
</script>

当我单击 HTML 按钮时,我的脚本运行良好:Bloc1 消失,Bloc2 出现。

当我单击 ASP 按钮时,Bloc1 消失,Bloc2 很快出现,Bloc2 消失,Bloc1 重新出现(所以回到开头),就像页面重新加载一样。

在代码后面做了一些事情:

    protected void Button2_Click(object sender, EventArgs e)
    {
        this.Button2.Text = "new Button";
    }

我怎样才能做到像 HTML 按钮一样,但使用后面的代码功能?

PS:我不想使用 UpdatePanel 和 ScriptManager。

4

5 回答 5

3

您需要了解 ASP.NET WebForms 之间的区别以及 HTML 网页的实际工作方式。该<asp:Button>控件将标记呈现为<input type="submit">,无论您是否有OnClick与之关联的事件。这意味着您的表单将在单击时提交到服务器,除非您使用 javascript 将其停止。

你的服务器不知道你在 javascript 中做了什么来显示和隐藏东西,因为像 CSS 这样display的东西不是帖子的一部分。所以当页面再次加载时,它又回到了第一次加载时的样子。

你不能同时拥有它——要么你发布到服务器并获得一个新页面,要么你没有。如果您需要在没有完整发布和完整加载的情况下执行服务器代码,那么您将需要执行一些 AJAX - 这可以通过 UpdatePanel 或适当的 AJAX(例如,带有 ASHX 处理程序或WebMethod方法的 jQuery)发生。

于 2013-08-07T15:09:11.603 回答
1

您的 ASP:Button 是一个在服务器上运行的控件,即它提交按钮,然后重新加载页面的原始状态。

你有两个选择:

1)如果您只需要它作为客户端功能,那么不要使用 ASP:Button 而只需使用您设置的输入按钮和 change_page() 来更改视图。

2)如果你想提交回服务器并运行代码后面做一些其他的服务器端脚本然后从 asp:Button 中删除 change_page() 脚本并在代码隐藏中显示隐藏 div。

protected void Button2_Click(object sender, EventArgs e)
{
    // other server side scripts...

    bloc1.Visible = false;
    bloc2.Visible = true;

}
于 2013-08-07T15:13:11.900 回答
1

发生这种情况是因为您在单击按钮时转到服务器端。你有两个解决方案:

  1. 从 ASP 按钮 onclick="Button2_Click" 中删除它:

    <div id="bloc1">
        Hey you
    </div>
    
    <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" OnClientClick="change_page()" />
    <input id="Button1" type="button" value="button" onclick="change_page()" />
    
    <div id="bloc2" style="display:none">
        Hey me
    </div>
    
    <script type="text/javascript">
        function change_page() {
            document.getElementById("bloc2").style.display = "block";
            document.getElementById("bloc1").style.display = "none";
        }
    </script>
    
  2. 保留它,但添加 return false;像这样调用 JavaScript 函数后:

    <div id="bloc1">
        Hey you
    </div>
    
    <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click"
                OnClientClick="change_page();return false;" />
    <input id="Button1" type="button" value="button" onclick="change_page()" />
    
    <div id="bloc2" style="display:none">
        Hey me
    </div>
    
    <script type="text/javascript">
        function change_page() {
            document.getElementById("bloc2").style.display = "block";
            document.getElementById("bloc1").style.display = "none";
        }
    </script>
    
于 2013-08-07T15:49:57.810 回答
0

您可以asp像这样简单地制作按钮标签:

<asp:Button ID="YourID" UseSubmitBehavior="false" cssClass="btn btn-default" runat="server" Text="Take a Snap" OnClientClick="take_snapshot();" /> or
<asp:Button ID="YourID" cssClass="btn btn-default" runat="server" Text="Take a Snap" OnClientClick="return false;" />

实际上,您可以更改属性 UseSubmitBehavier 或在 OnClientClick 方法中简单地在您调用 onClientClick 的方法中返回 false。当您希望重新加载页面时,您可以返回 true。

于 2014-11-24T07:39:22.153 回答
-1

尝试这个:

<script type="text/javascript">
    function change_page() {
        document.getElementById("bloc2").style.display = "block";
        document.getElementById("bloc1").style.display = "none";
    }
</script>

<asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" OnClientClick="return change_page();" />

protected void Button2_Click(object sender, EventArgs e)
{
    // Your code
    Page.ClientScript.RegisterClientScriptBlock(this.GetType,"Test", "<script type='text/javascript' language='javascript'>change_page();</script>");
}
于 2013-08-07T15:02:45.007 回答