Web Data
การสร้าง Web Data คือการทำ Website ใน visual studio ซึ่งใช้ c# เป็นภาษาหลักในการพัฒนาขึ้นมา โดยการทำนั้นต้องอาศัยพื้นฐานการเขียนโปรแกรม 3 ภาษาหลักๆ คือ C#, javascript, SQL การทำงานของ Web Data จะเป็นแบบ MVC โดยจะแบ่งส่วนประกอบของการทำงานอย่างเห็นได้ชัดจากส่วนประกอบที่สร้างตัวมันขึ้นมา และในการพัฒนาจะแบ่งออกเป็น 3 ส่วนเช่นกัน ซึ่งการทำงานก็จะแตกต่างกันไปตามหน้าที่ของมัน …

Web Data  คือ การสร้างหน้าจอโดยทุก object จะเก็บไว้ในโฟลเดอร์เดียวกัน โดยใช้ DataSet และ WebUserControl แทน DataWindow และใน 1 หน้าจอประกอบด้วย 3 ส่วนคือ
1.       PageWeb
2.       DataSet
3.       Web UserControl (UC)

PageWeb
การสร้าง PageWeb แบบ WebData สร้างได้ 3 แบบคือ sheet, dialog, report(criteria) ซึ่งวิธีการสร้างแต่ละแบบแทบไม่ต่างกัน
** ข้อแตกต่างคือ sheet จะมีเมธอด SaveWebSheet, report จะมีเมธอดออก report และ dialog ไม่มีเมธอดพิเศษ

DataSet
คือไฟล์หรือ object ชนิดหนึ่ง ที่เป็นที่เก็บ DataTable. ใน 1 หน้าจอจะใช้ DataSet 1 object. ซึ่งใน DataSet สามารถสร้าง DataTable ได้หลาย object
DataTable นั้นเปรียบเสมือน table ในรูปแบบ oop สามารถนำมาแมพกับ WebUserControl และใช้จัดการเกี่ยวกับข้อมูลใน database หรือ xml ได้ โดยจะมีคลาส DataSourceTool มาช่วยจัดการติดต่อกับ database

Web UserControl (UC)
คือส่วนสร้าง UI ที่ทำงานร่วมกับ DataTable ซึ่งทำหน้าที่แมพฟิลด์ใน DataTable และนำไปเป็นส่วนประกอบของ PageWeb
การสร้าง UC นั้นสร้างได้ 2 แบบคือ แบบใช้ FormView กับใช้ Repeater. ซึ่งใน 1 UC จะเลือกใช้ ได้เพียง 1 object เท่านั้น (ใช้ผสมกันก็ไม่ได้ และใช้หลาย object ก็ไม่ได้)

** ข้อสังเกตุ: DataSet เปรียบเสมือน PBL และ DataTable + UC เปรียบเสมือน DataWindow

การสร้างหน้าจอ

1.สร้างโฟลเดอร์ใน Saving/Application/<ระบบ>/ โดยใช้ชื่อเดียวกับหน้าจอ โดยมี _ctrl ต่อท้าย (ถ้าหน้าจอชื่อ w_sheet_am_amsecwinsgroup ชื่อโฟลเดอร์ต้องชื่อ w_sheet_am_amsecwinsgroup_ctrl)

2.สร้างหน้าจอในโฟลเดอร์ที่สร้างไว้ (คลิกขวาที่โฟลเดอร์ -> add -> new item…) เลือกแบบ Web Form using Master Page พอกดปุ่ม Add ให้เลือก Frame.Master

3.ในหน้า UI (ไฟล์ .aspx) สามารถใส่ javascript ไป 2 ฟังก์ชันก่อนใน Content1 ดังนี้
<script type="text/javascript">
            function Validate() {
                            return confirm("ยืนยันการบันทึกข้อมูล");
            }
            function SheetLoadComplete() {
            }
</script>

4.ในหน้า C# หรือ code behind (ไฟล์ .cs) ให้เปลี่ยนการ inherit คลาสจาก System.Web.UI.Page เป็น PageWebSheet, WebSheet และทำการ implement interface WebSheet โดยใช้เมาส์คลิกขวาเลือก Implement Interface
// หรือจะ copy code นี้ไปวางเลยก็ได้

public void InitJsPostBack()
{
}

public void WebSheetLoadBegin()
{
}

