您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET 開發實戰七大技巧：路徑、捲軸、模板、焦點與更多

編輯：關於ASP.NET

前言

ASP.NET 開發不僅需掌握核心架構，更需累積實戰技巧以應對專案實際挑戰。本文整理七個高頻實用技巧，涵蓋路徑解析、捲軸位置保持、DataList 動態模板、伺服器控制項焦點設定等，助你寫出更健壯、使用者體驗更佳的應用程式。

技巧 1：善用 ~ (Tilde) 解析應用程式根目錄相對路徑

痛點：傳統相對路徑 ../images/logo.png 在 Master Page、User Control 巢狀參考、部署至虛擬目錄時極易失效。

解法：~/images/logo.png 以應用程式根目錄為基準，ASP.NET 執行期自動解析為正確相對路徑。

<asp:Image runat="server" ImageUrl="~/images/logo.png" />
<a href="~/Products/List.aspx">產品列表</a>

注意：設計階段 (Design View) 無法預覽，需執行期瀏覽器驗證。

技巧 2：Postback 後保持捲軸位置

場景：長表單 (500+ 欄位) 使用者填寫至中段，觸發 Postback (如 DropDownList AutoPostBack)，頁面重整跳回頂端，使用者體驗極差。

解法：以 JavaScript 記錄 document.body.scrollTop 於隱藏欄位，Postback 後還原。

Private Sub RetainScrollPosition()
    Dim saveScript As New StringBuilder()
    Dim restoreScript As New StringBuilder()
    
    ' 註冊隱藏欄位儲存捲軸位置
    Page.ClientScript.RegisterHiddenField("__SCROLLPOS", "0")
    
    ' 儲存捲軸位置的腳本 (onscroll 事件)
    saveScript.Append("")
    Page.ClientScript.RegisterStartupScript(Me.GetType(), "saveScroll", saveScript.ToString())
    
    ' Postback 時還原捲軸位置
    If Page.IsPostBack Then
        restoreScript.Append("")
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "restoreScroll", restoreScript.ToString())
    End If
End Sub

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    RetainScrollPosition()
End Sub

現代替代方案：ASP.NET 2.0+ 內建 Page.MaintainScrollPositionOnPostBack = true (或 <pages maintainScrollPositionOnPostBack="true">)，無需手寫腳本。

技巧 3：DataList 動態切換 ItemTemplate

場景：同一資料來源需依使用者角色、主題、裝置呈現完全不同版面。

解法：將不同版面封裝為獨立 .ascx 用戶控制項，執行期動態載入。

' 兩種模板：ListView.ascx (清單)、CardView.ascx (卡片)
Dim templateName As String = ddlViewMode.SelectedValue ' "ListView" 或 "CardView"
DataList1.ItemTemplate = Page.LoadTemplate(templateName & ".ascx")
DataList1.DataSource = GetData()
DataList1.DataBind()

進階：搭配 ItemDataBound 事件針對單筆資料微調 (如高亮、加標籤)，保持模板整體結構不變。

技巧 4：設定伺服器控制項焦點

場景：頁面載入或驗證失敗時，自動將游標定位至第一個輸入框或錯誤欄位。

Private Sub SetFocus(ctrl As Control)
    Dim script As New StringBuilder()
    script.Append("")
    Page.ClientScript.RegisterStartupScript(Me.GetType(), "focusScript", script.ToString())
End Sub

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        SetFocus(txtUserName) ' 首次載入焦點在帳號欄
    End If
End Sub

' 驗證失敗時焦點導向第一個錯誤控制項
Protected Sub Page_PreRender(sender As Object, e As EventArgs) Handles Me.PreRender
    If Not Page.IsValid Then
        For Each validator As IValidator In Page.Validators
            If Not validator.IsValid Then
                Dim ctrl As Control = Page.FindControl(validator.ControlToValidate)
                If ctrl IsNot Nothing Then SetFocus(ctrl)
                Exit For
            End If
        Next
    End If
End Sub

ASP.NET 2.0+ 內建：Page.SetFocus(control) 或 Form.DefaultFocus = "txtUserName"。

技巧 5：GridView 列標題自動排序與分頁

<asp:GridView ID="gvData" runat="server" AllowSorting="true" AllowPaging="true" PageSize="20"
    OnSorting="gvData_Sorting" OnPageIndexChanging="gvData_PageIndexChanging">
</asp:GridView>

Private sortExpression As String = "ID"
Private sortDirection As String = "ASC"

Protected Sub gvData_Sorting(sender As Object, e As GridViewSortEventArgs)
    sortExpression = e.SortExpression
    sortDirection = If(ViewState("SortDir") = "ASC", "DESC", "ASC")
    ViewState("SortDir") = sortDirection
    BindGrid()
End Sub

Protected Sub gvData_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
    gvData.PageIndex = e.NewPageIndex
    BindGrid()
End Sub

Private Sub BindGrid()
    Dim dt As DataTable = GetData()
    dt.DefaultView.Sort = sortExpression & " " & sortDirection
    gvData.DataSource = dt
    gvData.DataBind()
End Sub

技巧 6：使用 ViewState 儲存頁面層級狀態物件

避免使用 Session 儲存單頁面暫時狀態 (如當前編輯 ID、排序設定)，ViewState 隨頁面來去，不佔用伺服器記憶體。

Private Property CurrentEditID() As Integer
    Get
        Return If(ViewState("EditID"), 0)
    End Get
    Set(value As Integer)
        ViewState("EditID") = value
    End Set
End Property

注意：ViewState 會增加頁面大小，勿存放大型物件 (DataTable、大字串)。

技巧 7：UpdatePanel 區域性更新避免全頁重整

<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdatePanel ID="upPanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView ID="gv" runat="server" />
        <asp:Button ID="btnRefresh" runat="server" Text="重新整理" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

僅更新 UpdatePanel 內容，大幅提升回應速度與使用者體驗。注意：UpdateMode="Conditional" 配合 Triggers 精確控制更新範圍。