การพัฒนาเว็บแอพพลิเคชั่น Contoso University ด้วย ASP.Net 4 ตอนที่ 2

 

บทความนี้สาธิตการพัฒนาระบบเว็บแอพพลิเคชั่น Contoso University ซึ่งผมได้ศึกษาจากเว็บไซท์ http://asp.net/

หากต้องการอ่านบทความต้นฉบับจะอยู่ที่

http://www.asp.net/entity-framework/tutorials/the-entity-framework-and-aspnet-–-getting-started-part-1

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

ในตอนที่ 2 เราจะสร้างเพจข้อมูลนักเรียน และจัดการข้อมูลนักเรียนก และเพจการแสดงรายวิชาของสาขาที่ระบุ

 

จุดประสงค์

สร้างเพจการจัดการข้อมูลนักเรียน และเพจการแสดงรายวิชา

 

ดำเนินการ

1.ให้เพิ่มเว็บฟอร์มใน Project ตั้งชื่อว่า Students.aspx และเลือกใช้ MasterPage แล้วคลิก Add

 

2. เลือก Master page  แล้วคลิกปุ่ม OK

 

3. เมื่อเพจ Student.aspx ได้ถูก Load ขึ้นมาให้ เพิ่ม Code ลงไปในหน้า html code ในบรรทัดที่ 8 – 9

 

4. หลังจากที่เราได้สร้าง EDM เอาไว้ในตอนที่ 1 เราจำเป็นต้อง Build Project ก่อนใช้งาน
ด้วยการคลิกขวาที่ชื่อ Project ใน Solution Explorer แล้วเลือก Build

 

5. คลิกที่ EntityDatasource เพื่อกำหนดค่า ด้วยการเลือก Configure Data Source

 

5. ระบุ Named Connection ชื่อ SchoolEntities และ ContainerName ดังตัวอย่าง แล้วคลิก Next

 

6. ที่ช่อง EntitySetname เลือก People และเลือกใช้ทุกฟิลด์ และให้ EDS สามารถแก้ไข และสามารถลบข้อมูลได้ แล้วคลิก Finish

 

7. เราต้องกำหนดค่าให้ database สามารถลบข้อมูลได้ เนื่องจาก ตาราง Person มี คสพ กับตารางอื่นๆ หากไม่กำหนดค่านี้จะเกิด Error เมื่อสั่งลบข้อมูล (!!! หมายเหตุ ให้เราสร้าง Database Diagram ที่ฐานข้อมูล School )

ให้คลิกที่หน้าต่าง Database Explorer  และคลิกสองครั้งที่ Diagram_0

 

8. VS 2010 จะเปิดหน้าต่างแสดง คสพ ของ  Database ขึ้นมา ให้คลิกขวาที่เส้น คสพ ของ Person และ StudentGrade

 

9. ที่หน้าต่าง Properties ทางด้านขวา ให้คลิกกำหนดค่า Delete เป็น Cascade

เสร็จแล้วให้บันทึก

 

10. การเปลี่ยนแปลงข้อมูลที่ระดับ Database เราต้องปรับปรุงข้อมูลที่ EDM ด้วย

ด้วยการคลิกขวาที่ Entity Data Model  แล้วเลือก Update Model from database

 

11.ที่หน้าการ refresh ให้คลิก Person แล้วคลิกปุ่ม Finish

 

12. เมื่อการปรับปรุง EDM เสร็จสิ้นแล้วให้สร้างเพจการแสดงรายชื่อผู้เรียน

ด้วยการลาก GridView วางในเพจ Students.aspx แล้วกำหนดค่าแหล่งข้อมูลให้เป็น EDS ที่ได้สร้างไว้ก่อนหน้า

 

ให้ Enable ตามตัวอย่างนี้

 

 

13.เลือก Field ที่ต้องการแสดงดังนี้

 

14.และเปลี่ยนทั้งสองฟิลด์ให้เป็น Template Field ด้วยการคลิกที่ Convert to template…. ทั้งสองฟิลด์

แล้วคลิกปุ่ม OK

 

15. ที่หน้าเพจ Source View ที่ Template FirstName ให้เปลี่ยน Code ดังนี้

อธิบาย ที่เทมเพลต Item ใช้เพื่อแสดงข้อมูล เราได้นำคอนโทรลลาเบลมาวางสองตัวและผูกกับข้อมูล LastName และ FirstName

