如何在不重新加载页面的情况下在 asp 表单中获取按钮？

Question

所以我有这个更新面板，它运行良好。

    <div>
        <button id="foo" onclick="changeVal(this.id);">Send the ID "foo"...</button>
    </div>

<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" >
</asp:ScriptManager> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always"> 
<ContentTemplate> 

<div id="thethetext">
<asp:Literal ID="thetext" runat="server"></asp:Literal>
</div>

</ContentTemplate> 
<Triggers>
<asp:AsyncPostBackTrigger ControlID="myButton" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>



   **<!-- MOVE BUTTON (ID="foo") OVER HERE TO DISPLAY IT UNDER THE LITERAL -->**

<asp:HiddenField ID="blah" runat="server" value="Initial Value"></asp:HiddenField>
<asp:Button ID="myButton" Text="Get Concatenated..." OnClick="Test" runat="server"></asp:Button>    
</form>

但是，我想在 asp 表单中移动按钮（id 为“foo”）。所以它显示在文字用户控件下......但如果我这样做，每次我点击它时，它都会重新加载页面。有没有办法避免这种情况？谢谢！

Answer 1

它会重新加载页面，因为您的按钮提交了您刚刚放入的表单。 为您的按钮赋予属性type 和值button，这样它就不会提交：

<div>
 <button type="button" id="foo" onclick="changeVal(this.id);">Send the ID "foo"...</button>
</div>

参考：W3C HTML 4.01 Specification