Form Validation Using Javascript and Regular Expressions

Hi Guys,

 I was working in asp.net, There was a signup form and client wanted sophisticated validations on the form at the client side. Using validations was a cumbersome task as it requires complexities and user inputs.

I managed to create my own javascript file which validates any form and html controls by the use of the "name" attribute of the tag. You need to pass the div name which has the form or html controls which you want to validate.  In this example my form was in the html table, You can customize the javascript code based on the parent elements.

Here is my javascript file, Which must be included in the page to validate the page.

 /*---------------------------------Javascript Code Starts Here-------------------------------*/
//matches only characters, no special characters and range is from 3-50 characters
        //var match_first_name = /^([a-zA-Z]+){3,50}$/;

        //matches only characters, no special characters and range is from 2-50 characters.
        //Added the constraint of non required number after first name [space] [any number].
        var match_first_name = /^(([a-zA-Z]+){3,50})(\s\S\d{0,1})?$/;

        //matches only characters, no special characters and range is from 2-50 characters.
        //Added the constraint of non required number after first name [space] [any number].
        var match_last_name = /^(([a-zA-Z]+){3,50})(\s\S\d{0,1})?$/;

        //matches email, no special characters and name range is 1 to 250 then domain characters are from 1 to 250 and (.in .com) i.e 2 to 3 characters can be there.
        var match_email = /^((([a-zA-z]+(\.[a-zA-z0-9])?){1,250})(\d{0,30})?)\@((([a-zA-z]+){1,250}))\.(([a-zA-z]+){2,5})$/;

        //matches phone number in the format (223) 323-3726 i.e (xxx) xxx-xxxx. Only 14 characters can be added
        var match_phone = /^(\(\d{3}\)\s\d{3}\-\d{4})$/;

        //matches the password the password can have special characters as well as numbers.
        //var match_password = /^([a-zA-Z0-9@!#$%*&^.]{8,30})$/;

        //matches the password having any string 4 to 8 characters
        //var match_password = /^.{4,8}$/;

        //matches the password expression that requires one lower case letter, one upper case letter, one digit, 6-33 length, and no spaces.
        var match_password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,33}$/;

        //matches the height and can have numeric or decimal values in the range of xx.xx
        var match_height = /^[0-9]{1,2}((\.)\d{0,2})?$/

        //matches the height and can have numeric or decimal values in the range of xx.xx
        var match_weight = /^[0-9]{1,3}((\.)\d{0,2})?$/

        var count = 0;

        function check(divname, showerrmsg) {
            var val = '';
            var result = true;
            var pwd = '';
            $("#" + divname + " table input").each(function (index, el) {
                val = $(el).val();
                if (($(el).attr('name').indexOf('FirstName') != -1) || ($(el).attr('name').indexOf('firstname') != -1)) {
                    result = match_first_name.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Incorrect name format, Please enter more than 2 and less than 50 characters without any numbers, spaces or special characters.');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('LastName') != -1) || ($(el).attr('name').indexOf('lastname') != -1)) {
                    result = match_last_name.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Incorrect name format, Please enter more than 2 and less than 50 characters without any numbers, spaces or special characters.');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('Email') != -1) || ($(el).attr('name').indexOf('email') != -1)) {
                    result = match_email.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Please enter a valid email address.');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('Phone') != -1) || ($(el).attr('name').indexOf('phone') != -1)) {
                    result = match_phone.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Please enter valid US phone number. eg. (xxx) xxx-xxxx');

                        return false;
                    }
                    else {
                        if (val == "(000) 000-0000") {

                            if (showerrmsg == true)
                                alert("Invalid Phone Number");

                            $(el).addClass("error");
                            result = false;
                            return false;
                        }
                        else {
                            $(el).removeClass("error");
                        }
                    }
                }
                else if (($(el).attr('name').indexOf('ConfirmPassword') != -1) || ($(el).attr('name').indexOf('confirmpassword') != -1)) {
                    result = match_password.test(val);
                                       if (val == pwd) {
                        $(el).removeClass("error");
                    }
                    else {

                        if (showerrmsg == true)
                            alert("Password Doesn't Match");

                        result = false;
                        $(el).addClass("error");
                        return false;
                    }
                }
                else if (($(el).attr('name').indexOf('Password') != -1) || ($(el).attr('name').indexOf('password') != -1)) {
                    pwd = val;
                    result = match_password.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Please enter valid password having 6 to 13 characters, One lower case letter, one upper case letter and one digit.');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('height') != -1) || ($(el).attr('name').indexOf('height') != -1)) {
                    result = match_height.test(val);

                    var msg = 'Please enter valid height. eg. xx.xx';
                    if (result != false) {
                        if (eval($(el).val()) <= 0) {
                            msg = 'Height cannot be zero.';
                            result = false;
                        }
                    }

                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert(msg);

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('weight') != -1) || ($(el).attr('name').indexOf('weight') != -1)) {
                    result = match_weight.test(val);
                    var msg = 'Please enter valid weight. eg. xxx.xx';
                    if (result != false) {
                        if (eval($(el).val()) <= 0) {
                            msg = 'Weight cannot be zero.';
                            result = false;
                        }
                    }

                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true) {
                            alert(msg);
                        }


                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('registeration') != -1) || ($(el).attr('name').indexOf('Registeration') != -1)) {
                    if ($(el).val().trim() == "")
                        result = false;

                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Please enter registeration number');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('image') != -1) || ($(el).attr('name').indexOf('FileUpload') != -1)) {

                    if (showerrmsg) {
                        var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
                        var oInput = $(el);

                        //Check extension
                        if ($(oInput).attr('type') == "file") {
                            var sFileName = $(oInput).val();
                            if (sFileName.length > 0 || $(el).attr('name') == "FileUpload1") {
                                var blnValid = false;
                                for (var j = 0; j < _validFileExtensions.length; j++) {
                                    var sCurExtension = _validFileExtensions[j];
                                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                                        blnValid = true;
                                        break;
                                    }
                                }
                                if (!blnValid) {
                                    alert("Sorry, Please select a file, having extensions " + _validFileExtensions.join(", ") + " with a maximum size of 1MB.");
                                    $(el).addClass("error");
                                    result = false;
                                    return false;
                                }
                                else {
                                    $(el).removeClass("error");
                                }
                            }
                        }

                        //Check filesize
                        if (window.FileReader) {
                            file = oInput.size;
                            size = file;
                            var files = document.getElementById($(el).attr('id')).files;
                            if (files[0].size > 1048576) {
                                alert('File size should be less than 1MB');
                                result = false;
                            }
                        }
                    } //end of if(showerrmsg)
                }
            });
            showerrmsg = false;
            return result;
        }

        function initialize(divname) {
            $("#" + divname + " table input").each(function (index, el) {

                if($(el).attr("type")!="file")
                    $(el).bind("blur", function () { check(divname, false); });

                if($(el).attr("type")=="submit")
                    $(el).bind("blur", function () { check(divname, true); });
            });

            $("#" + divname + " table input").each(function (index, el) {
                $(el).bind("keydown", function (event) { if (len($(el).val()) > $(el).attr('maxlength')) event.preventDefault(); });
            });
        }
 /*---------------------------------Javascript Code Ends Here-------------------------------*/

