Monday, 31 March 2014

Validation using Jquery Validator

Plugins:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"> </script>   
              <script type="text/javascript" src="jQueryPlugins/date.js"></script>


// Must use validate method before creating and using rules.
 $("#Form_ID").validate({
                errorElement: "em",   //This is a css class for showing error messege
            });


//Rules for File upload  control
$('#fu_PassportFront').rules('add', {
                required: true,
                messages: {
                    required: "Please Upload Passport Front Page."
                }
            });

 //Rule for each text box with classname passportNo                    
            $('.passportNo').each(function () {
                $(this).rules('add', {
                    required: true,
                    lettersAndNumbers: true,
                    messages: {
                        required: "Please enter Passport Number.",
                        lettersAndNumbers: "Only alphanumeric for passport."
                    }
                });
            });
//Rules for Date
            $('.passIssueDay').each(function () {
                $(this).rules('add', {
                    required: true,                   
                    validateDate: true,
                    MaxDate: true,
                    messages: {
                        required: "Please enter Date",                       
                        validateDate: "Please enter a valid date dd/mm/yyyy.",
                        MaxDate: "Invalid Issue date"
                    }
                });
            });

            $('.passExpDay').each(function () {
                $(this).rules('add', {
                    required: true,
                    validateDate: true,
                    MinDate: true,
                    messages: {
                        required: "Please enter Date",
                        validateDate: "Please enter a valid date dd/mm/yyyy.",
                        MinDate: "Invalid Expiry date"
                    }
                });
            });
//Register methods.
            jQuery.validator.addMethod("lettersAndNumbers", function (value, element) {
                return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
            }, "Please enter alphabets and numbers only.");

            jQuery.validator.addMethod("MinDate",function(value,element){
            try{
            var minDate= new Date()
            var d = Date.parseExact(value, "d/M/yyyy");
            if(d==null){return false;}
            else if(d<minDate){return false;}
            else{return true;}
            }
            catch(e){return fals;}           
            },"Date Shoule be greater than current date"); 

             jQuery.validator.addMethod("MaxDate",function(value,element){
            try{
            var maxDate= new Date()
            var d = Date.parseExact(value, "d/M/yyyy");
            if(d==null){return false;}
            else if(d>maxDate){return false;}
            else{return true;}
            }
            catch(e){return fals;}           
            },"Date Shoule be less than current date");

            jQuery.validator.addMethod("validateDate", function (value, element) {
                try {
                    var d = Date.parseExact(value, "d/M/yyyy");
                    if (d == null) {
                        return false;
                    } else {
                        return true;
                    }
                }
                catch (e) {
                    return false;
                }
            }, "Please enter a valid UK date dd/mm/yyyy");

Thursday, 13 March 2014

Read runtime generated controls using classname with JQuery

 $('.ClassName').live('click', function (e) {
        e.preventDefault();
        //  blockScreen(this.id);
        var indexid = this.id.split('-');
        var name = this.name;
         $('ID').html("<image style=' margin-top:35px; padding-bottom:40px' src='images/loaderNew.gif' alt='Loading' ></image>");
        $.ajax({
            type: "POST",
            url: "ABC.aspx",
            data: { cIndex: indexid[1], Details: details },
            success: ShowPopup,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //error message
            }
        });
    });

function ShowBookNowPopup(resp) {
        $(blockId).html(resp);
        $(blockId).show();

    }

Load result on scroll using jquery.

JAVASCRIPT : 

var sIndex = 10, offSet = <%=offSet %>, isPreviousEventComplete = true, isDataAvailable = true;
$(document).scroll(function () {
        if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
            $('#loadMsg').hide();
            if (isPreviousEventComplete && isDataAvailable) {
                isPreviousEventComplete = false;
                $('#loadMsg').show();              
                $.ajax({
                    type: "GET",
                    url: 'ResultAjax.aspx?startIndex=' + sIndex + '&offset=' + offSet + '',
                    success: function (result) {
                        $("#result").append(result);
                        $('#loadMsg').hide();
                        sIndex = sIndex + offSet;
                        showFltrdResult();
                        isPreviousEventComplete = true;

                        if (result == '') { //When data is not available
                            isDataAvailable = false;
                            $('#loadMsg').hide();
                        }
                    },
                    error: function (error) {
                        $('#loadMsg').hide();
                        alert(error);
                    }
                });

            }
        }
    });  

Write required html in ResultAjax.aspx page.

Upload File without using server control in asp.net

.Aspx Page or .master Page

 <form action="Default.aspx" method="post" enctype="multipart/form-data">
    <input type="file" name="UploadedFile" />
    <input type="submit" value="OK" />
  </form>

Default.aspx.cs Page

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Files["UploadedFile"] != null)
        {
            HttpPostedFile MyFile = Request.Files["UploadedFile"];
            //Setting location to upload files
            string TargetLocation = Server.MapPath("~/Files/");
            try
            {
                if (MyFile.ContentLength > 0)
                {
                    //Determining file name. You can format it as you wish.
                    string FileName = Path.GetFileName(MyFile.FileName);
                    //Determining file size.
                    //int FileSize = Dosya.ContentLength;
                    //Creating a byte array corresponding to file size.
                    //byte[] FileByteArray = new byte[FileSize];
                    //Posted file is being pushed into byte array.
                   // MyFile.InputStream.Read(FileByteArray, 0, FileSize);
                    //Uploading properly formatted file to server.
                    MyFile.SaveAs(TargetLocation + FileName);
                    }
            }
            catch (Exception BlueScreen)
            {
                //Handle errors
            }
        }