Email Availability Control using Microsoft AJAX and Json WCF

-
Hi Guys,

 If you are a web developer, I am sure you would have encountered a scenario where you have to check the email/username availability. So I thought of making a control which will call a WCF service through Microsoft AJAX and let the user know whether the email/username is already taken or not. Hope you like it.














Solution

1) Create a Solution like following,

 - One is a web site
- Other is a Class Library




















2) Open AjaxEnabledControls -> EmailTextBox.cs and paste the following code

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

 namespace AjaxEnabled
{
    public class EmailTextBox : TextBox,IScriptControl
    {
        private ScriptManager sMgr;
        public string ServiceUrl;
        

         protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor =
            new ScriptControlDescriptor("AjaxEnabled.EmailTextBox", this.ClientID);
            descriptor.AddProperty("serviceUrl", this.ServiceUrl);
            
            return new ScriptDescriptor[] { descriptor };
        }

         protected virtual IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Assembly = "AjaxEnabled";
            reference.Name = "AjaxEnabled.EmailTextBox.js";
            return new ScriptReference[] { reference };
        }

         protected override void OnPreRender(EventArgs e)
        {
            if (!this.DesignMode)
            {
                //test for the existence of a ScriptManager
                sMgr = ScriptManager.GetCurrent(Page);
                if (sMgr == null)
                    throw new HttpException(
                    "A ScriptManager control must exist on the page.");
                sMgr.RegisterScriptControl(this);
            }
            base.OnPreRender(e);
        }
        protected override void Render(HtmlTextWriter writer)
        {
            if (!this.DesignMode)
                sMgr.RegisterScriptDescriptors(this);
            base.Render(writer);
            writer.WriteLine(string.Format(@"<br /><div><input type=""hidden"" id=""{0}""/> 
                <div id=""{1}"" style=""float:left""></div><span class=""emailTextboxSpan"" id=""{2}""></span></div><br />",
                this.ClientID + "_Hidden",
                this.ClientID + "_Image", 
                this.ClientID + "_Status"));
        }
        IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
        {
            return GetScriptReferences();
        }
        IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
        {
            return GetScriptDescriptors();
        }
    }

}


3) Open AjaxEnabledControls -> EmailTextBox.js and paste the following code

/// <reference name="MicrosoftAjax.js"/>
Type.registerNamespace("AjaxEnabled");

//create constructor
AjaxEnabled.EmailTextBox = function (element) {
    AjaxEnabled.EmailTextBox.initializeBase(this, [element]);
    this._serviceUrl = null;
    this._spanControlId = '';
    this._imageControlId = '';
    this._hiddenControlId = '';
    this._isEmailAvailable = true;
}

//define class
AjaxEnabled.EmailTextBox.prototype = {
    //initialize the UI control
    initialize: function () {
        AjaxEnabled.EmailTextBox.callBaseMethod(this, 'initialize');
        this._onKeyupHandler = Function.createDelegate(this, this._onKeyup);
        this._onTextChangeHandler = Function.createDelegate(this, this._onTextChange);
        $addHandlers(this.get_element(), { 'keyup': this._onKeyup, 'change': this._onTextChange }, this);
    },
    dispose: function () {
        $clearHandlers(this.get_element());
        AjaxEnabled.EmailTextBox.callBaseMethod(this, 'dispose');
    },
    //define keystroke event
    _onKeyup: function (e) {
        this.validateEmail(e);
    },
    _onTextChange: function (e) {
        this.validateEmail(e);
    },
    validateEmail: function (e) {
        //get email text

        var emailValid = true;

        var x = this.get_element().value;
        var email = x;
        var atpos = x.indexOf("@");
        var dotpos = x.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
            emailValid = false;
        }
        this._spanControlId = this.get_element().id + '_Status';
        this._imageControlId = this.get_element().id + '_Image';
        this._hiddenControlId = this.get_element().id + '_Hidden';
        var spanEmail = $get(this._spanControlId);
        var imageElement = $get(this._imageControlId);
        if (emailValid) {

            this.returnEmailAvailable(email);

        }
        else {
            this.get_element().className = '';
            imageElement.className = '';
            spanEmail.innerHTML = '';
            this._isEmailAvailable = false;
        }

    },
    //define properties
    get_serviceUrl: function () {
        return this._serviceUrl;
    },
    set_serviceUrl: function (value) {
        this._serviceUrl = value;
    },

    get_isEmailAvailable: function () {
        return this._isEmailAvailable;
    },
    OnWebRequestCompleted: function onWebRequestCompleted(executor, eventArgs) {
        if (executor.get_responseAvailable()) {

            var userContext = executor.get_webRequest().get_userContext();
            userContext.DisplayWebRequestBody(executor);
        }
        else {
            if (executor.get_timedOut())
                alert("Timed Out");
            else
                if (executor.get_aborted())
                    alert("Aborted");
        }
    },
    DisplayWebRequestBody: function displayWebRequestBody(executor) {

        var userContext = executor.get_webRequest().get_userContext();
        var displayElement = $get(userContext._spanControlId);

        displayElement.innerHTML =
        "Email Address is ";

        var isAvailable = executor.get_responseData() == "true" ? true : false
        var content = (isAvailable) ? "Available" : "Taken";
        if (document.all)
            displayElement.innerText += content;
        else
        // Firefox
            displayElement.textContent += content;

        userContext.get_element().className = content + "CssClass";
        userContext._isEmailAvailable = isAvailable;
        var imageElement = $get(userContext._imageControlId);
        var hiddenElement = $get(userContext._hiddenControlId);
        imageElement.className = content + "ImageCssClass";
        hiddenElement.value = isAvailable.toString();

    },

    returnEmailAvailable: function (email) {

        // Instantiate the WebRequest object.
        var wRequest = new Sys.Net.WebRequest();

        // Set the request Url.  
        wRequest.set_url(this._serviceUrl + email);

        // Set the request verb.
        wRequest.set_httpVerb("GET");

        // Set user's context
        wRequest.set_userContext(this);

        // Set the web request completed event handler,
        // for processing return data.
        wRequest.add_completed(this.OnWebRequestCompleted);

        // Execute the request.
        wRequest.invoke();


    }

}