To Run the above you need to include the javascript code/file in the page you want your validations. In your page add the following lines

<script>
 $(document).ready({ initialize(your_div_name_having_form);});
</script>

Thanks
Ritesh

Form Validation Using Javascript and Regular Expressions

Hi Guys,

 I was working in asp.net, There was a signup form and client wanted sophisticated validations on the form at the client side. Using validations was a cumbersome task as it requires complexities and user inputs.

I managed to create my own javascript file which validates any form and html controls by the use of the "name" attribute of the tag. You need to pass the div name which has the form or html controls which you want to validate.  In this example my form was in the html table, You can customize the javascript code based on the parent elements.

Here is my javascript file, Which must be included in the page to validate the page.

 /*---------------------------------Javascript Code Starts Here-------------------------------*/
//matches only characters, no special characters and range is from 3-50 characters
        //var match_first_name = /^([a-zA-Z]+){3,50}$/;

        //matches only characters, no special characters and range is from 2-50 characters.
        //Added the constraint of non required number after first name [space] [any number].
        var match_first_name = /^(([a-zA-Z]+){3,50})(\s\S\d{0,1})?$/;

        //matches only characters, no special characters and range is from 2-50 characters.
        //Added the constraint of non required number after first name [space] [any number].
        var match_last_name = /^(([a-zA-Z]+){3,50})(\s\S\d{0,1})?$/;

        //matches email, no special characters and name range is 1 to 250 then domain characters are from 1 to 250 and (.in .com) i.e 2 to 3 characters can be there.
        var match_email = /^((([a-zA-z]+(\.[a-zA-z0-9])?){1,250})(\d{0,30})?)\@((([a-zA-z]+){1,250}))\.(([a-zA-z]+){2,5})$/;

        //matches phone number in the format (223) 323-3726 i.e (xxx) xxx-xxxx. Only 14 characters can be added
        var match_phone = /^(\(\d{3}\)\s\d{3}\-\d{4})$/;

        //matches the password the password can have special characters as well as numbers.
        //var match_password = /^([a-zA-Z0-9@!#$%*&^.]{8,30})$/;

        //matches the password having any string 4 to 8 characters
        //var match_password = /^.{4,8}$/;

        //matches the password expression that requires one lower case letter, one upper case letter, one digit, 6-33 length, and no spaces.
        var match_password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,33}$/;

        //matches the height and can have numeric or decimal values in the range of xx.xx
        var match_height = /^[0-9]{1,2}((\.)\d{0,2})?$/

        //matches the height and can have numeric or decimal values in the range of xx.xx
        var match_weight = /^[0-9]{1,3}((\.)\d{0,2})?$/

        var count = 0;

        function check(divname, showerrmsg) {
            var val = '';
            var result = true;
            var pwd = '';
            $("#" + divname + " table input").each(function (index, el) {
                val = $(el).val();
                if (($(el).attr('name').indexOf('FirstName') != -1) || ($(el).attr('name').indexOf('firstname') != -1)) {
                    result = match_first_name.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Incorrect name format, Please enter more than 2 and less than 50 characters without any numbers, spaces or special characters.');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('LastName') != -1) || ($(el).attr('name').indexOf('lastname') != -1)) {
                    result = match_last_name.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Incorrect name format, Please enter more than 2 and less than 50 characters without any numbers, spaces or special characters.');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('Email') != -1) || ($(el).attr('name').indexOf('email') != -1)) {
                    result = match_email.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Please enter a valid email address.');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('Phone') != -1) || ($(el).attr('name').indexOf('phone') != -1)) {
                    result = match_phone.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Please enter valid US phone number. eg. (xxx) xxx-xxxx');

                        return false;
                    }
                    else {
                        if (val == "(000) 000-0000") {

                            if (showerrmsg == true)
                                alert("Invalid Phone Number");

                            $(el).addClass("error");
                            result = false;
                            return false;
                        }
                        else {
                            $(el).removeClass("error");
                        }
                    }
                }
                else if (($(el).attr('name').indexOf('ConfirmPassword') != -1) || ($(el).attr('name').indexOf('confirmpassword') != -1)) {
                    result = match_password.test(val);
                                       if (val == pwd) {
                        $(el).removeClass("error");
                    }
                    else {

                        if (showerrmsg == true)
                            alert("Password Doesn't Match");

                        result = false;
                        $(el).addClass("error");
                        return false;
                    }
                }
                else if (($(el).attr('name').indexOf('Password') != -1) || ($(el).attr('name').indexOf('password') != -1)) {
                    pwd = val;
                    result = match_password.test(val);
                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Please enter valid password having 6 to 13 characters, One lower case letter, one upper case letter and one digit.');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('height') != -1) || ($(el).attr('name').indexOf('height') != -1)) {
                    result = match_height.test(val);

                    var msg = 'Please enter valid height. eg. xx.xx';
                    if (result != false) {
                        if (eval($(el).val()) <= 0) {
                            msg = 'Height cannot be zero.';
                            result = false;
                        }
                    }

                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert(msg);

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('weight') != -1) || ($(el).attr('name').indexOf('weight') != -1)) {
                    result = match_weight.test(val);
                    var msg = 'Please enter valid weight. eg. xxx.xx';
                    if (result != false) {
                        if (eval($(el).val()) <= 0) {
                            msg = 'Weight cannot be zero.';
                            result = false;
                        }
                    }

                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true) {
                            alert(msg);
                        }


                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('registeration') != -1) || ($(el).attr('name').indexOf('Registeration') != -1)) {
                    if ($(el).val().trim() == "")
                        result = false;

                    if (result == false) {
                        $(el).addClass("error");

                        if (showerrmsg == true)
                            alert('Please enter registeration number');

                        return false;
                    }
                    else {
                        $(el).removeClass("error");
                    }
                }
                else if (($(el).attr('name').indexOf('image') != -1) || ($(el).attr('name').indexOf('FileUpload') != -1)) {

                    if (showerrmsg) {
                        var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
                        var oInput = $(el);

                        //Check extension
                        if ($(oInput).attr('type') == "file") {
                            var sFileName = $(oInput).val();
                            if (sFileName.length > 0 || $(el).attr('name') == "FileUpload1") {
                                var blnValid = false;
                                for (var j = 0; j < _validFileExtensions.length; j++) {
                                    var sCurExtension = _validFileExtensions[j];
                                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                                        blnValid = true;
                                        break;
                                    }
                                }
                                if (!blnValid) {
                                    alert("Sorry, Please select a file, having extensions " + _validFileExtensions.join(", ") + " with a maximum size of 1MB.");
                                    $(el).addClass("error");
                                    result = false;
                                    return false;
                                }
                                else {
                                    $(el).removeClass("error");
                                }
                            }
                        }

                        //Check filesize
                        if (window.FileReader) {
                            file = oInput.size;
                            size = file;
                            var files = document.getElementById($(el).attr('id')).files;
                            if (files[0].size > 1048576) {
                                alert('File size should be less than 1MB');
                                result = false;
                            }
                        }
                    } //end of if(showerrmsg)
                }
            });
            showerrmsg = false;
            return result;
        }

        function initialize(divname) {
            $("#" + divname + " table input").each(function (index, el) {

                if($(el).attr("type")!="file")
                    $(el).bind("blur", function () { check(divname, false); });

                if($(el).attr("type")=="submit")
                    $(el).bind("blur", function () { check(divname, true); });
            });

            $("#" + divname + " table input").each(function (index, el) {
                $(el).bind("keydown", function (event) { if (len($(el).val()) > $(el).attr('maxlength')) event.preventDefault(); });
            });
        }
 /*---------------------------------Javascript Code Ends Here-------------------------------*/

