การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 1 ‐ 

การพัฒนาเว็บเซอรวิสดวย MS Visual 2008 Express Edition 

 

MS Visual 2008 Express Edition เปนเคร่ืองมือในการพัฒนาเว็บเซอรวิสโดยไมเสียคาใชจาย ซึ่งสามารถดาวนโหลด

ไดที่ http://www.microsoft.com/express/download/  ซึ่งปฏิบัติการคร้ังนี้จะเปนการสรางและเรียกใชเว็บเซอรวิส

อยางงาย คือ การสรางเว็บเซอรวิสการคํานวณ บวก ลบ คูณ หาร และการเรียกใชเซอรวิสที่สรางขึ้นมา หลังจากนั้นใหนิสิต

ทดลองเขียนเว็บเซอรวิสเพื่อเรียกใชเซอรวิสของ ปตท. http://www.pttplc.com/TH/nc_oi.aspx 

การสรางเว็บเซอรวิส 

เปนการสรางเซอรวิสที่มีชื่อวา CalculatorServices ประกอบดวย operation  4 operations คือ Addition, 

Subtract, Multiply, and Divide 

1. สรางเว็บไซตใหม ไปที่ File > New Web Site ที่หนาตาง Recent Project 

2. เลือกเทมเพลต ASP.NET Web Services จากนั้นเลือกตําแหนงที่เก็บเอกสารโปรเจค โดยใหต้ังชื่อโปรเจคเปน

รหัสนิสิตเก็บที่ไดรฟ D:\MS_รหัสนิสิต_WS และเลือกภาษาเปน Visual C# คลิก OK 

 

รูปที่ 1 การสราง New Web Site 

3. โปรแกรมจะทําการสรางสภาวะแวดลอมในการพัฒนาเว็บเซอรวิส และสรางไฟลเว็บเซอรวิสแรกขึ้นมา มีชื่อวา

Services.cs และมี WebMethod มาให 1 ตัว คือ HelloWorld ที่เปน void มีการสงคากลับเปน “Hello 

World” และไฟลอื่นๆ 

1

2 

34 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 2 ‐ 

 

รูปที่ 2 ไฟลตางๆที่โปรแกรมสรางขึ้นมาใหโดยอัตโนมัติ 

รูปที่ 3 WebMethod ของไฟล Services.cs 

4. ทดลองเรียกใชงานเว็บเซอรวิสโดยคลิกที่ Debug > Start Without Debugging (Ctrl+ F5) โดยไม

จําเปนตองติดต้ัง IIS Server 

 

รูปที่ 4 การ run เว็บเซอรวิส 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 3 ‐ 

 

รูปที่ 5 หนาเว็บที่เปดขึ้นมาแสดงลิงคของ operation และ เอกสาร WSDL 

5. คลิกลิงค Services Description เพื่อเปดดูเอกสาร WSDL โดยดูที่ 

1.1 Services  ทําใหทราบช่ือเซอรวิส และตําแหนงในการเรียกใชเซอรวิส (endpoint) 

รูปที่ 6 แสดงในสวนของ services element 

2.1 PortType ดูวาเซอรวิสมี operation อะไรบางที่เปดใหบริการ และมีการสง message อยางไร 

 

รูปที่ 7 แสดงในสวนของ PortType 

3.1 Message ดูสวนของ input และ output message ของ operation ที่เราสนใจรองขอเรียกใช

เซอรวิส ทําใหทราบลักษณะของ message ที่สงเขา – ออก 

1 

2

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 4 ‐ 

 

รูปที่ 8 แสดงในสวนของ message 

4.1 type เพื่อดูลักษณะโครงสรางของขอมูลที่ใชในการรับ – สง ของ operation ที่เราสนใจ 

 

รูปที่ 9 แสดงในสวนของ type 

5.1 biding รูปแบบของการ encode ขอมูล วาเปน rpc หรือ document 

 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 5 ‐ 

 

รูปที่ 10 แสดงในสวนของ binding 

6. ทดลองเรียกใชเซอรวิสโดยคลิกที่ลิงค HelloWorld ซึ่งแสดงในรูปที่ 5 จะแสดงผลลัพธดังรูป 

 

รูปที่ 11 ฟอรมที่ใชในการเรียกเซอรวิส HelloWorld 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 6 ‐ 

7. เม่ือคลิกปุม Invoke จะใหผลลัพธ ดังรูป 

 

รูปที่ 12 ผลลัพธในการเรียกเซอรวิส HelloWorld 

8. ปรับแกไขโคด HelloWorld โดยเพิ่ม operation Addition, Subtract, Multiply, and Divide ทุก

opeartion มีการรับ input  2 ตัว คื a และ b มีชนิดขอมูลเปน double และมีการสงคากลับ 1 คา มีชนิดขอมูล

เปน double 

[WebMethod] public double Addition(double a, double b) { return a + b; } [WebMethod] public double Subtract(double a, double b) { return a - b; } [WebMethod] public double Multiply(double a, double b) { return a * b; } [WebMethod] public double Divide(double a, double b) { return a / b; } 

9. ทําการ สรางเซอรวิส คลิกที่เมนู Build > Build Web Site และรันโปรเจคเพื่อดู operation ที่สรางขึ้นมา ไปที่

เมนู Debug > Start Without Debugging หรือ Ctrl + F5 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 7 ‐ 

10. ทดลองเรียก operation Addition โดย ใส input a : xx.xx และ iput b : xx.xx เปนตัวเลขท่ีตองการลงไป กด

ปุม Invoke 

 

รูปที่ 13 แบบฟอรมทดสอบการเรียกใชเซอรวิส operation Addition 

11. ปรับแกโคด โดยลบ operation HelloWord ทิ้ง แกไข Namespace และต้ังชื่อ Services ใหมเปน

"http://www.chanthaburi.buu.ac.th/Ms‐webservices",Name="CalculatorServices" ดังดานลาง 

[WebService(Namespace = "http://www.chanthaburi.buu.ac.th/Ms-web-services",Name="CalculatorServices")] 

ทําการ Build Web Site อีกคร้ังและรันเว็บเพื่อดูผลการเปล่ียนแปลง 

รูปที่ 13 แสดงชื่อเว็บเซอรวิสที่ถูกเปล่ียนแปลง 

12. คลิกดู Service Description   เพื่อดู namespace ที่เปล่ียน และ รายละเอียดของเอกสาร WSDL และ soap 

message เพื่อใชในการเรียกใชเว็บเซอรวิสในตอนตอไป 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 8 ‐ 

การเขียนโปรแกรมเพื่อเรียกใชเว็บเซอรวิส 

หัวขอนี้เปนการพัฒนาเว็บฟอรมที่ชื่อวา CalculationClient เพื่อเรียกใชเว็บเซอรวิส CalculatorServices 

1. เพิ่ม Item ของ web Form เพื่อเรียกใชเว็บเซอรวิส โดยคลิกขวาท่ีชื่อโปรเจค จาก Solution Explorer ที่

หนาตางดานขวา 

 

รูปที่ 14 การเพิ่ม Item 

2. ต้ังช่ือ Item เปน CalculationClient และคลิกที่ปุม Add 

 

รูปที่ 15 การกําหนด Item ของ web form CalculatorClient 

1 

2

3 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 9 ‐ 

3. เม่ือเพิ่ม Item เรียบรอย โปรแกรมจะทําการสรางไฟลชื่อวา CalculatorClient.aspx และเปนมุมมอง source 

ใหเปล่ียนเปนมุมมอง Design 

4. ปรับแก option ไปที่ Tools > Options และเลือกสวนของ CSS Styling และทําการแกไขดังรูป 

 

รูปที่ 16 การปรับ Options 

5. สรางฟอรมเพื่อรับ – สงขอมูลในการเรียกใชเว็บเซอรวิสดังรูป โดยใชเคร่ืองมือ Toolbox 

 

รูปที่ 17 ฟอรมในการเรียกใชเซอรวิส 

1

2

3 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 10 ‐ 

6. กําหนด ID ใหกับ input แตละตัวที่หนาตาง Properties โดยกําหนดดังนี้ Input a:, Input b : และ Result มี

ID ดังนี้ a, b, and result ตามลําดับ และกําหนด ID ใหกับปุม Addition, Subtract, Multiply, and Divide 

ใหมีชื่อเดียวกับปุม 

 

รูปที่ 18 หนาตาง Properties และการกําหนด ID 

7. สราง Web Reference สําหรับอางอิงเซอรวิส โดยคลิกขวาท่ีชื่อโปรเจค เลือก Add Web Reference 

 

รูปที่ 19 การสราง Web Reference 

8. หลังจากนั้นจะปรากฏหนาตาง Add Reference โดยเราสามารถท่ีจะระบุที่อยูของเอกสาร WSDL URL ของ

เว็บเซอรวิสลงไป หรือคลิกลิงคที่ Browse to : Web Services in this solution  

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 11 ‐ 

 

รูปที่ 20 หนาตาง Add Web Reference 

รูปที่ 20 เว็บเซอรวิสที่สามารถ Add Web Reference 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 12 ‐ 

9. ใสชื่อ cal_services ในชอง Web Reference name :  และคลิกปุม Add Reference เพื่อใหโปรแกรมสราง

สวนในการติดตอกับเว็บเซอรวิส ดังรูป 

รูปที่ 21 Add  Reference 

10. ปรับแกไขไฟล CalculatorClient.aspx เพื่อเรียกใชเว็บเซอรวิส โดยการดับเบิลคลิกที่ปุม Addition โปรแกรม

จะเปดไฟล CalculatorClient.aspx.cs และสรางเมธอดวางขึ้นมาใหทําการเพิ่มโคดดังขางลาง 

protected void Addition_Click(object sender, EventArgs e) { 

          } 

แกไขเปน 

protected void Addition_Click(object sender, EventArgs e) 

    { 

        cal_services.CalculatorServices cal = new cal_services.CalculatorServices(); 

        result.Text = cal.Addition(double.Parse(a.Text), double.Parse(b.Text)) + ""; 

    } 

1

2

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 13 ‐ 

11. ทําการรันเว็บฟอรมที่สรางขึ้น โดยคลิกขวาท่ี CalculatorClient.aspx เลือก View in Browser ทดลองใส

input และคลิกปุม Addition เพื่อ ดูผลลัพธ 

 

รูปที่ 22 การรันเว็บฟอรมที่สรางขึ้น 

12. ทําการดับเบิลคลิกปุมอื่นๆ เพื่อแกไขโคดใหสามารถเรียกใชเว็บเซอรวิสใน operation ตางๆท่ีเปดใหใชบริการ

โดยแกไขโคดดังนี้ 

protected void Subtract_Click(object sender, EventArgs e) 

    { 

        cal_services.CalculatorServices cal = new cal_services.CalculatorServices(); 

        result.Text = cal.Subtract(double.Parse(a.Text), double.Parse(b.Text)) + ""; 

    } 

    protected void Multiply_Click(object sender, EventArgs e) 

    { 

        cal_services.CalculatorServices cal = new cal_services.CalculatorServices(); 

        result.Text = cal.Multiply(double.Parse(a.Text), double.Parse(b.Text)) + ""; 

    } 

    protected void Divide_Click(object sender, EventArgs e) 

    { 

        cal_services.CalculatorServices cal = new cal_services.CalculatorServices(); 

        result.Text = cal.Divide(double.Parse(a.Text), double.Parse(b.Text)) + ""; 

    } 

การสรางและการเรียกใชเว็บเซอรวิสโดยใช ASP.NET    ‐ 14 ‐ 

13. ทําการรันและทดสอบผลลัพธโดยการคลิกปุมตางๆ 

 

รูปที่ 23 ผลลัพธที่ไดจากปุม Multiply 

 

เอกสารอางอิง  

1. http://gear.kku.ac.th/~krunapon/courses/178375/ เขาถึงเม่ือวันที่ 17 มกราคม 2552