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") &amp;&amp; password.Equals("validpassword"))
            {
                return "Welcome " + username;
            }
            else
            {
                return "Invalid username or password";
            }
        }
    }
  • Now one last thing add the following script
    &lt;script type="text/javascript"&gt;
        $(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); }
            }
            );
        }
        )
        });
    &lt;/script&gt;

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 ;)

Comments

Popular posts from this blog

Launch .Net Core with VSCode for starters

Protecting sensitive data using Secret Manager in .Net Core

Load Testing an nodejs API