To Run the above you need to include the javascript code/file in the page you want your validations. In your page add the following lines

<script>
 $(document).ready({ initialize(your_div_name_having_form);});
</script>

Thanks
Ritesh

Disable Dates In Tigra Calendar After Current Date

Hi,

I was working in Tigra Calendar which is a really good javascript calendar library. I was stucked when there was a need to disable dates after the current date. Here is how i was able to solve the problem.

Step 1: Edit tcal.css and add the following lines

div#tcal td.disabled_days {
font-style: italic;
color: silver;
cursor: auto;
}

Step 2: Edit tcal.js and go to the function f_tcalGetHTML (d_date)

After the lines :
if (d_current.getMonth() != d_date.getMonth())
                a_class[a_class.length] = s_pfx + 'OtherMonth';
           
if (d_current.getDay() == 0 || d_current.getDay() == 6)
            a_class[a_class.length] = s_pfx + 'Weekend';
           
if (d_current.valueOf() == d_today.valueOf())
                a_class[a_class.length] = s_pfx + 'Today';
           
if (d_current.valueOf() == d_selected.valueOf())
                a_class[a_class.length] = s_pfx + 'Selected';

And Before the line
d_current.setDate(++n_date)

Add these lines
//start of ritesh's code
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } today = mm + '/' + dd + '/' + yyyy;
today=new Date(today);

var dd1 = d_current.getDate();
var mm1 = d_current.getMonth() + 1; //January is 0!
var yyyy1 = d_current.getFullYear();
if (dd1 < 10) { dd1 = '0' + dd1 } if (mm1 < 10) { mm1 = '0' + mm1 } d_current_1 = mm1 + '/' + dd1 + '/' + yyyy1;
d_current_1=new Date(d_current_1);

//Check if the date of calendar is less than today's date
if (d_current_1 <= today) {
   //default code
    s_html += '<td' + f_tcalRelDate(d_current) + (a_class.length ? ' class="' + a_class.join(' ') + '">' : '>') + n_date + '</td>';
}
else {
    s_html += '<td class="disabled_days">' + n_date + '</td>'
}


And That's It!! Check the calendar the dates after the current dates would be disabled .


Thanks
Ritesh Tandon

504 Gateway Time-out - The web server is not responding, ASP.NET WCF Service.

Hi Folks,

I was facing a problem in my phonegap android mobile app with ASP.NET WCF REST Service, The error used to say 504 Gateway Time-out - The web server is not responding.

But the app was working on many devices but was giving this error on some devices including Samsung S3 I747.

My first impression was the problem is with the web server. I checked the performance which was ok and also checked the code which was .net wcf with LINQ which was also giving result on a decent speed and time.

