2013-08-07 55 views
0

我有一個aspx頁面上的驗證碼ASP按鈕重新載入頁面?

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

+1

這是因爲asp:button是一個服務器控件,當你點擊頁面獲取回發後,它會被刷新。 – Raghubar

+0

是的,你是對的。那麼我怎樣才能設法使用服務器功能,但仍然能夠使用JavaScript的功能,如在HTML中? – Ouado

回答

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

是的,它的作品。但是如果我想要代碼後面的東西呢? Like:this.Button2.Text =「lol」 它不工作了 – Ouado

+0

我已根據您的要求編輯了代碼。 – Raghubar

3

您需要了解ASP.NET WebForms和如何在HTML網頁的實際工作之間的差別。無論您是否有與其關聯的OnClick事件,控件都會將標記渲染爲<input type="submit">。這意味着您的表單將在點擊後提交給服務器,除非您使用JavaScript停止它。

你的服務器並不知道你在javascript中顯示和隱藏了什麼,因爲像CSS display這樣的東西不是帖子的一部分。所以當頁面再次加載時,它回到了第一次加載的時候。

你不能兩種方式 - 無論是發佈到服務器,並獲得一個新的頁面,或者你沒有。如果你需要執行服務器代碼而沒有完整的post和full load,那麼你需要做一些AJAX--這可能發生在UpdatePanels或適當的AJAX上(例如,帶有ASHX處理程序的jQuery或WebMethod方法) 。

+0

好的,謝謝你的解釋! 然後我會檢查Ajax。我不想使用updatepanels – Ouado

+0

我不怪你不想使用UpdatePanels。他們是一個有趣的想法,但實際上他們是可怕的事情。它們使用比正確的AJAX多幾百倍的帶寬,不必要地運行整個頁面生命週期,並且只是一個很難處理的問題。唯一的好處是,如果您已經大量使用以WebForms爲中心的功能,那麼從完整文章切換到部分文章相對比較容易,而且沒有太多變化。但是如果您從一開始就正確地構建您的站點,瞭解服務器和客戶端代碼之間的差異,適當的AJAX實際上會更容易。 –

1

您的ASP:Button是一個在服務器上運行的控件,即它提交按鈕,然後重新加載頁面的原始狀態。

你有兩個選擇:

1)如果你只是需要這是客戶端的功能,那麼就不要使用ASP:按鈕,只需使用輸入按鈕,設置和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; 

} 
+0

好吧,所以我應該在兩個div上添加runat =「server」? – Ouado

+0

這正是我想要的!非常感謝你! – Ouado

1

發生這種情況是因爲你點擊按鈕去服務器端。你有兩個解決方案:從ASP按鈕的onclick = 「Button2_Click」

  1. 刪除此:

    <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. 保持它,但增加了返回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> 
    
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這個方法簡單地返回false在您在onClientClick中調用的方法中。當你想要重新加載頁面時,你可以返回true。