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 มาใส่

 

By admin

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.