Thursday, April 26, 2012

Cross-page PostBack , PostBackUrl

บทความนี้เป็นบทความต่อเนื่องจาก บทความเรื่อง PostBack ผมได้ทิ้งท้ายไว้ว่า PostBack นั้นใช้งานเฉพาะใน single page และ หากต้องการที่จะทำ Postback ระหว่าง Page นั้นผมก็จะมาพูดในบทความนี้ โชคดีที่เราอ้างอิง ASP.NET 2.0 เพราะว่าเป็น approach ที่เพิ่งจะมีใน version นี่ครับ ส่วนท่านที่ใช้ version ก่อนหน้านี้ รู้สึกว่าจะไม่มีนะครับ ไม่มีไม่ไดหมายความว่าทำไม่ได้นะครับ เขาใช้ Server.Transfer ซึ่งเราก็จะพูดกันใน บทความนี้ด้วยเช่นเดียวกัน
เรามาพูดถึง เรื่อง Cross-Page postbacks กันต่อครับว่าสิ่งที่เป็นส่วนประกอบพื้นฐานที่ทำให้เกิดการทำงานลักษณะนี้ก็คือ propertyที่เรียกว่า PostBackUrl ซึ่ง กำหนดโดย interface ที่ชื่อ IButtonControlและใช้งานใน Button controls ต่าง ๆ เช่น ImageButton, LinkButton, และก็Button
การใช้งาน cross-page posting สามารถทำได้โดย การกำหนด ค่า PostBackUrlให้อ้างอิงไปยัง webpage ที่เราต้องการ ( web form นะครับ ) เมื่อใดที่user คลิก ปุ่ม Page จะทำการ posts ไปยัง page ที่กำหนดไว้ที่ PostBackUrlพร้อมกับค่าต่าง ๆ ใน input controls ของ page ปัจจุบัน คงพอจะเห็นภาพนะครับ เราลองมาดูตัวอย่างกันนะครับ
สมมุติว่า เราสร้าง web form (CrossPage1.aspx)ที่มี text box อยู่สองtext box และ button ซึ่งเราจะกำหนด ให้ post ไปยัง page ที่ชื่อว่าCrosspage2.aspx
  1. .  
  2. .  
  3. <head runat="server">  
  4.     <title>Untitled Page</title>  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8. <div>  
  9.   
  10.         <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>  
  11.         <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>  
  12.         <asp:Button ID="cmdSubmit" runat="server" Text="Submit" Width="60px" PostBackUrl="~/CrossPage2.aspx" /></div>  
  13. </form>  
  14. </body>  
  15. </html>  
และใน CrossPage2.aspx.cs สามารถที่ ตรวจสอบการ post จาก CrossPage1.aspx ได้โดยใช้ Page.PreviousPage property ตามตัวอย่าง
  1. .  
  2. .  
  3. using System.Web.UI.HtmlControls;  
  4.   
  5. public partial class Default2 : System.Web.UI.Page  
  6. {  
  7.     protected void Page_Load(object sender, EventArgs e)  
  8.     {  
  9.         if (Page.PreviousPage != null && Page.PreviousPage.IsCrossPagePostBack)  
  10.         {  
  11.                  TextBox tFirstName = (TextBox)Page.PreviousPage.FindControl("txtFirstName");  
  12.                  TextBox tLastName = (TextBox)Page.PreviousPage.FindControl("txtLastName");  
  13.                  Label1.Text = "Hello " + tFirstName.Text + " " + tLastName.Text;  
  14.         }  
  15.     }  
  16. }  
จาก ตัวอย่าง code นั้นสามารถอธิบายได้ว่า หากมีการ post มาจาก pageก่อนหน้า ( ซึ่งค่า PerviousPage.IsCrossPagePostBack จะเท่ากับ true และPreviousPage นั้จะต้องไม่เป็น null ด้วย ) และแสดงข้อมูลที่กรอก ในTextBox txtFirstName และ txtLastName เป็นตัวอย่าง ง่าย ๆสามารถนำไปประยุกค์ใช้ได้เลย นะครับ
มาพิจารณาตรงนี้เพิ่มเติมสักนิดนะครับเรื่องวิธีการส่งค่าระหว่าง Pageหรือวิธีการทำเพื่อให้สามารถ ส่งค่าระหว่าง page ได้วิธีแรกก็คือวิธีที่แสดงไว้ในตัวอย่างแรก นะครับเราสามารถที่จะใช้FindControl method เพื่อตรวจสอบหา control id ที่กำหนดซึ่งเป็นวิธีที่นิยมใช้กัน
มีอีกวิธีหนึ่ง คือการกำหนด previous page ใน PreviousPageTypedirective ใน page ที่จะรับข้อมูลในตัวอย่างของเราก็คือใน CrossPage2.aspxวิธีนี้จะทำให้เราสามารถเข้าถึง public member ของ web form ได้นะครับโดยไม่ต้องทำการ casting ดังจะแสดงให้ดู
เราจะทำการเพิ่ม property ให้กับ CrossPage1.aspx.cs ดังนี้นะครับ
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3. }  
  4. public string FirstName  
  5. {  
  6.    get { return (!string.IsNullOrEmpty(txtFirstName.Text)) ? txtFirstName.Text : string.Empty; }  
  7. }  
  8. public string LastName  
  9. {  
  10.    get { return (!string.IsNullOrEmpty(txtLastName.Text)) ? txtLastName.Text : string.Empty; }  
  11. }  
และที่ CrossPage2.aspx เราจะเพิ่ม PreviousPageType ต่อจาก Page directive ดังนี้
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CrossPage2.aspx.cs" Inherits="Default2" %>  
  2. <%@ PreviousPageType VirtualPath="CrossPage1.aspx" %>  
  3. .  
  4. .  
ซึ่งจะทำให้เราสามารถอ้างอิงได้ ดังนี้
  1. .  
  2. .  
  3. if (Page.PreviousPage != null &amp;&amp; Page.PreviousPage.IsCrossPagePostBack)  
  4. {  
  5. string lFirstName = PreviousPage.FirstName;  
  6. string lLastName = PreviousPage.LastName;  
  7. Label1.Text = "Hello " + lFirstName + " " + lLastName;  
  8. }  
  9. .  
  10. .  
ครับ พอจะเห็นภาพนะครับ วิธีที่สองนี้เป็นวิธีที่ดีอีกเหมือนกันแต่ข้อด้อยก็คือ มัน specific มากเกินไปครับก็คือมันจะต้องเป็นการเรียกผ่านมาจาก CrossPage1.aspx เท่านั้นในบ้างเหตุการเราอาจะต้องการ ให้ page หนึ่งสามารถรับค่าจาก page ต่าง ๆกันได้ ข้อดีก็คือมันสามารถอ้างอิง public member ได้เลยเพราะมันเป็นstrongly type access
คงพอจะได้ concept นะครับ ที่การทำ cross-page postbackนี่สามารถทำได้อีก วิธีหนึ่งโดยใช้ Server.transferผมจะเอาไว้พูดในบทความถัดไปนะครับ เพราะเริ่ม เมื่อยแล้วสำหรับบทความนี้ใครสงสัยอะไรก็ ถามกันได้นะครับ หรือจะ mail มาถามก็ได้ 

No comments:

Post a Comment