UpdatePanel history

อีกหนึ่งปํญหาของการใช้ AJAX นั่นคือ การออกแบบ โดย AJAX จะทำงานภายใต้เบื้องหลังโดยที่เราไม่อาจรู้เลยว่าสถานะการทำงานเป็นอย่างไร และอีกปัญหาคือเนื่องด้วยที่ URL ไม่ได้เปลี่ยนแปลงขณะทำงาน สถานะการทำงานที่ค้างไว้อาจไม่ได้ถูกบันทึกเมื่อเปลี่ยนเพจ ซึ่งสิ่งเหล่านี้เป็นอีกหนึ่งข้อจำกัดของ AJAX และ UpdatePanel control อีกด้วย แต่ยังถือว่าเป็นเรื่องที่ดีที่ทางไมโครซอฟต์ ได้แก้ไขปัญหาดังกล่าว โดยได้เพิ่มความสามารถให้กับ ScriptManager control และสามารถเพิ่ม string ให้กับ URL หลังจากสัญลักษณ์ # ได้ ซึ่งจะเป็นการเข้าถึงในส่วนของข้อมูลที่ต้องการแก้ไขได้โดยที่หน้าเพจไม่เปลี่ยนแปลง ลองทำตามจากตัวอย่างด้านล่างนี้:

<asp:ScriptManager runat="server" ID="MainScriptManager" />

<asp:UpdatePanel runat="server" ID="pnlColorSelect">
<ContentTemplate>
    <asp:DropDownList runat="server" ID="ddlColor" AutoPostBack="true" OnSelectedIndexChanged="ddlColor_SelectedIndexChanged">
        <asp:ListItem Value="Red">Red</asp:ListItem>
        <asp:ListItem Value="Blue">Blue</asp:ListItem>
        <asp:ListItem Value="Green">Green</asp:ListItem>
    </asp:DropDownList>
    <br /><br />
    Selected color: <asp:Label runat="server" ID="lblSelectedColor" />
</ContentTemplate>
</asp:UpdatePanel>    

เราสามารถใช้ CodeBehind เพื่อเปลี่ยนสีได้:

protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
    lblSelectedColor.Text = ddlColor.SelectedValue;
    lblSelectedColor.BackColor = System.Drawing.Color.FromName(ddlColor.SelectedValue);
}

ง่ายเลยใช้ไหม ให้ลองรันทดสอบดู เมื่อคุณเลือกสีจาก Dropdown ตัวอักษรที่อยู่ใน Panel นั้นจะเปลี่ยนสีทั้งหมด และเนื่องด้วยที่ UpdatePanel อยู่รอบๆ postback จึงสามารถใช้งานโดยไม่มีการรีเฟรชหน้าเพจ แต่อย่างที่คุณเห็น ไม่ว่าคุณจะเปลี่ยนสีกี่ครั้งก็ตาม URL ก็ไม่ได้เปลี่ยนแปลงแต่อย่างใด ทำให้เราย้อนกลับไปเจอหน้าจอดำๆ: ScriptManager ควรเปิดใช้งาน EnableHistory ไว้พร้อมกำหนด OnNavigate event ดังนี้:

<asp:ScriptManager runat="server" ID="MainScriptManager" EnableHistory="true" OnNavigate="MainScriptManager_Navigate" />

ในส่วนของ CodeBehind ให้เพิ่ม dropdown list event และตั้งค่าการเชื่อมโยงไปยัง ScriptManager ดังตัวอย่าง:

protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
    lblSelectedColor.Text = ddlColor.SelectedValue;
    lblSelectedColor.BackColor = System.Drawing.Color.FromName(ddlColor.SelectedValue);
    MainScriptManager.AddHistoryPoint("SelectedColor", ddlColor.SelectedValue);
}

protected void MainScriptManager_Navigate(object sender, HistoryEventArgs e)
{
    string color = e.State["SelectedColor"];
    if (!String.IsNullOrEmpty(color))
    {
        lblSelectedColor.Text = color;
        lblSelectedColor.BackColor = System.Drawing.Color.FromName(color);
    }
}

ทดลองรันเพจ ทุกครั้งที่เปลี่ยนสี Panel URL ก็จะเปลี่ยนตามด้วย แต่เพจจะไม่มีการ Reload และคุณสามารถใช้ปุ่มย้อนกลับได้ทุกเมื่อ และ URL ก็จะเปลี่ยนด้วย แต่ URL จะถูกยึดค่า Default ตามระบบ ซึ่งทำให้เกิดความสับสนได้ คุณสามารถแก้ไขได้ ดังนี้:

Default.aspx#&&/wEXAQUNU2VsZWN0ZWRDb2xvcgUFR3JlZW6BwCysI0shYsZauxImdaPIIPEYSA==

ที่ URL เป็นเช่นนั้นเพราะเนื่องด้วยต้องการสร้างความปลอดภัยในการเข้าถึงข้อมูล แต่อย่างไรก็ตาม ขึ้นอยู่กับความสำคัญของข้อมูล หากไม่ได้มีความสำคัญมากนัก คุณสามารถกำหนด URL ได้ด้วยตนเองแทนที่จะใช้รหัสตามค่าของระบบซึ่งเน้นไปด้านความปลอดภัย สามารถทำได้โดยการตั้งค่า EnableSecureHistoryState ใน ScriptManager ดังตัวอย่าง:

<asp:ScriptManager runat="server" ID="MainScriptManager" EnableHistory="true" OnNavigate="MainScriptManager_Navigate" EnableSecureHistoryState="false" />

เมื่อเข้าสู่หน้าเว็บเพจ URL จะแสดงผลลักษณะดังนี้:

Default.aspx#&&SelectedColor=Red

มันดูง่ายขึ้น แต่มันคงไม่ดีแน่ ถ้าหากมีการป้อนค่าที่ผิดพลาด ซึ่งในบทต่อไปเราจะทำให้โครงสร้างภาษามีความระเบียบมากขึ้น