Implementation

For the implementation first download the JQuery plugin from the deepliquid download page. Extact it. Open the JS folder, and add reference of the scripts (jquery.Jcrop.min.js and jquery.min.js) files to the web application. Also Open the CSS folder and link the style sheet (jquery.Jcrop.css) to the ASPX Page. I am using Hidden fields to get the width, height, X, and Y values from the JCrop.

function crop() {
    jQuery(function() {
        jQuery('#<%= PicCropImage.ClientID %>').Jcrop({
            onSelect: updateValues, //this function will be invoked when the user completes his selection
            aspectRatio: 1  //Setting aspectRatio: 1 will allow user to draw rectangle with aspectratio.
        });
    });
    //Updating the values of the Hidden fields from the output of crop.
    function updateValues(img) {
        document.getElementById('<%= positionx.ClientID %>').value = img.x;
        document.getElementById('<%= positiony.ClientID %>').value = img.y;
        document.getElementById('<%= positionx1.ClientID %>').value = img.x2;
        document.getElementById('<%= positiony1.ClientID %>').value = img.y2;
        document.getElementById('<%= sizew.ClientID %>').value = img.w;
        document.getElementById('<%= sizeh.ClientID %>').value = img.h;
    }
}

And in the server side I am taking the values from the Hidden fields and drawing a new image using the values and saving it in the File System.

//Getting the Filename of the Image displayed.
string fileName = Server.MapPath(this.PicCropImage.ImageUrl);
using (Bitmap sourceImage = new Bitmap(fileName, true))
{
    Rectangle destinationArea = new Rectangle(0, 0,
        int.Parse(this.sizew.Value), int.Parse(this.sizeh.Value));
    Rectangle sourceArea =
        new Rectangle(int.Parse(this.positionx.Value), int.Parse(this.positiony.Value),
        int.Parse(this.sizew.Value), int.Parse(this.sizeh.Value));
    using (Bitmap newBitmapImage = new Bitmap(destinationArea.Right, destinationArea.Bottom))
    {
        using (Graphics graphicsImage = Graphics.FromImage(newBitmapImage))
        {
            //Setting the Graphics properties
            graphicsImage.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphicsImage.CompositingQuality = CompositingQuality.HighQuality;
            graphicsImage.SmoothingMode = SmoothingMode.HighQuality;
            graphicsImage.DrawImage(sourceImage, destinationArea, sourceArea, GraphicsUnit.Pixel);
            IntPtr hbitMap = newBitmapImage.GetHbitmap();
            using (Image image = Image.FromHbitmap(hbitMap))
            {
                //Saving the Image to file system.
                image.Save(Path.Combine(Path.GetDirectoryName(fileName),
                    string.Concat("Cropped_", Path.GetFileName(fileName))), ImageFormat.Jpeg);
            }
        }
    }
}

Thats it. You are ready for cropping with JCrop and ASP.Net.
Happy Cropping

Here is the C# custom control (AutoSuggestTextBox) code.

[DefaultProperty("Text")]
[ToolboxData("<{0}:AutoSuggestTextBox runat=server></{0}:AutoSuggestTextBox>")]
public class AutoSuggestTextBox : WebControl
{
protected override void RenderContents(HtmlTextWriter output)
output.WriteLine("<script type=\"text/javascript\">");
output.WriteLine("$().ready(function() {");
output.WriteLine(string.Format("$(\"#{0}TextControl\").autocomplete(\"{0}.ashx\");", this.ID));
output.WriteLine("});</script>");
output.WriteLine(string.Format("<input type=\"text\" id=\"{0}TextControl\" name=\"{0}TextControl\" />", this.ID));
}
}

In the implementation, I need to give the output from the database as string, so I implemented the code in a asp.net handler(ASHX) file. And in the ProcessRequest method, I wrote the following code.

if (!string.IsNullOrEmpty(context.Request.QueryString["q"])) // remember, 'q' is the query the autosuggest will pass
        {
            SqlDataReader reader;
            string query = string.Format("SELECT [CityName] FROM [City] WHERE [CityName] LIKE '%{0}'", context.Request.QueryString["q"].ToString());
            using (SqlConnection connection = new SqlConnection("Server=mydbserver; User Id=sa;Password=mypassword;Database=mylookups;"))
            {
                connection.Open();
                using (SqlCommand command = new SqlCommand(query, connection))
                {
                    reader = command.ExecuteReader(CommandBehavior.CloseConnection);
                    while (reader.Read())
                    {
                        context.Response.Write(reader["CityName"].ToString() + Environment.NewLine);
                    }
                    reader.Close();
                }
                connection.Close();
            }
        }

Note: I am not promising the above code is optimised. [:)]

And the ASPX Page you need to add reference to following JS Files and Style.

    <script type="text/javascript" language="javascript" src="jquery.js"></script>
    <script src="jquery.autocomplete.js" type="text/javascript"></script>
    <style type="text/css">
        .ac_odd {background:#dddddd;}
        .ac_results { padding: 0px; border: 1px solid black; background-color: white; overflow: hidden; z-index: 99999; }
        .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; }
        .ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size:12px; line-height: 16px; overflow: hidden; }
        .ac_loading { background:url(loading.jpg) right no-repeat; }
        .ac_over { background-color: #0A246A; color: white; }
    </style>

We have completed almost everything, then compile the project, drag the Custom control from toolbox to ASPX page, where you refering the JS Files and CSS. The ASHX File name should be the name of the control. Like if the control’s name is AutoSuggestCity, the ASHX Filename should be AutoSuggestCity.ashx. Please modify the control code if you want to change it.

After running you will get a Textbox, type something there, you will get the suggestions. Here is the one I got.

You can download JQuery from JQuery website. – www.jquery.com. And autosuggest plugin from AutoSuggest plugin page.