[VB.NET] Passing value from popup window : การส่งค่าจาก Popup Window กลับไปยัง Form ที่อยู่อีก Window

posted on 14 Aug 2009 12:47 by veeza in Programming

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

พอดีไปเจอบทความ Passing value from popup window to parent form's TextBox by mbanavige จาก asp.net เห็นว่า Code ไม่ยาก และสามารถนำไปประยุกต์ใช้ได้หลากหลายเลยนำมาฝากกันครับ

Passing value from popup window to parent form's TextBox แปลตามความเข้าใจก็คือ การส่งค่าจาก Popup Window กลับไปยัง Form ที่อยู่อีก Window โดย Form ที่รับค่าจะต้องมี MasterPage ด้วยนะครับ

เิปิด Microsoft Visual Studio 2005 แล้วเลือก New Web Site... [ถ้าใครมี Web Site อยู่แล้วก็ข้ามขั้นตอนนี้ไปได้เลยนะครับ]
Passing value from popup window #01

แล้วให้เลือก ASP.NET Web Site ครับ

ให้ New File... ขึ้นมา [Ctrl+N ก็ได้ครับ]

ให้ New File... ขึ้นมา [Ctrl+N ก็ได้ครับ] ด้วยการสร้าง Master Page ขึ้นมาก่อน
Passing value from popup window #04

ให้ New File... ขึ้นมา [Ctrl+N ก็ได้ครับ] ด้วยการสร้าง Master Page ขึ้นมาก่อน

คราวนี้ให้ New File... ขึ้นมา เป็น Web Form นะครับ ตั้งชื่อว่า Parent.aspx และอย่าลืมติ๊กเลือก Select MasterPage ด้วยนะครับ
Passing value from popup window #05

สร้าง TextBox, สร้าง Button ขึ้นมาก่อน

ในส่วนของ Page Source หน้า Perent.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <script type="text/javascript">
      function OpenPopup() {
        // ใส่ Script window.open เพื่อให้ Popup.asp เปิดขึ้นมา
       window.open("Popup.aspx","List","scrollbars=no,resizable=no,width=530,height=300");
     return false;
      }
   </script>
<asp:TextBox ID="TextBox1" Runat="server" />
<asp:Button ID="Button1" Runat="server" Text="Category" />
</asp:Content>

ในส่วนของ Source Code หน้า Perent.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   If Not IsPostBack Then
   '--- คลิ๊กปุ่ม Button เรียกใช้ฟังก์ชั่น OpenPopup
      Me.Button1.Attributes.Add("onclick", "javascript:return OpenPopup()")
   End If
End Sub

ให้ New File... ขึ้นมา เป็น Web Form ตั้งชื่อว่า Popup.aspx ครับ
Passing value from popup window #07

สร้าง AccessDataSource และ GridView
ในส่วน AccessDataSource ใช้ Database NorthWind.mdb* เลือก Table Category
*NorthWind.mdb หาได้จาก C:\Program Files\Microsoft Office\OFFICE11\SAMPLES
จากตัวอย่างผมได้สร้าง Folder db เพื่อเก็บ NorthWind.mdb
Passing value from popup window #08

ในส่วนของ Page Source หน้า Popup.aspx

<form id="form1" runat="server">
<script language="javascript">
    function GetRowValue(val) {
     // สร้างฟังก์ชั่นการคืนค่ากลับ
     // อย่าลืม ContentPlaceHolder1 และ TextBox1 ต้องให้ตรงกันนะครับ       window.opener.document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value = val;
      window.close();
}
</script>
<div>
    <%-- อย่าลืมสร้าง Folder db เพื่อเก็บ Northwind.mdb ก่อนนะครับ --%>
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" dataFile="db/Northwind.mdb"
            SelectCommand="SELECT [CategoryName], [Description] FROM [Categories]">
    </asp:AccessDataSource>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" CellPadding="4" ForeColor="#333333" GridLines="None">
      <Columns>
        <%-- สร้าง TemplateField --%>
        <asp:TemplateField>
          <ItemTemplate>
            <%-- สร้าง Button ใน ItemTemplate --%>
            <asp:Button ID="btnSelect" runat="server" Text="Select" />
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CategoryName" HeaderText="Category" SortExpression="CategoryName" />
        <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
      </Columns>
      <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
      <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
      <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
      <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
      <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
      <EditRowStyle BackColor="#999999" />
      <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>
</div>
</form>

ในส่วนของ Source Code หน้า Popup.aspx.vb

'--- ใช้ Event RowDataBound ในการ Select ค่ากลับไปยัง Form
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If (e.Row.RowType = DataControlRowType.DataRow) Then
            DirectCast(e.Row.FindControl("btnSelect"), Button).Attributes.Add("onclick", "javascript:GetRowValue('" & e.Row.Cells(1).Text & "')")
        '--- Cells(1) = คอลัมภ์ที่ 2 (ส่งค่า Category กลับไปยัง Form)
        End If
End Sub

ทดสอบโปรแกรม เมื่อทำการกดปุ่ม Category จะมี Popup window ขึ้นมา และมีปุ่ม Select ให้เลือกค่า Category ไปใส่ยัง Form
Passing value from popup window #09