I also restarted my IIS to clear the cache but still no affect the same error was produced again on the same device.

The first step i took was to enable error tracing in IIS, Which is available in IIS under name "Failed Request Tracing Rules". I activated this with error codes 400,402,500,504 to find out what causes this problem.

When i checked the log files it showed me the error code which was 402 when tried to connect with samsung s3 phone. Here is how i sorted out the problem in three easy steps.


Step 1: Since this error is a status code in a browser my first doubt was that the browser might not be supporting some configuration. So i added the below line in my web.config file

<system.web>
    <browserCaps userAgentCacheKeyLength="256" />

Step 2: Since my WCF service was expecting to give the result in a big time so i decided to increase my response time, close time,receive time, open time and close time. So i added the following line in my web.config file

<bindings>
      <webHttpBinding>
        <binding closeTimeout="10:01:00" openTimeout="10:01:00" receiveTimeout="10:01:00" sendTimeout="10:01:00" maxBufferPoolSize="524288000" maxReceivedMessageSize="65536000" useDefaultWebProxy="true" allowCookies="false" crossDomainScriptAccessEnabled="true" name="cabservicebinding">
          <security mode="None"></security>
        </binding>
      </webHttpBinding>
    </bindings>

Step 3: To activate caching in my WCF results, I also decided to add the following line in web.config in system.servicemodel tag

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

After this, I restarted my IIS and the things started to work fine. Hope this helps to you all.

Thanks
Ritesh Tandon

A circular reference was detected while serializing an object of type

Hi Folks,

I was working with LINQ to SQL classes and was having problem when WCF was returning a List<T> but was returning "A circular reference was detected while serializing an object of type T". This was frustrating as everything seems fine and there was no problem in C# code.

But when i researched i found that LINQ generated classes have many other attributes and also if there are any relational tables the dependencies would be there for the classes which may have reference for child table classes which may cause circular reference. I searched a lot and found that JSON.NET (open source) solves the problem. I downloaded JSON.NET from  http://json.codeplex.com/releases/.(Please note that in .NET 4.5 JSON.NET comes in built) and  the problem was solved. Here is the code in WCF operationcontract

public string GetEmployees()
{
using(EmployeeDbContext context=new EmployeeDbContext())
{
List<Employee> list=new List<Employee>();
list=(from p in context where p.Salary>=10000 select p).ToList();

string jsonstring=JsonConvert.SerializeObject(list,Formatting.Indented, 

                            new JsonSerializerSettings { 
                                   ReferenceLoopHandling = ReferenceLoopHandling.Ignore 

                            });

}

}

