Pages

Ruchi Tech

Showing posts with label JSON. Show all posts
Showing posts with label JSON. Show all posts

Monday, 8 October 2012

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


Posted by at 12 comments
Labels: , , , ,

Tuesday, 19 June 2012

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 

Posted by at 67 comments
Labels: ,
Subscribe to: Posts (Atom)