Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jul 17th, 2012  |  syntax: None  |  size: 2.73 KB  |  hits: 11  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Dynamically populate a checkbox list control
  2. [WebMethod]
  3. public GetUsersResponse[] LoadUsers()
  4. {
  5.     if (HttpContext.Current.Session["Users"] != null)
  6.     {
  7.         return (List<GetUsersResponse>)HttpContext.Current.Session["Users"];
  8.     }
  9.  
  10.     return new List<GetUsersResponse>();
  11.  
  12. }
  13.  
  14. [WebMethod]
  15. public GetUsersResponse[] GetUsers(string query)
  16. {
  17.     var users = new List<string>
  18.     {
  19.         "Brad Pitt",
  20.         "Brad Pitt2",
  21.         "Brad Pitt3",
  22.         "Angelina Jolie",
  23.         "Jeniffer Aniston",
  24.         "Tom Cruise",
  25.         "Katie Holmes",
  26.         "Tom Hanks",
  27.         "Sean Pen",
  28.         "Jude Law",
  29.         "Bruce Willis"
  30.     };
  31.  
  32.     var returnUsers = users.Where(s => s.ToLower().Trim().StartsWith(query.ToLower().Trim()))
  33.                      .Select(s => new GetUsersResponce { Name = s })
  34.                      .ToArray();
  35.  
  36.     HttpContext.Current.Session["Users"] = returnUsers;
  37.     HttpContext.Current.Session["Query"] = query;
  38.     return returnUsers;
  39. }
  40.  
  41. public class GetUsersResponse
  42. {
  43.     public string Name { get; set; }
  44. }
  45.        
  46. <script type="text/javascript">
  47.     $(function () {
  48.         $.ajaxSetup({ type: 'POST', dataType: 'json', contentType: 'application/json', data: {} });
  49.  
  50.         $.ajax({
  51.             url: 'Lookup.asmx/LoadUsers',
  52.             data: '',
  53.             success: function (data) {
  54.                 var responseJson = data.d;
  55.                 if (responseJson.length > 0) {
  56.                     $.each(responseJson, function () {
  57.                         $("#result").append("<li><input type='checkbox'>" + this.Name + "</input></li>")                                    
  58.                     });
  59.                 }
  60.             }
  61.         });
  62.  
  63.  
  64.  
  65.         $("#txtType").keyup(function () {
  66.             var input = $(this).val();
  67.             $("#result").html("");
  68.             if (input && input.length > 3) {
  69.                 $.ajax({
  70.                     url: 'Lookup.asmx/GetUsers',
  71.                     data: '{ "query": "' + input + '" }',
  72.                     success: function (data) {
  73.                         var responseJson = data.d;
  74.                         if (responseJson.length > 0) {
  75.                             $.each(responseJson, function () {
  76.                                 $("#result").append("<li><input type='checkbox'>" + this.Name + "</input></li>")                                    
  77.                             });
  78.                         }
  79.                     }
  80.                 });
  81.  
  82.             }
  83.         });
  84.     });
  85. </script>
  86. <table cellpadding="5">
  87.     <tr>
  88.         <td>Search</td>
  89.         <td><asp:TextBox ID="txtType" runat="server" ClientIDMode="Static" /></td>
  90.     </tr>
  91.     <tr>            
  92.         <td colspan="2">
  93.             <ul id="result" style="list-style: none;">
  94.             </ul>
  95.         </td>
  96.     </tr>
  97. </table>