03. วิธีสร้าง Dialog และ IFrame

1. วิธี Create  เริ่มจากเลือก Saving ดังรูปนี้

ไปที่  Application -> เลือกระบบ -> dlg -> คลื๊กขวา -> เลือก Add -> New Item   ดังรูปนี้

เลือก Template เป็น Web Form -> ตั้งชื่อให้สื่อความหมาย

มาตราฐานการตั้งชื่อ  w_dlg_ชื่อ Dialog.aspx   
ตัวอย่าง    w_dlg_dp_account_search.aspx  -> กด Add ดังรูปนี้

หลังจาก Create Dialog เสร็จสมบูรณ์จะมี object เกิดขึ้น 3 ตัวด้วยกัน คือ

• .aspx    จะประกอบด้วยหน้า web page ควบคุมหน้าจอ (UI) สำหรับแทรก code HTML, Java Script, Css และ tag ASP.Net
• .aspx.cs    จะเป็นส่วนของ code behind สำหรับเขียนคำสั่งการทำงานต่างๆ เช่น การดึงข้อมูลจาก ดาต้าเบส เรียกใช้ web service ประมวลผลต่างๆ
• .aspx.designer.cs  เป็นไฟล์ที่ Visual Studio สร้างอัตโนมัติ ห้ามแก้ไข code ในส่วนนี้
  

รูปแสดง object file (.aspx)


รูปแสดง object file (.aspx.cs)


รูปแสดง object file (.aspx.designer.cs)

2. วิธีการ inherited base class PageWebSheet
using Saving.CmConfig;
namespace Saving.Applications.ap_deposit.dlg
{
   public partial class WebForm1 : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {

       }
    } 
}
แก้ไขเป็น
namespace Saving.Applications.ap_deposit
{
    public partial class w_dlg_test001 : PageWebDialog, WebDialog
    {
      
    }
}
PageWebDialog คือ Base Class
WebDialog คือ Interface
*ให้ using Saving.CmConfig; ก่อน

3. implement interface
คลิ๊กขวา WebSheet เลือก Implement Interface -> Implement Interface ดังรูปนี้

ดังนั้นจะได้  4  method ที่สามารถเรียกใช้งานได้ ดังนี้

1.  public void InitJsPostBack()

2. public void WebDialogLoadBegin()

3. public void CheckJsPostBack(string eventArg)

4. public void WebDialogLoadEnd()

คำอธิบายฟังก์ชัน

1. InitJsPostBack()        เป็นการ  register event สำหรับการใช้งานในหน้าจอนั้นๆ

2. WebDailogLoadBegin() เป็น method แรกเมื่อ sheet ดังกล่าวถูกเปิดขึ้น 

(ห้ามใช้ Pageload() อีก)

3. CheckJsPostBack(string eventArg) เป็นฟังก์ชันไว้สำหรับตรวจสอบ event

ที่มีการ register ไว้ กรณีมีการเรียกใช้งาน event นั้นๆ

4. WebDialogLoadEnd()   เป็น method สุดท้ายของ web sheet นี้

การส่งค่า Argument ระหว่าง Dialog หรือ IFrame ให้กับ WebSheet

- กรณีส่ง Args[] จาก WebSheet ไปยัง Dialog หรือ IFrame
   WebSheet จะส่ง Args[] ไปยัง Dialog ผ่านทาง JavaScript โดยใช้ Gcoop.OpenDlg ซึ่งจะเป็นการเปิด Dialog ทาง WebSheet พร้อมทั้งส่ง Args[] ไปยัง Dialog ด้วยดังนี้

รูปแบบ Gcoop.OpenDlg(ความกว้าง(px), ความยาว(px), “ชื่อหน้า Dialog.aspx”, “?ชื่อArgs=value”);

ตัวอย่าง Gcoop.OpenDlg(430, 240, "w_dlg_dp_printbook.aspx", "?deptAccountNo=" + deptAccountNo);
กรณีหลาย Args Gcoop.OpenDlg(430, 240, "w_dlg_dp_printbook.aspx", "?deptAccountNo=" + deptAccountNo + "&memberNo=" + memberNo);
 
  WebSheet จะส่ง Args[] ไปยัง IFrame ผ่านทาง JavaScript โดยใช้ Gcoop.OpenIFrame ซึ่งจะเป็นการเปิด IFrame ทาง WebSheet พร้อมทั้งส่ง Args[] ไปยัง IFrame ด้วยดังนี้

รูปแบบ Gcoop.OpenIFrame(ความกว้าง(px), ความยาว(px), “ชื่อหน้า IFrame.aspx”, “?ชื่อArgs=value”);
ตัวอย่าง Gcoop.OpenIFrame(430, 240, "w_dlg_dp_printbook.aspx", "?deptAccountNo=" + deptAccountNo);
กรณีหลาย Args Gcoop.OpenIFrame(430, 240, "w_dlg_dp_printbook.aspx", "?deptAccountNo=" + deptAccountNo + "&memberNo=" + memberNo);

  Dialog หรือ IFrame จะรับค่าจาก WebSheet ผ่านทาง codebehind โดยใช้ Request[“”] ดังนี้

รูปแบบ  ชนิดตัวแปร  ชื่อตัวแปร = Request[“ชื่อตัวแปรที่ WebSheet ส่งมา”];
ตัวอย่าง  String deptAccountNo = Request["deptAccountNo"];
     String memberNo = Request["memberNo"];

- กรณีส่ง Args[] จาก Dialog ไปยัง WebSheet
 Dialog จะประกาศ function ให้ WebSheet ใช้งานผ่านทาง JavaScript โดยใช้ window.opener พร้อมทั้งส่ง Args[] ไปยัง WebSheet ด้วยดังนี้

รูปแบบ window.opener.ชื่อฟังก์ชัน(Args[1],Args[2],...);
ตัวอย่าง window.opener.NewAccountNo(dept_no);

   WebSheet จะเรียกใช้ function ได้ผ่านทาง JavaScript โดยตั้งชื่อ function ให้เหมือนกับที่ Dialog ได้ประกาศไว้ ดังนี้

รูปแบบ  function ชื่อที่Dialogได้ประกาศไว้(Args[]ตามที่ได้ประกา๋ศไว้){ }
ต้วอย่าง
function NewAccountNo(accNo){
    .
    .
    .
}
- กรณีส่ง Args[] จาก IFrame ไปยัง WebSheet
 Dialog จะประกาศ function ให้ WebSheet ใช้งานผ่านทาง JavaScript โดยใช้ parent.ชื่อฟังก์ชัน พร้อมทั้งส่ง Args[] ไปยัง WebSheet ด้วยดังนี้

รูปแบบ parent.ชื่อฟังก์ชัน(Args[1],Args[2],...);
ตัวอย่าง parent.NewAccountNo(dept_no);

ส่วนหน้า WebSheet สามารถใช้เหมือนกับแบบ Dialog ได้เลย