WCF web service & Jquery

Here is a new item we can try out, seems to be very light. In this post i will walk through a simple credential validation.

• Create a simple ASP.NET project
• Add a the following mark-up in your Login.aspx page

    <div>
        <input type="text" id="username" />
        <input type="password" id="password" />
        <input type="button" id="login" value="Login" />
    </div>

• Add jquery library and reference

    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

• Add WCF Service
• Set aspNetCompatibilityEnabled attribute to true in your web.config file

    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true" />

• Set Factory attribute to "System.ServiceModel.Activation.WebScriptServiceHostFactory" in the service.svc markup and also add the reference to System.ServiceModel.Activation

<%@ ServiceHost Language="C#" Debug="true" Service="WebApplication2.DBService" CodeBehind="DBService.svc.cs" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" >

• Interface for the service looks like this

    [ServiceContract]
    public interface IDBService
    {
        [OperationContract]
        [WebInvoke(
                BodyStyle = WebMessageBodyStyle.WrappedRequest,
                RequestFormat = WebMessageFormat.Json,
                ResponseFormat = WebMessageFormat.Json)]
        string Validate(string username, string password);
    }

• Implementation of the service comes out to be as below

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
    [System.Web.Script.Services.ScriptService]    
    public class DBService : IDBService
    {        
        public string Validate(string username, string password)
        {            
            if (username.Equals("validusername") && password.Equals("validpassword"))
            {
                return "Welcome " + username;
            }
            else
            {
                return "Invalid username or password";
            }
        }
    }

• Now one last thing add the following script

    <script type="text/javascript">
        $(document).ready(
        function () {
            $("#login").click(
        function () {
            $.ajax(
            {
                url: "http://localhost:4295/dbservice.svc/Validate",
                type: "POST",
                data: "{\"username\":\"" + $("#username").val() +"\",\"password\":\""+ $("#password").val() +"\"}",
                contentType: "application/json; charset=utf-8",
                success: function (r) { alert(r.d); },
                error: function (e) { alert(e.description); }
            }
            );
        }
        )
        });
    </script>

Using Jquery.ajax API we can POST/GET/DELETE etc., data to our WCF web service, ultimately we will be able to do lot of stuffs with no post backs.

Motto: _doNoPostback ;)