How to create AutoComplete TextBox with ASP.NET and jQuery UI

This article explains how to use JQuery UI AutoComplete widget

AutoComplete - A feature that suggests text automatically based on the first few characters that a user types.

 Step:1 Add following code in "default.aspx" page

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
<script type="text/javascript">
$(function () {
   $("[id$=txtAuto]").autocomplete({
   source: function (request, response) {
   $.ajax({
      url: "NameList.asmx/GetNameList", 
      data: "{ 'Name': '" + request.term + "' }",
      dataType: "json",
      type: "POST", 
      contentType: "application/json; charset=utf-8",
      async: true,
      success: function (data) {               
                   var Details = [];
                   for (i = 0; i < data.d.length; i++) {
                         Details[i] = data.d[i].Name;
                                 } response(Details);
                        },
      error: function (result) {
                         }
          });
       }
    });
});
</script>


Add HTML Code:

<div class="demo">
    <div class="ui-widget">
       <label for="txtAuto">Enter Name: </label>
       <asp:TextBox ID="txtAuto" runat="server">
       </asp:TextBox>
    </div>
</div>


Step:2 Add Web Service and write following code in it.


[WebMethod]
public List<UserNameList> GetNameList(string Name)
{ 
  var emp = new UserNameList();  
  var fetchName = emp.GetEmpList()
  .Where(m => m.Name.ToLower().StartsWith(Name.ToLower()));  return fetchName.ToList();       
}

public class UserNameList
{
  public int ID { get; set; } 
  public string Name { get; set; }
  public List<UserNameList> GetEmpList() 
  {
      List<UserNameList> emp = new List<UserNameList>();
      emp.Add(new UserNameList() { ID = 1, Name = "Arjun" });  
      emp.Add(new UserNameList() { ID = 2, Name = "Aaryan" });
      emp.Add(new UserNameList() { ID = 3, Name = "Anoop" });  
      emp.Add(new UserNameList() { ID = 4, Name = "Bob" });
      emp.Add(new UserNameList() { ID = 5, Name = "Boby" });
      emp.Add(new UserNameList() { ID = 6, Name = "Cristen" });  
      emp.Add(new UserNameList() { ID = 7, Name = "Cris" });
      return emp;
  }
}

 Now run the application and check the output.It would be like this

You can download whole code here AutoCompleteTextBox

How to Expand & Rotate Image Using JQUERY

In this article, we will create an expanding image by using slider and also rotate that image by JQUERY.

So, Let's get started:

The HTML

<div id="container">

<div id="slider">

</div>

<br />

<div id="images">

<img id="img" alt="" class="img_main" src="Images/1.jpg" />

<img id="img1" alt="" class="img" src="Images/2.jpg" />

<img id="img7" alt="" class="img" src="Images/3.jpg" />

<img id="img3" alt="" class="img" src="Images/4.jpg" />

<img id="img4" alt="" class="img" src="Images/5.jpg" />

<img id="img5" alt="" class="img" src="Images/6.jpg" />

<img id="img2" alt="" class="img" src="Images/7.jpeg" />

</div>

</div>

Now, Let's look at the style

The CSS

<style type="text/css">

#container

{

padding: 50px;

margin-top: 20px;

}

#images

{

padding: 40px;

}

#images img

{

margin-left: -100px;

background: #e9e9e9;

padding: 10px;

cursor: pointer;

}

#images img:hover

{

background: #333;

}

#slider

{

width: 350px;

}

</style>

The JavaScript

<link href="js/theme/jquery.ui.all.css" rel="stylesheet" type="text/css" />

<script src="js/Jquery.js" type="text/javascript"></script>

<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>

<script src="js/Base.js" type="text/javascript"></script>

<script type="text/javascript" src="js/rotate3Di.js"></script>

<script type="text/javascript">

$(function () {

$("#slider").slider({

value: -100,

min: -100,

max: 0,

step: 1,

slide: function (event, ui) {

$(".img").css("margin-left", ui.value + "px");

}

});

$("img").rotate3Di(45);

$('img').click(function () { $(this).rotate3Di('toggle', 1000); });

});

</script>

and That's it. Hope, you enjoyed this article and like it.

Download Files:

JqueryTest

Resize Images Using JQuery

Write a JQuery function for Image Resizing:

$(document).ready(function(){
    $('imgresize').each(function(){
        var maxWidth = 500;
        var ratio = 0;
        var img = $(this);

        if(img.width() > maxWidth){
            ratio = img.height() / img.width();
            img.attr('width', maxWidth);
            img.attr('height', (maxWidth*ratio));   
        }
    });
});

This script simply resize your image.

Upload and Crop Image with JQuery in ASP.Net

Image Cropping is the most important and required part in social media projects. There is a JQuery Plugin which allows to crop image using Jquery without any trouble.

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

How to use it.

 First download the plugin and include the references of the required libraries in .aspx page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="Scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>

Add Jquery code for cropping the image

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('[id$=imgCrop]').Jcrop({
            onSelect: storeCoords
        });
    });
    function storeCoords(c) {
        jQuery('[id$=X]').val(c.x);
        jQuery('[id$=Y]').val(c.y);
        jQuery('[id$=Z]').val(c.z);
        jQuery('[id$=A]').val(c.a);
    };
</script>

Add code in your aspx page

