Question

我在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。

Answer 1

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

您的服务器不知道您在javascript中显示和隐藏的内容，因为CSS display之类的内容不属于帖子。因此，当页面再次加载时，它将恢复到第一次加载时的状态。

你无法双管齐下 - 无论是发布到服务器还是获得新页面，或者你没有。如果你需要在没有完整帖子和完全加载的情况下执行服务器代码，那么你需要做一些AJAX - 可以使用UpdatePanels或适当的AJAX（例如，带有ASHX处理程序的jQuery或{{1}方法）。

Answer 2

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

您有两种选择：

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;

}

Answer 3

这是因为您在单击按钮时转到服务器端。你有两个解决方案：

从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>

保留它，但添加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>

Answer 4

你可以简单地制作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。

Answer 5

试试这个：

<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>");
}

ASP按钮重装页面？

5 个答案: