การทำ Web service ด้วย WCF + Restful + Json PART II
ต่อจากของเดิม http://kungtee.rmutp.ac.th/index.php/wcf-restful-json/
ต่อจากครั้งที่แล้วทำ table และปุ่ม
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="myscript.js"></script> </head> <body> <input type="text" id="hello" value="" /><br/> <input type="text" id="studentid" value="" /><input type="button" id="submit" value="submit"/><br/> <input type="text" id="firstname" value="" /><br/> <input type="text" id="lastname" value="" /><br/> <input type="button" id="getallstudent" value="get all student"/><br/> <table id="studentlist"> </table> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('#getallstudent').click(function(){ $.getJSON('http://localhost:8000/getAllStudent?callback=?', null, function(data){ $.each(data,function(i,student){ $('<tr><td>'+student.firstname+'</td><td>'+student.lastname+'</td></tr>').appendTo('#studentlist'); //alert(student.firstname); }); } ); }); |
การ Insert Data ให้กลับไปแก้ WCF ในส่วนของ interface iService1 แล้วเพิ่มโค้ดลงไป
แก้ไข โค้ด
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using System.ServiceModel; using System.ServiceModel.Web; namespace WCF { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { WebServiceHost wsh = new WebServiceHost( typeof(Service1), new Uri("http://localhost:8000")); // JSONP WebHttpBinding whb = new WebHttpBinding(); whb.CrossDomainScriptAccessEnabled = true; wsh.AddServiceEndpoint(typeof(iService1), whb, ""); wsh.Open(); } [System.ServiceModel.ServiceContract] public interface iService1 { [OperationContract, WebGet(ResponseFormat = WebMessageFormat.Json)] string Hello(); [OperationContract, WebGet(ResponseFormat = WebMessageFormat.Json)]// ต้องครอบทุกตัวด้านบน List<student> getAllstudent(); [OperationContract, WebInvoke(Method="GET", ResponseFormat = WebMessageFormat.Json, UriTemplate="studentbyid/{StudentID}")]// ต้องครอบทุกตัวด้านบน student getStudentById(String StudentID); [OperationContract, WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.WrappedRequest)] int AddStudent(String StudentID, String FirstName, String LastName); } public class Service1 : iService1 { public string Hello() { return "ss"; } WCFDataContext mywcfdb1 = new WCFDataContext(); public List<student> getAllstudent() { return mywcfdb1.students.ToList(); } public student getStudentById(String StudentID) { int sid = int.Parse(StudentID); return mywcfdb1.students.Where( s => s.studentId == sid).SingleOrDefault(); } public int AddStudent(String StudentID, string FirstName, string LastName) { int stdID = int.Parse(StudentID); student newstudent = new student(); newstudent.studentId = stdID; newstudent.firstname = FirstName; newstudent.lastname = LastName; mywcfdb1.students.InsertOnSubmit(newstudent); mywcfdb1.SubmitChanges(); return 1; } } } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$(document).ready(function(){ /* $.getJSON('http://localhost:8000/Hello?callback=?', null,function(data){ $('#hello').val(data); }); */ /* $('#submit').click(function(){ $.getJSON('http://localhost:8000/studentbyid/'+$('#studentid').val()+'?callback=?', null,function(data){ $('#firstname').val(data.firstname); $('#lastname').val(data.lastname); }); */ $('#getallstudent').click(function(){ $('#studentlist').empty();//ลบพวก table dropdown div $.getJSON('http://localhost:8000/getAllStudent?callback=?', null, function(data){ $.each(data,function(i,student){ $('<tr><td>'+student.firstname+'</td><td>'+student.lastname+'</td></tr>').appendTo('#studentlist'); //alert(student.firstname); }); } ); }); $('#addstudent').click(function(){ $.getJSON('http://localhost:8000/addstudent?callback=?', { StudentID:$('#studentid').val(), FirstName:$('#firstname').val(), LastName:$('#lastname').val() }, function(data){ alert('complete'); }); } ); }); |
การทำ Web service ด้วย WCF + Restful + Json
WCF จะสามารถบริการ Web service ได้ทั้ง windows application กับ web application
1) open visual studio 2012
2) new project windows application form
3) add reference
4) code behide
5) สร้าง Service1 Method
6) ทดสอบสร้างปุ่ม button1 แล้วใส่ code
7) เปิด Browser พิมพ์ http://localhost:8000/hello จะเห็นค่าที่ส่งกลับมา
หมายเหตุเพิ่มเติม เราสามารถใช้ WCF เพราะไวกว่าไม่ต้องรันใน IIS ก็ได้ ทำเป็น Service ของ Window ก็ได้
8) open server explorer สร้าง db
9) add newitem ->linq ตั้งชื่อเดียวกับ db
10) ลาก database มาวางใน Linq ที่สร้าง
11) เขียนโค้ดเพื่อเรียกใช้
ตรง webinvoke ทำได้เฉพาะ WCF สามารถใส่ url แบบที่ return ค่าแบบกำหนดได้
12) RUN กดปุ่ม button แล้วเปิด browser พิมพ์ url http://localhost:8000/studentbyid/1
13) ทำให้ JSON สามารถบริการข้ามเครื่องได้คือไม่ได้ run ใน Localhost เรียกว่า JSONP เพิ่ม code
14) สร้างไฟล์เพื่อใช้ JQUERY สร้างไฟล์ 2 ไฟล์ ทดสอบก่อน
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="myscript.js"></script> </head> <body></body> </html> |
|
1 2 3 4 5 6 |
$(document).ready(function(){ $.getJSON('http://localhost:8000/Hello?callback=?', null, function(data){alert(data);}); //สำคัญมากตรง ?callback=? ควรมี }); |
รันด้วย browser
15) สร้าง form แล้วให้แสดงค่าจาก webservice โดยกดปุ่มส่งค่า studentid ไป
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="myscript.js"></script> </head> <body> <input type="text" id="hello" value="" /><br/> <input type="text" id="studentid" value="" /><input type="button" id="submit" value="submit"/><br/> <input type="text" id="firstname" value="" /><br/> <input type="text" id="lastname" value="" /><br/> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function(){ /* $.getJSON('http://localhost:8000/Hello?callback=?', null,function(data){ $('#hello').val(data); }); */ $('#submit').click(function(){ $.getJSON('http://localhost:8000/studentbyid/'+$('#studentid').val()+'?callback=?', null,function(data){ $('#firstname').val(data.firstname); $('#lastname').val(data.lastname); }); }); }); |
ต่อที่ PART II สำหรับ update delete insert data ( http://kungtee.rmutp.ac.th/index.php/web-service-part-2/ )
Recent Comments