ส่วนเทมเพลต Edititem ให้แสดงกล่องข้อความ FirstName , LastName เพื่อให้ป้อนข้อมูลใหม่ลงไป

 

16. การเพิ่มประสิทธิภาพของ EntityDatasource

ในเอกสารได้แนะนำให้เราลบ Attrubute Connection String และ DefaultContainerName แล้วเปลี่ยนไปใช้ ContextTypeName=”…” แทน มีข้อดีคือมีประสิทธิภาพสูงกว่าแบบเดิมเพราะเราชี้ไปยังแหล่งข้อมูลที่ต้องการทำงานด้วย โดยตรง

 

 

17. แล้วทดลองรันเพจนี้ด้วยการกด F5 จะได้ผลดังนี้

 

หากลองคลิกลิ้ง Edit จะแสดงหน้าการแก้ไขดังนี้

 

18.ต้องการเพิ่มคอลัมน์การแสดงรายวิชาที่ผู้เรียนได้เรียน ให้คลิกที่ EntityDatasource แล้วไปเพิ่ม Entity ชื่อ StudentGrade ลงไปที่คุณสมบัต Include

และแก้ไขที่ gridview ก่อนแล้วเพิ่ม Template Field ต่อท้ายลงไปดังนี้

 

แล้วทดลองรันเพจดูจะแสดงจำนวนรายวิชาออกมาดังนี้

 

19.จากนั้นเราจะมาสร้าง ฟอร์มกรอกข้อมูลนักเรียนกัน โดยการใช้ Detailview 

ก่อนอื่นให้เพิ่ม WebForm เข้าไปใน Project ตั้งชื่อว่า StudentAdd.aspx แล้วลากคอนโทรล DetailView ไปวางในฟอร์ม และลาก Entity Data control เข้ามาด้วย

และกำหนดค่าดังนี้

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Add New Students</h2>
    <asp:EntityDataSource ID="StudentsEntityDataSource" runat="server"
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="False"
        EnableInsert="True" EntitySetName="People">
    </asp:EntityDataSource>
    <asp:DetailsView ID="StudentsDetailsView" runat="server" 
        DataSourceID="StudentsEntityDataSource" AutoGenerateRows="False"
        DefaultMode="Insert">
        <Fields>
            <asp:BoundField DataField="FirstMidName" HeaderText="First Name" 
                SortExpression="FirstMidName" />
            <asp:BoundField DataField="LastName" HeaderText="Last Name" 
                SortExpression="LastName" />
            <asp:BoundField DataField="EnrollmentDate" HeaderText="Enrollment Date" 
                SortExpression="EnrollmentDate" />
             <asp:CommandField ShowInsertButton="True" />
       </Fields>
    </asp:DetailsView>
</asp:Content>

 

จาก Tag ข้างต้น ที่ EDS เป็นการรุะบุแหล่งข้อมูลที่ใช้งาน นั้นคือ person และ tag Detailview ใช้เชื่อมต่อกับ EDS ที่ได้สร้างไว้แล้ว โดยระบุ attrib ว่าไม่ต้องสร้างแถวให้ เพราะเราจะสร้างเองในแท็ก Field  ภายใน tag field จะประกอบไปด้วย 3 แถวคือชื่อ สกุล วันที่ลงเรียน และแถวสุดท้ายเป็นปุ่มแทรกข้อมูล

เมื่อโค้ดแล้วให้ลองรันเพจดู แล้วทดสอบโค้ดดูนะครับ

 

20. ต่อไปเราจะสร้างเพจการแสดงงรายวิชาจากสาขาวิชา

ให้เราสร้างเพจขึ้นใหม่ชื่อว่า Courses.aspx แล้วลากคอนโทรล EntityDatasouce และ Dropdownlist ลงไป และระบุโค้ดลงใน source view ดังนี้

จะเห็นว่าที่ EDS ระบุุให้เชื่อมต่อไปยัง Departments

และที่ Dropdownlist ให้เรียกใช้ EDS และเรียกฟิลด Name ออกไปแสดง และให้ Value เป็นค่า ID ของ Department ทดลองรันเพจนี้จะได้ดังนี้

 

สำหรับบทที่ 2 ตัดจบเพียงเท่านี้ก่อนนะครับ

Happy Coding