//register class as a Sys.Control
AjaxEnabled.EmailTextBox.registerClass('AjaxEnabled.EmailTextBox',
Sys.UI.Control);
//notify loaded
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

4) Open AjaxEnabled WebSite -> App_Code -> IEmailService.cs and paste the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IEmailService" in both code and config file together.
[ServiceContract]
public interface IEmailService
{
[OperationContract]
    [WebGet(UriTemplate = "/CheckEmail?email={email}",
            ResponseFormat = WebMessageFormat.Json)]
bool CheckEmail(string email);
}

5) Open AjaxEnabled WebSite -> App_Code -> EmailService.cs and paste the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "EmailService" in code, svc and config file together.
public class EmailService : IEmailService
{
    public bool CheckEmail(string email)
{
        if (email.Trim().ToLower() == "shahim@dummy.com")
            return false;
        else
            return true;
}
}

6) Open AjaxEnabled WebSite -> Styles -> Site.css and paste the following styles

.weak
{
border: medium solid #008000;
}
.medium
{
border: thin solid #FFFF00;
}
.strong
{
border: medium solid #FF0000;
}
.emailTextboxSpan
{
    font-style : oblique;
}
.TakenCssClass
{
     border : 1px solid red;
}
.AvailableCssClass
{
    border : 1px solid green;
}

.TakenImageCssClass
{
    background-image : url('../Images/Taken.png');
    background-repeat : no-repeat;
    padding-top : 2px;
    width:24px;
    height:24px;
}
.AvailableImageCssClass
{
    background-image : url('../Images/Available.png');
    background-repeat : no-repeat;
    padding-top : 2px;
     width:24px;
    height:24px;
}

7) Finally add the following mark up in AjaxEnabled WebSite -> Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register Assembly="AjaxEnabled" Namespace="AjaxEnabled"
TagPrefix="ajaxEnabled" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<script type="text/javascript">
    function ClientValidate(source, arguments) {

        var available = document.getElementById("MainContent_emailTextBox1_Hidden").value;
        if (available != '')
            arguments.IsValid = (available == "true") ? true : false;
        else
            arguments.IsValid = true;

    }
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>
   
        Email Validator TextBox using Microsoft AJAX
       <br />
       <br />

  <ajaxEnabled:EmailTextBox ID="emailTextBox1" serviceUrl="./EmailService.svc/CheckEmail?email="  
   runat="server" width="200" ></ajaxEnabled:EmailTextBox>
   <br />
   <br />

   <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="vgSubmit"/>
   <br />
   <br />
   <asp:CustomValidator 
       ID="cvEmail" runat="server" ErrorMessage="Email Address is already Taken. Please change to Proceed!"
       ClientValidationFunction="ClientValidate" ValidationGroup="vgSubmit"></asp:CustomValidator>

    
</asp:Content>


Comments

Post a Comment

Popular posts from this blog

Secure .NET Core Api Server and Client

-
Image
 Hi Guys, Recently I had a requirement to create a JWT token based WebApi server and a WebApi Client to consume it using .NET Core. So first I created two .NET Core Web Api projects as shown below. In the appsettings.json file of both the WebApi Server and the Client. I added the following values. "JwtConfig": { "Key": "dsadsagfaqrergsdsfdffdsfdsffdsfdsfdsfdsfdfdsfsfdsfd", //Some Secure Key longer the better "AudienceId": 7895, //Some Secure Audience Id "HostUrl": "https://somesecureurl.com" //Some Host Url } Now we will first look at implementation of the WebApi Server. 1) First we must create code to Generate the JWT token, this can be achieved by creating JWTTokenManager.cs file and adding following code public interface IJwtTokenManager { string Authenticate(string userName, string password); } public class JwtTokenManager : IJwtTokenManager { private readonly IConfiguration _c...
Read more

Calling ChatGPT using .NET Core

-
Image
  Hi Guys, With the immense hype created by ChatGPT every technology is adopting ways to integrate ChatGPT to their frameworks. Hence, a brilliant team led by Hassan Habib  has managed to give .NET Developers a way to call ChatGPT programmatically and get the responses. Remember this is still a new project you might encounter some issues, but the Standard.AI.OpenAI team is ready to help us developers in this journey. The source code can be found here. 1) First you must register yourself at https://platform.openai.com 2) Then you must generate an API Key as shown below. 3) Now you can start integrating your .NET Core applications to use openai. For this purpose I use a console application (.NET 7).  4) Install the Nuget package Standard.AI.OpenAI 5) Copy paste the below code using Microsoft.AspNetCore.Mvc; using Standard.AI.OpenAI.Brokers.DateTimes; using Standard.AI.OpenAI.Clients.OpenAIs; using Standard.AI.OpenAI.Models.Configurations; using Standard.AI.OpenAI.Model...
Read more

Windows Desktop Watermark with username

-
Image
 Hi Guys, I recently had a requirement from a client to implement a way to protect sensitive documents from being photographed from mobile devices and shared online. To mitigate this issue I made a windows application using C#.  When the exe runs it will read current logged in users' domain user account and display his username throughout the screen. I have given options to change the displayed text to username, hostname of the computer or any custom texts. You can get this application from the following url  Desktop watermark Note: This is works only in Windows Operating Systems
Read more