public void CheckJsPostBack(string eventArg)
{
}

public void SaveWebSheet()
{
}

public void WebSheetLoadEnd()
{
}

หมายเหตุ 1: ควรมี using System.Data; ด้วย (ต้องเติมเองเพราะค่า default ไม่มี)
หมายเหตุ 2: ต้องลบเมธอด protected void Page_Load(object sender, EventArgs e) ทีมีอยู่เดิมออกด้วย


การสร้าง DataSet และ DataTable

ก่อนจะเริ่มสร้าง DataSet ต้องตรวจสอบไฟล์ web.config ในส่วน ConnectionString ก่อน ให้ใส่ค่าสำหรับ connect database ให้ถูกต้อง
*หมายเหตุ: การใส่ค่า ConnectionString ใน web.config ใช้เพื่อให้ DataSet สามารถดึงข้อมูลมาสร้าง DataTable ได้ แต่จะไม่เอาค่านี้ไปใช้ในการรันระบบ (การรันระบบจะดึงจาก xmlconfig เท่านั้น)
** โค๊ดตัวอย่างการใส่ ConnectionString **
<connectionStrings>
<add name="ConnectionString" connectionString="Data Source=localhost/iorcl;Persist Security Info=True;User ID=iscocen;Password=iscocen;Unicode=True"         providerName="System.Data.OracleClient" />
</connectionStrings>
****โดยจะสามารถเปลี่ยนที่อยู่ของ DB ได้ที่คำว่า localhost/iorcl;
Localhost และหลัง / เป็นชื่อของ sid ของ DB ,สามารถเปลี่ยน ID และ Password ได้ที่
User ID=iscocen;Password=iscocen;


เริ่มสร้าง DataSet และ DataTable

1.สร้าง DataSet ในโฟลเดอร์เดียวกับหน้าจอ (คลิกขวาที่โฟลเดอร์ -> add -> new item…) ไม่ต้องเปลี่ยนชื่อไฟล์
2.สร้าง DataTable โดยเปิด ToolBox ลาก table adapter มาจะเจอ wizard ให้ทำตามขั้นตอนจนถึงใส่ sql ให้เขียน sql เพื่อที่จะดึง column ที่เราต้องการใช้


การสร้าง Web UserControl

(ต่อไปจะเรียกว่า UC) ให้คลิกขวาที่โฟลเดอร์เดียวกับหน้าจอแล้วคลิก add -> new item… จากนั้นก็เลือก Web User Control (อยู่ในหัวข้อ WEB) ควรตั้งชื่อไฟล์ใช้ Ds นำหน้าและต่อด้วยหน้าที่ของ UC นั้นๆ เช่น DsMain, DsDetail, DsList, DsDept, DsLoan, DsShare เป็นต้น

หน้า UI ส่วนสำคัญ
1.แทก CSS
<link id="css1" runat="server" href="../../../JsCss/DataSourceTool.css" rel="stylesheet" type="text/css" />

2.1 แทกสำหรับ FormView ใช้เฉพาะ FormView หรือหน้าจอรูปแบบ Free form
<asp:FormView ID="FormView1" runat="server" DefaultMode="Edit">
    <EditItemTemplate>

</EditItemTemplate>
</asp:FormView>

2.2 แทกสำหรับ Repeater ใช้เฉพาะ Repeater หรือหน้าจอรูปแบบ Tabular
<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>

</ItemTemplate>
</asp:Repeater>

3.วาด UI ด้วยคำสั่ง HTML ตามต้องการ (ดูรายละเอียดในหัวข้อ design UI)

หน้า C# ส่วนสำคัญ
1.เปลี่ยนการ inherit จาก System.Web.UI.UserControl เป็น DataSourceFormView หรือ DataSourceRepeater อย่างใดอย่างหนึ่งตาม object ของ UC

2.property DATA ตัวอย่างการสร้างจาก AMSECWINSGROUP DataTable
public DataSet1.AMSECWINSGROUPDataTable DATA { get; private set; }


