توضیحات و دانلود

استفاده از jQuery و جاوا اسکریپت در ارتباط AJAX JSON با WCF Service در ASP.Net
0 0
استفاده از jQuery و جاوا اسکریپت در ارتباط AJAX JSON با WCF Service در ASP.Net

با سلام  در این مقاله با مثال توضیح خواهیم داد که سرویس ASP.Net WCF را تغییر دهید تا درخواستهای AJAX JSON را پذیرفته و AACX JSON را به WCF سرویس ASP.Net با استفاده از جاوا اسکریپت و جی کوئری فراخوانید.
بانک اطلاعاتی
برای پایگاه داده ازNorthwind استفاده می کنیم. شما می توانید آن را با استفاده از لینک دانلود کنید. دانلود Northwind پایگاه داده
رشته اتصال
در زیر رشته اتصال به پایگاه داده ای که در web.config گذاشته ایم است.

<connectionStrings>
    <add name="constr" connectionString="Data Source = .\SQL2005;Initial Catalog = Northwind; Integrated Security = true" />
</connectionStrings>

اضافه کردن و پیکربندی سرویس WCF
ما باید برخی از تغییرات پیکربندی را برای سرویس WCF انجام دهیم تا آن را برای جی کوئری و جاوا اسکریپت در دسترس قرار دهیم.
1. اضافه کردن Attribute AspNetCompatibilityRequirements
ویژگی سرویس AspNetCompatibilityRequirements را به کلاس سرویس اضافه کنید تا خدمات WCF مانند ASP.NET ASMX Web Service رفتار کنند و قادر به پردازش درخواست ها از طریق HTTP به روش زیر باشند.
C #

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service : IService
{
}

VB.Net

<ServiceContract()> _
<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)> _
Public Class Service
 
End Class

2. اضافه کردن نقطه پایانی رفتار ASP.Net AJAX
رفتار پایانی ASP.NET AJAX را در فایل Web.Config وارد کنید تا ارتباط AJAX به سرویس را فعال کنید.
C #

<system.serviceModel>
      <behaviors>
            <serviceBehaviors>
                  <behavior name="ServiceBehavior">
                        <serviceMetadata httpGetEnabled="true"/>
                        <serviceDebug includeExceptionDetailInFaults="true"/>
                  </behavior>
            </serviceBehaviors>
        <endpointBehaviors>
            <behavior name="ServiceAspNetAjaxBehavior">
                <enableWebScript />
            </behavior>
        </endpointBehaviors>
      </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
    <services>
            <service behaviorConfiguration="ServiceBehavior" name="Service">
                  <endpoint address="" binding="webHttpBinding" contract="IService" behaviorConfiguration="ServiceAspNetAjaxBehavior">
                        <identity>
                              <dns value="localhost"/>
                        </identity>
                  </endpoint>
                  <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
            </service>
      </services>
</system.serviceModel>

VB.Net

<system.serviceModel>
      <behaviors>
        <serviceBehaviors>
                  <behavior name="ServiceBehavior">
                        <serviceMetadata httpGetEnabled="true"/>
                        <serviceDebug includeExceptionDetailInFaults="true"/>
                  </behavior>
            </serviceBehaviors>
            <endpointBehaviors>
                  <behavior name="ServiceAspNetAjaxBehavior">
                        <enableWebScript/>
                  </behavior>
            </endpointBehaviors>
      </behaviors>
      <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
      <services>
            <service name="Service" behaviorConfiguration="ServiceBehavior">
            <endpoint address="" binding="webHttpBinding" contract="Service" behaviorConfiguration="ServiceAspNetAjaxBehavior">
                <identity>
                    <dns value="localhost"/>
                </identity>
            </endpoint>
            <endpoint contract="IMetadataExchange" binding="mexHttpBinding" address="mex" />
        </service>
      </services>
</system.serviceModel>

 3. اضافه کردن ویژگی WebInvoke
ویژگی WebInvoke را برای مشخص کردن روش و ResponseFormat به روش زیر اضافه کنید.
C #

[OperationContract]
[System.ServiceModel.Web.WebInvoke(Method = "POST",
    ResponseFormat = System.ServiceModel.Web.WebMessageFormat.Json)]
string GetCustomers(string prefix);

 VB.Net

<System.ServiceModel.Web.WebInvoke(Method:="POST", _
        ResponseFormat:=System.ServiceModel.Web.WebMessageFormat.Json)> _
