1) สร้าง Project ใหม่เป็น Web ASP.NET Empty หลังจากนั้น Add new item LINGQ to SQL Class แล้วลาก Table มาวาง
2) ทำการ Add new item -> WCF Service แล้วจะได้ไฟล์ service1.svc แก้โคดตามนี้
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; using System.ServiceModel; using System.Text; using System.ServiceModel; using System.ServiceModel.Web; namespace wcfjqeuryweb { // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together. // NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging. public class Service1 : iService1 { public string Hello() { return "ss"; } DataClasses1DataContext mywcfdb1 = new DataClasses1DataContext(); 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; } } }
3) แก้ไขไฟล์ iService1.cs
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; using System.ServiceModel; using System.Text; using System.ServiceModel; using System.ServiceModel.Web; namespace wcfjqeuryweb { // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together. [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); } }
4) แก้ไข Web.config ในส่วนของ <system.serviceModel>
<?xml version="1.0"?> <!-- For more information on how to configure your ASP.NET application, please visit http://go.microsoft.com/fwlink/?LinkId=169433 --> <configuration> <connectionStrings> <add name="wcfConnectionString" connectionString="Data Source=.;Initial Catalog=wcf;Persist Security Info=True;User ID=sa;Password=rmutp;Pooling=False" providerName="System.Data.SqlClient" /> </connectionStrings> <system.web> <compilation debug="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web> <system.serviceModel> <services> <service name="wcfjqeuryweb.Service1"> <endpoint address="" binding="webHttpBinding" contract="wcfjqeuryweb.iService1" behaviorConfiguration="eb1"> </endpoint> </service> </services> <behaviors> <endpointBehaviors> <behavior name="eb1"> <webHttp/> </behavior> </endpointBehaviors> </behaviors> </system.serviceModel> </configuration>
6) ลองรันดู
7) สร้างไฟล์ทดสอบ 3 ไฟล์
<!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="get"/><input type="button" id="addstudent" value="add"/><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>
$(document).ready(function(){ $('#getallstudent').click(function(){ $('#studentlist').empty();//ลบพวก table dropdown div $.getJSON('http://localhost/wcf/Service1.svc/getAllStudent', 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/wcf/Service1.svc/addstudent', { StudentID:$('#studentid').val(), FirstName:$('#firstname').val(), LastName:$('#lastname').val() }, function(data){ alert('complete'); }); } ); });
//ใช้ Jqeury เวอรชั่น 1.7.1 มาใส่