3.method InitDs() ตัวอย่างการสร้างจาก AMSECWINSGROUP DataTable (แบบ repeater)
public void InitDs(PageWeb pw)
{
    //ปิด css1 ตอนรันไทม์ เปลี่ยนไปใช้ css ของเฟรมแทน
    css1.Visible = false;
    //ประกาศ dataset
    DataSet1 ds = new DataSet1();
    //ตั้งค่า property DATA เอา DataTable จาก DataSet มาใช้
    this.DATA = ds.AMSECWINSGROUP;
    //ตั้งชื่อ event ItemChanged ในรูปแบบ On<ชื่อ WebUserControl>ItemChanged
    this.EventItemChanged = "OnDsDetailItemChanged";
    //ตั้งชื่อ event ItemChanged ในรูปแบบ On<ชื่อ WebUserControl>ItemChanged
    this.EventClicked = "OnDsDetailClicked";
 
    //เรียกคำสั่งในคลาสแม่ให้การ init ก่อน
   //argument ที่ 2 ใส่ object ของ WebUserControl
    //argument ที่ 4 ใส่ชื่อขึ้นต้นตัวเล็ก)
    this.InitDataSource(pw, Repeater1, this.DATA, "dsDetail");
 
    //กรณีมีปุ่มให้ใช้คำสั่งนี้ add เพื่อให้เกิด event clicked ที่ปุ่ม
    this.Button.Add("b_del");//ถ้าหน้าจอไม่มีปุ่มให้ลบหรือคอมเมนท์บรรทัดนี้

    //เรียกให้คลาสแม่ทำงานอีกครั้ง (เป็นคำสั่งการรวม object ต่างๆ เข้าด้วยกัน)
    this.Register();
}

หน้า C# ส่วนประกอบอื่นๆ ซึ่งอาจมีหรือไม่ต้องมีก็ได้
Method Retrieve ตัวอย่าง
public void Retrieve(String application)
{
    string sql = "select * from amsecwinsgroup where application='" + application + "' and coop_control='" + state.SsCoopControl + "' order by application, group_order";
    DataTable dt = WebUtil.Query(sql);
    //ทำยังไงก็ได้ให้ได้ DataTable หรือ Xml String ที่มีข้อมูล แล้วนำมาใช้คำสั่ง ImportData
    this.ImportData(dt);
}

Method Retrieve DropdownList ตัวอย่าง
public void DdGroupCode(string application)
{
    string sql =@"
select group_code, group_code || ' - ' || group_desc as group_name, 1 as sorter  
from  amsecwinsgroup
where
    coop_control='" + state.SsCoopControl +@"' and
    application='" + application +@"'
union
select '', '', 0 from dual order by sorter, group_code
";
    DataTable dt = WebUtil.Query(sql);
    this.DropDownDataBind(dt, "group_code", "group_name", "group_code");
}

การนำ UC ไปใช้กับ Page
1.เปิดในหน้า UI ในโหมด Design แล้วลาก Web User Control จาก Solution Explorer มาวางใน web sheet
2.ดูในโหมด Source เปลี่ยนชื่อ ID ของ object โดยใช้ชื่อเดียวกับ WebUserControl แต่ขึ้นต้นด้วยตัวเล็ก (โปรแกรมจะตั้งชื่อให้อัตโนมัติโดยมีตัวเลขต่อท้าย เราต้องลบตัวเลขนั้นออกด้วย)
<!— ตัวอย่าง DsMain.ascx เปลี่ยนชื่อ ID จาก DsMain1 เป็น dsMain à
<uc1:DsMain ID="dsMain" runat="server" />

3.สร้าง javascript ตามที่เคยเขียนไว้ในเมธอด InitDs  ของ WebUserControl
//ประกาศตัวแปร ควรอยู่บริเวณบนสุดใน tag <script>
var dsMain = new DataSourceTool();

//ประกาศฟังก์ชันสำหรับ event ItemChanged
function OnDsMainItemChanged(s, r, c, v) {

}

//ประกาศฟังก์ชันสำหรับ event Clicked
function OnDsMainClicked(s, r, c) {

}

4.ใน code behind ของ web sheet ในเมธอด InitJsPostBack() ให้เรียกคำสั่ง InitDs (หากในหน้า web sheet มี WebUserControl หลายตัวก็เรียกเรียงกันได้เลย ดังตัวอย่าง)
public void InitJsPostBack()
{
    dsMain.InitDs(this);
    dsDetail.InitDs(this);
}

** หลังจากนี้การเขียนโปรแกรมก็ขึ้นอยู่กับการทำงานของแต่ละหน้าจอ **