I have created a Table Called “Test” in Database with 2 Columns.
1. CategoryId -> Primary Key, Identity Column, Not Null
2. Name -> nVarchar(100), Not Null

Drag and Drop that table on LinQToSql Context.dbml file.

In Code Behind:

protected void Page_Load(object sender, EventArgs e)
    {
        using (var context = new Context())
        {
            ltIdentity.Text = context.Mapping.GetMetaType(typeof(Test)).DBGeneratedIdentityMember.Name;
        }
    }

ltIdentity is a Literal on the webpage.
Click here to download the code.

function showProgress() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest.add_beginRequest(function () {
        $.blockUI({ message: $('#divBlock'), css: { border: 'none', background: 'transparent'} });
    });
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
        $.unblockUI();
    });
}

I have created a function named showProgress. This function uses add_beginRequest and add_endRequest of PageRequestManager.

The beginRequest event is raised before the processing of an asynchronous postback starts and the postback is sent to the server. You can use this event to call custom script to set a request header or to start an animation that notifies the user that the postback is being processed.

The endRequest event is raised after an asynchronous postback is finished and control has been returned to the browser.

So my above code uses these two events to BlockUI and unblockUI.

I have a div containing loading image in my aspx page. You can use same div and Javascript in Master page and that will enable progress for all update panels in the application.

By Default this div is hidden by using css “display:none”; We pass the ID of the div to blockUI plugin.

Easy Isn’t it. You can download the source code by Clicking Here.

here is the Screenshot of how Validators will look like:

As you can see from the screenshot, The validators looks better than what is provided by Microsoft.

The main part of the code is JavaScript code which can be used in any existing application.

Here is the Code:

$(document).ready(function () {
    $('.causeValidation').click(function () {
        $('.error-message').remove();
        var grp = $(this).parent().attr("class");
        $.each(Page_Validators, function () {
            if (this.validationGroup == grp || grp == "") {
                this.style.display = 'none';
                var $control = $('#' + this.controltovalidate);
                if (!this.isvalid) {
                    $control.parent().addClass('validation-error');
                    $control.parent().append('' + this.errormessage + '');
                    $control.focus(function () {
                        $('.error-message', $(this).parent()).remove();
                        $(this).parent().removeClass('validation-error');
                    });
                }
            }
        });
    });
});

The above code disables error messages from regular Validators and replace them with custom one.

This validator also support ValidationGroup. If you have more than one forms on same page and you want to validate each of them separately, you need to do a simple tweak. I will explain that later on.

For now for the code to work, You have to assign CssClass “causeValidation” to Button.

Here is the aspx code for this example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>





    
    
    






                
                    User Name
                
                
                
            

                
                    Password
                
                
                
            

                
                    First Name
                
                
                
            

                
                    Last Name
                
                
                
            

                
                    City
                
                
                
            

                
                    
                
            

As you can see btnTest is assigned a CssClass “causeValidation”.
You can also set Display property of the Validators to None;

The appearance of the form is controlled by CSS. You can modify it according to your needs.

Here is the CSS code used for this example:

body{font-family:Calibri; font-size:14px; color:#888; background-color:#fefefe;}

.form{width:500px; margin:auto; border:6px solid #CCE7F4;}
.form .columns div{padding:5px; background-color:#EEF7FB; border-bottom:1px solid #CCE7F4; margin-bottom:1px;}
.form label{display:inline-block; width:150px; font-weight:bold; font-size:15px;}
.form input[type="text"], .form input[type="password"]{font-size:15px; padding:5px; width:300px; border:2px solid #CCE7F4;}
.form .validation-error *{color:Red;}
.form .validation-error label{color:Red;}
.form .validation-error input{border: 1px solid #CC0000; background: #FCF0EF url(images/error-bg.png) repeat-x top; color: #CC0000; margin-right: 5px;}
.form .error-message{display:block; font-style:italic; background:url(images/icon_error.png) no-repeat;margin:5px; padding-left:20px; margin-left:150px;}

Implementing for ValidationGroup

lets say you have ValidationGroup named “grpInsert” for a form. You have to assign Class of same name as ValidationGroup to the parent element of the button.

Example:

Button Goes Here

Important:

You should always enclose Button to container element with no class if you are not using any ValidationGroup. in my example,I have used

Here is the Source code for above example.

This class “Images.cs” is inherited by IHttpHandler so that this can be used as Handler to serve thumbnails. Thumbnail Width and Height is passed to handler using QueryString parameters.

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Web;
using System.IO;

namespace Xpertz.Base.Handler
{
    public class Images : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {

            var file = context.Request.FilePath.Replace(".ashx", String.Empty);
            var fileName = file.Substring(file.LastIndexOf('/') + 1);
            var extension = file.Substring(file.LastIndexOf('.'));

            int width;
            int height;
            int.TryParse(context.Request["w"], out width);
            int.TryParse(context.Request["h"], out height);

            var path = context.Server.MapPath(file);
            if (!File.Exists(path))
            {
                context.Response.StatusCode = 404;
                context.Response.End();
                return;
            }
            context.Response.Clear();
            context.Response.Cache.SetExpires(DateTime.Now.AddDays(10));
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.Cache.SetValidUntilExpires(false);
            context.Response.AddHeader("content-disposition", "inline;filename=" + fileName);

            using (var fs = new FileStream(path,
                FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
            {
                using (var img = new Bitmap(fs))
                {
                    using (var ms = new MemoryStream())
                    {
                        Bitmap bmpOut = null;

                        if (width > 0 && height == 0)
                        {
                            double tmp = img.Height / (double)img.Width;
                            bmpOut = GenerateThumb(img, width, (int)(width * tmp));
                        }
                        if (height > 0 && width == 0)
                        {
                            double tmp = img.Width / (double)img.Height;
                            bmpOut = GenerateThumb(img, (int)(height * tmp), height);
                        }
                        if (height > 0 && width > 0)
                        {
                            bmpOut = GenerateThumb(img, width, height);
                        }
                        if (height == 0 && width == 0)
                        {
                            bmpOut = GenerateThumb(img, img.Width, img.Height);
                        }
                        if (GetContentType(extension) == "image/jpeg")
                        {
                            var info = ImageCodecInfo.GetImageEncoders();
                            var encoderParameters = new EncoderParameters(1);
                            encoderParameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);
                            if (bmpOut != null) bmpOut.Save(ms, info[1], encoderParameters);
                        }
                        else if (bmpOut != null) bmpOut.Save(ms, GetImageFormat(extension));
                        var arrImg = new byte[ms.Length];
                        ms.Position = 0;
                        ms.Read(arrImg, 0, (int)ms.Length);
                        img.Dispose();
                        context.Response.ContentType = GetContentType(extension);

                        context.Response.BinaryWrite(arrImg);
                        context.Response.End();
                    }
                }
            }

        }

        private static Bitmap GenerateThumb(Bitmap bmp, int width, int height)
        {
            Bitmap result = null;

            try
            {
                var sourceWidth = bmp.Width;
                var sourceHeight = bmp.Height;
                if (width > sourceWidth) width = sourceWidth;
                if (height > sourceHeight) height = sourceHeight;
                var widthPercent = (width / (float)sourceWidth);
                var heightPercent = (height / (float)sourceHeight);
                var finalPercent = heightPercent < widthPercent ? widthPercent : heightPercent;
                var destWidth = (int)(sourceWidth * finalPercent);
                var destHeight = (int)(sourceHeight * finalPercent);
                result = new Bitmap(width, height, PixelFormat.Format24bppRgb);
                result.SetResolution(bmp.HorizontalResolution, bmp.VerticalResolution);
                var graphics = Graphics.FromImage(result);
                graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
                graphics.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
                graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
                graphics.FillRectangle(Brushes.White, 0, 0, width, height);
                graphics.DrawImage(bmp, new Rectangle(0, 0, destWidth, destHeight),
                    new Rectangle(0, 0, sourceWidth, sourceHeight), GraphicsUnit.Pixel);
                bmp.Dispose();
                graphics.Dispose();
            }
            catch
            { }
            return result;
        }

        private static ImageFormat GetImageFormat(string ext)
        {
            switch (ext.ToLower())
            {
                case ".gif": return ImageFormat.Gif;
                case ".jpg":
                case ".jpeg": return ImageFormat.Jpeg;
                case ".png": return ImageFormat.Png;
                case ".bmp": return ImageFormat.Bmp;
                default: throw new NotSupportedException("Invalid Image Format");
            }
        }
        private static string GetContentType(string ext)
        {
            switch (ext.ToLower())
            {
                case ".gif": return "image/gif";
                case ".jpg":
                case ".jpeg": return "image/jpeg";
                case ".png": return "image/png";
                case ".bmp": return "image/bmp";
                default: throw new NotSupportedException("Invalid Image Format");
            }
        }
        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }
}

Usage

To use this Handler, make following changes in web.config file.

Now you are all set to use this Handler. Call this handler be appending ".ashx" in the Image URL
example:
http://www.example.com/images/test.jpg.ashx?w=125&h=125
in the above URL,
w = Width of thumbnail (Optional Parameter)
h = Height of thumbnail (Optional Parameter)

Click Here to download the Sample Code. Don't forget to leave your comments.