To reverse the code would be Employee mylist=JsonConvert.DeserializeObject<Employee>(list);

Thanks
Ritesh

How to Invoke WCF DELETE in ASP.NET

Hi Folks!,

I was facing a problem while invoking DELETE method in WCF. Here is how  i managed to do it.

Step 1. Create a WCF Service.

Create a new WCF service and name it as MyService.svc

using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using System.Data.SqlClient;
using System.Data;
namespace WCFASPNET
{
public class MyService : MyServiceInterface
    {
public string GetAllUsers()
        {
//return all users
}
public string DeleteDept(String ID)
        {
//delete department
}
}

Step 2. Add operation contracts in the WCF Service Interface file.

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

namespace WCFASPNET
{
   [ServiceContract]
    public interface MyServiceInterface
    {

        [OperationContract]
        [WebGet(UriTemplate = "/MyUsersList", ResponseFormat = WebMessageFormat.Json)]
        string GetAllUsers();

        [OperationContract]
        [WebInvoke(Method = "DELETE", BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/DeleteDept/{ID}")]
        string DeleteDept(String ID);

    }
}

Step 3. Add Cross Domain Ajax Code in Global.asax file.

Add the Application_BeginRequest event in Global.asax file

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "*");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }

Step 4. Configure web.config file.

<system.serviceModel>
        <services>
            <service name="WCFASPNET.MyService" behaviorConfiguration="RESTBehavior">
                <endpoint address=""  binding="webHttpBinding" bindingConfiguration="ServiceBinding" behaviorConfiguration="MyEndpointBehavior" contract="WCFASPNET.MyServiceInterface"/>
            </service>
        </services>
        <bindings>
            <webHttpBinding>
                <binding crossDomainScriptAccessEnabled="true" name="ServiceBinding">
                    <security mode="None"></security>
                </binding>
            </webHttpBinding>
        </bindings>
        <behaviors>
            <serviceBehaviors>
                <behavior name="RESTBehavior">
                    <serviceMetadata httpGetEnabled="true"/>
                    <serviceDebug includeExceptionDetailInFaults="true"/>
                </behavior>
                <behavior>
                    <!-- To avoid disclosing metadata information, set the values below to false before deployment -->
                    <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true"/>
                    <!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to avoid disclosing exception information -->
                    <serviceDebug includeExceptionDetailInFaults="false"/>
                </behavior>
            </serviceBehaviors>
            <endpointBehaviors>
                <behavior name="MyEndpointBehavior">
                    <webHttp defaultOutgoingResponseFormat="Json" automaticFormatSelectionEnabled="false" helpEnabled="true"/>
                </behavior>
            </endpointBehaviors>
        </behaviors>
        <protocolMapping>
            <add binding="basicHttpsBinding" scheme="https" />
        </protocolMapping>
        <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
    </system.serviceModel>

Step 5. Call WCF Delete from jquery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.4.1.js"></script>
</head>
<body>
    <script language="javascript" type="text/javascript">
        //getuser();
        deleteuser();
        function deleteuser() {
            $.ajax({
                type: "DELETE",
                url: "MyService.svc/DeleteDept/1",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    // Play with response returned in JSON format.
                    alert(data.toSource());
                },
                error: function (msg) {
                    alert("Error" + msg);
                }
            });
        }
        function getuser() {
            $.ajax({
                type: "GET",
                url: "MyService.svc/MyUsersList",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    // Play with response returned in JSON format.
                    alert(data.toSource());
                },
                error: function (msg) {
                    alert("Error" + msg);
                }
            });
        }
        </script>
    <form id="form1" runat="server">
    <div>
   
    </div>
    </form>
</body>
</html>

ASP.NET SignalR, $.connection.chatHub is undefined

Hi Folks,

I was working with SignalR and was not able to run the program due the error $.connection.chatHub is undefined, i.e my Hub object was undefined in javascript. Here is how i was able to solve the problem :