Public Function GetCustomers(ByVal prefix As String) As String

 ساخت روش خدمات WCF
حالاروش WCF Service را که جی کوئری AJAX برای دریافت داده ها از سرور ارتباط می گیرد، ساختیم. اساسا یک تابع ساده است که جدول مشتریان پایگاه Northwind را جستجو می کند و سوابق مشتریان همسان را باز می گرداند.
 یک پیشوند پارامتر از عملکرد مشتری AJAX جی کوئریرا قبول میکنیم. این پارامتر برای جستجوی مشتریان در جدول مشتریان پایگاه Northwind استفاده می شود.
نتایج برگشتی به یک لیست کلی از اشیا اضافه می شود که بعدا به یک رشته JSON با استفاده از JavaScriptSerializer سریال می شود .
C #
IService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
 
[ServiceContract]
public interface IService
{
    [OperationContract]
    [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)]
    string GetCustomers(string prefix);
}

 Service.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Serialization;
using System.ServiceModel.Activation;
 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service : IService
{
      public string GetCustomers(string prefix)
      {
        List<object> customers = new List<object>();
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select ContactName, CustomerId from Customers where " +
                "ContactName like @prefix + '%'";
                cmd.Parameters.AddWithValue("@prefix", prefix);
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(new
                        {
                            Id = sdr["CustomerId"],
                            Name = sdr["ContactName"]
                        });
                    }
                }
                conn.Close();
            }
            return (new JavaScriptSerializer().Serialize(customers));
        }
    }
}

VB.Net
Service.vb

Imports System.Collections.Generic
Imports System.Linq
Imports System.Runtime.Serialization
Imports System.ServiceModel
Imports System.Text
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Script.Serialization
Imports System.ServiceModel.Activation
Imports System.ServiceModel.Web
Imports System.Web.Script.Services
 
<ServiceContract()> _
<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)> _
Public Class Service
    <OperationContract()> _
    <WebInvoke(Method:="POST", ResponseFormat:=WebMessageFormat.Json)> _
    Public Function GetCustomers(ByVal prefix As String) As String
        Dim customers As New List(Of Object)()
        Using conn As New SqlConnection()
            conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
            Using cmd As New SqlCommand()
                cmd.CommandText = "select ContactName, CustomerId from Customers where " & _
                    "ContactName like @prefix + '%'"
                cmd.Parameters.AddWithValue("@prefix", prefix)
                cmd.Connection = conn
                conn.Open()
                Using sdr As SqlDataReader = cmd.ExecuteReader()
                    While sdr.Read()
                        customers.Add(New With { _
                         Key .Id = sdr("CustomerId"), _
                         Key .Name = sdr("ContactName") _
                        })
                    End While
                End Using
                conn.Close()
            End Using
            Return (New JavaScriptSerializer().Serialize(customers))
        End Using
    End Function
End Class

ارتباط مشتری AJAX JSON با استفاده از jQuery
در زیر علامت HTML از صفحه وب مشتری است که به سرویس AJAX WCF دسترسی پیدا می کند که ما ایجاد کردیم. سرویس AJAX WCF همراه با نام متد و نتایج برگشت نمایش داده می شود.

با کلیک بر روی دکمه جستجو ، ارتباط AJAX JSON به سرویس WCF AJAX  ایجاد می شود. مقدار پیشوند پارامتر از پیشوند جعبه متن انتخاب شده است .

نتایج به دست آمده از سرویس AJAX WCF به JSON Array تبدیل می شوند. سپس یک حلقه jQuery بر روی آرایه اجرا می شود تا آن را انجام دهد و نتایج در DIV به عنوان نمایش در تصویر زیر نمایش داده می شود.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type = "text/javascript">
        $("#search").live("click", function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '<%=ResolveUrl("~/Services/Service.svc/GetCustomers") %>',
                data: '{"prefix": "' + $("#prefix").val() + '"}',
                processData: false,
                dataType: "json",
                success: function (response) {
                    var customers = eval(response.d);
                    var html = "";
                    $.each(customers, function () {
                        html += "<span>Name: " + this.Name + " Id: " + this.Id + "</span><br />";
                    });
                    $("#results").html(html == "" ? "No results" : html);
                },
                error: function (a, b, c) {
                    alert(a.responseText);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" id="prefix" />
    <input id="search" type="button" value="Search" />
    <div id="results"></div>
    </form>
</body>
</html>

 عکس روی صفحه

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :