開發WebForm時遇到的問題

標籤：

在做一個小項目時，一個很長的頁面，頁面底部有一個contact us form

整個頁面我沒有使用MVC,而是使用ASP.NET WebForm（.aspx）來實現，實現功能後發現，當使用者在頁面底部輸入資訊，提交submit form之後，頁面會自動跳轉到頁面頂部(捲軸會自動上去，顯示給使用者是頁面頂部的資訊)

而實際上，使用者submit form之後，需要反饋一個資訊給使用者“謝謝你的資訊，我們將儘快和你聯絡”，在原來form的位置，讓使用者submit form之後，可以看到。也就是說頁面焦點要停留在那裡，而不是頁面自動跳轉到頁面頂部去

在aspx檔案中，有個屬性叫做 MaintainScrollPositionOnPostback 可以設定，如下

<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true"  CodeFile="Default.aspx.cs" Inherits="_Default"  %>

這樣，可以保證頁面在Postback之後，不會自動跳轉到頁面頂部,而是停留在原處

但是，我開發時是這樣的，contact us form提交之後，就把頁面底部的這個form隱藏了(Visible=false),只是在原來這個form的位置，放個Label顯示反饋給使用者的提交成功的資訊

這樣之後，發現submit form之後，頁面還是會自動跳轉到頁面頂部去

原因： MaintainScrollPositionOnPostback="true" 需要記錄原來的位置，你提交form時，記錄的就是form的位置，現在提交submit後，你把form隱藏了，程式找不到form,也就無法定位到原來的位置，所以又自動跳轉到頂部去了

所以，submit form之後，不要隱藏form, 只是把提交成功的資訊放個Label放在這個form之上，這樣問題就解決了。 這個時候，提交form之後，頁面捲軸沒有滾動到頁面頂部，依然停留在form的位置，使用者可以馬上看到提交成功的資訊

 

另一個是注意，伺服器端控制項Literal無法設定CSS,如果你又要使用Literal,又要設定它上面內容的CSS樣式，怎麼辦，可以如下操作

 <asp:Literal ID="myError" runat="server">                                <label class="error" >You must choose reCAPTCHA</label>                            </asp:Literal>

 

開發WebForm時遇到的問題