<div>
        <asp:Panel ID="pnlCrop" runat="server" Visible="false">
            <asp:Image ID="imgCrop" runat="server" />
            <asp:HiddenField ID="X" runat="server" />
            <asp:HiddenField ID="Y" runat="server" />
            <asp:HiddenField ID="Z" runat="server" />
            <asp:HiddenField ID="A" runat="server" />
        </asp:Panel>
        <asp:Panel ID="pnlCropped" runat="server" Visible="false">
       <asp:Image ID="imgCropped" runat="server" />
        </asp:Panel>
 <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</div>

Now, add code in your aspx.cs page

protected void btnCrop_Click(object sender, EventArgs e)
{
 string ImageName = Session["UploadImage"].ToString();
  int z = Convert.ToInt32(Z.Value);
  int a = Convert.ToInt32(A.Value);
  int x = Convert.ToInt32(X.Value);
  int y = Convert.ToInt32(Y.Value);
  byte[] CropImage = Crop(path + ImageName, z, a, x, y);
  using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
  {
     ms.Write(CropImage, 0, CropImage.Length);
     using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))
       {
          string SaveTo = path + "crop" + ImageName;
          CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
           pnlCrop.Visible = false;
           pnlCropped.Visible = true;
           imgCropped.ImageUrl = "images/crop" + ImageName;
       }
    }
 }

static byte[] Crop(string Img, int Width, int Height, int X, int Y)
{
  try
   {
    using (SD.Image OriginalImage = SD.Image.FromFile(Img))
    {
     using (SD.Bitmap bmp = new SD.Bitmap(Width, Height))
      {
      bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
       using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))
       {
         Graphic.SmoothingMode = SmoothingMode.AntiAlias;
         Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
         Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
         Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, 

         MemoryStream ms = new MemoryStream();
         bmp.Save(ms, OriginalImage.RawFormat);
         return ms.GetBuffer();
       }
     }
   }
}
    catch (Exception Ex)
    {
      throw (Ex);
    } 

 }

Download Full Solutions:  CroppingSolutions

 It is really simple. Now you can easily crop the image. Please let me know, if you have any query.

Bind dropdown list using JSON,JQuery in asp.net

In this article i will show you how to bind a DropDownList using JSON, JQuery to avoid page refresh via a Web Method .It is very useful and many time we require to use Jquery Ajax.

Code to Bind dropdownlist in asp.net 

Add code in "Default.aspx" page

download jquery.js

 
<head runat="server">
<title></title>
    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" language="javascript">
        $().ready(function () {
            $.ajax({
                type: "POST",
                url: "Default2.aspx/GetGenders",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                
                    $("#ddlGender").get(0).options.length = 0;
                    $("#ddlGender").get(0).options[0] = new Option
("Select Gender", "-1");

                    $.each(msg.d, function (index, item) {
                        $("#ddlGender")
.get(0).options[$("#ddlGender").get(0).options.length] = 
new Option(item.Display, item.Value);
                    });

                    $("#ddlGender").bind("change", function () {
                        GetNames($(this).val());
                    });
                },
                error: function () {
                    alert("Failed to load Genders");
                }
            });
        });

        function GetNames(genderID) {
            if (genderID > 0) {
                $("#ddlName").get(0).options.length = 0;
                $("#ddlName").get(0).options[0] = 
new Option("Loading names", "-1");

                $.ajax({
                    type: "POST",
                    url: "Default2.aspx/GetNames",
                    data: "{genderID:" + genderID + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#ddlName").get(0).options.length = 0;
                        $("#ddlName").get(0).options[0] = 
new Option("Select name", "-1");

                        $.each(msg.d, function (index, item) {
                            $("#ddlName")
.get(0).options[$("#ddlName").get(0).options.length] = 
new Option(item.Display, item.Value);
                        });
                    },
                    error: function () {
                        $("#ddlName").get(0).options.length = 0;
                        alert("Failed to load names");
                    }
                });
            }
            else {
                $("#ddlName").get(0).options.length = 0;
            }
        }
    </script>
    <style type="text/css">
        #ddlGender
        {
            width: 149px;
        }
        #ddlName
        {
            width: 146px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="border:1px solid gray; width:400px;">
    <table border="0" cellpadding="0" cellspacing="0" 
        style="width: 353px; height: 149px">
                <tr align="center">
                    <th>
                        Gender
                    </th>
                    <td>
                        <select id="ddlGender">
                        </select>
                    </td>
                </tr>
                <tr align="center">
                    <th>
                        Name
                    </th>
                    <td>
                        <select id="ddlName">
                        </select>
                    </td>
                </tr>
            </table>
            </div>
    </form>
</body> 

 

and in "Default.aspx.cs"

[WebMethod]
    public static ArrayList GetGenders()
    {
        return new ArrayList()
            {
                new { Value = 1, Display = "Male" },
                new { Value = 2, Display = "Female" }
            };
    }

    [WebMethod]
    public static ArrayList GetNames(int genderID)
    {
        if (genderID.Equals(1))
        {
            return new ArrayList()
                {
                    new { Value = 1, Display = "John" },
                    new { Value = 1, Display = "Tom" },
                    new { Value = 1, Display = "Harry" },
                    new { Value = 1, Display = "Bob" }
                };
        }
        else if (genderID.Equals(2))
        {
            return new ArrayList()
                {
                    new { Value = 1, Display = "Gauri" },
                    new { Value = 1, Display = "Rihana" },
                    new { Value = 1, Display = "Kate" },
                };
        }
        else
        {
            throw new ApplicationException("Invalid Gender ID");
        }
    }

The result is shown as