I am assuming that you already have got all the files from NuGet command prompt for VS2010 or Have installed aspnetcomponents for VS2012.

If not for VS 2010

Go to nuget command and type

PM> Install-Package Microsoft.AspNet.SignalR -pre

For VS2012

Download the asp.net components installer for VS2012 to get the SignalR template.

Please go step by step

Step 1. Check global.asax file, Make sure you have

<%@ Import Namespace="Microsoft.AspNet.SignalR" %>

<%@ Import Namespace="Microsoft.AspNet.SignalR.Hosting" %>

void Application_Start(object sender, EventArgs e)
 {

        // Code that runs on application startup
        RouteTable.Routes.MapHubs();
 
}

Step 2. Check the javascript files, The problem might be the old version of javascript files. Please make sure you have
<script src="js/jquery1.8.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script>
<script src="js/jquery.signalR-1.1.2.min.js" type="text/javascript"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>' type="text/javascript"></script>

make sure that its not <%= ResolveClientUrl("~/signalr/hubs") %> it should be <%: ResolveClientUrl("~/signalr/hubs") %> in the src of the script tag
referencing javascript.

Step 3. Make sure that the Hub class is in App_Code folder, For ex. here the Hub class (i.e ChatHub class) is defined as

using System;

using System.Collections.Generic;

using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Collections.Concurrent;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR.Hubs;

public class ChatHub : Hub

{

    public override Task OnConnected()
    {
        return base.OnConnected();
    }

    public override System.Threading.Tasks.Task OnDisconnected()
    {
        return base.OnDisconnected();
    }

 

   public void Send(string message)
 
   {
     
Clients.All.broadcastMessage(message);
   }

    public void Send(string message, string ConnectionId)
    {
        Clients.Client(ConnectionId).addMessage(message);
    }


}

Step 4: In my aspx page my SignalR code is
   <body>
    <script src="js/jquery1.8.js" type="text/javascript"></script>
    <script src="js/json2.js" type="text/javascript"></script>
    <script src="js/jquery.signalR-1.1.2.min.js" type="text/javascript"></script>
    <script src='<%: ResolveClientUrl("~/signalr/hubs") %>' type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        var chat = $.connection.chatHub;
        $.connection.hub.start().done(function () {
            alert('Connected');
            //Send Data to Hub Class
            chat.server.send("Welcome to SignalR, SignalR Demo Message From Client");
        });
        //To get the server message broadcasted
       chat.client.addMessage = function (message) {
           alert('Message from server '+message);
       });
   </script>
</body>
And here you go, Run the program and the error would be resolved. Still in case you are getting any problem/error please revert back.

For MVC4

Do the Following :

Step 1. Your Global.asax file should look like

            RouteTable.Routes.MapHubs(new HubConfiguration { EnableCrossDomain = true });
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            RouteConfig.RegisterRoutes(RouteTable.Routes);

i.e RouteTable.Routes.MapHubs(new HubConfiguration { EnableCrossDomain = true }); line should be there before, BundleConfig and RouteConfig.

Step 2. In _Layout.cshtml, After meta tag your code should look like

       @Styles.Render("/Content/css")
        @Scripts.Render("/bundles/modernizr")
        @*@Scripts.Render("/Scripts/jquery-1.8.2.min.js")*@
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("/Scripts/jquery.signalR-1.1.2.min.js")
        @Scripts.Render("/signalr/hubs")
        <script type="text/javascript">
            $(document).ready(function ()
            {
                var chatHubClient = $.connection.chatHub;
                alert(chatHubClient);
                $.connection.chatHub.start(function () {
                    chatHubClient.join('TEST');
                });
            });
        </script>

Please note that i have commented the jquery-1.8.2.min.js as MVC jquery bundle would fulfill the jquery package requirement.

Step 3. Create your Hub Class, Please make sure that its NOT in App_Code folder, otherwise you would receive the error "An item with the same key has already been added.".

Follow these simple steps and you will be able to run the SignalR code in MVC4.


Thanks
Ritesh Tandon