Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Dynamically populate a checkbox list control
- [WebMethod]
- public GetUsersResponse[] LoadUsers()
- {
- if (HttpContext.Current.Session["Users"] != null)
- {
- return (List<GetUsersResponse>)HttpContext.Current.Session["Users"];
- }
- return new List<GetUsersResponse>();
- }
- [WebMethod]
- public GetUsersResponse[] GetUsers(string query)
- {
- var users = new List<string>
- {
- "Brad Pitt",
- "Brad Pitt2",
- "Brad Pitt3",
- "Angelina Jolie",
- "Jeniffer Aniston",
- "Tom Cruise",
- "Katie Holmes",
- "Tom Hanks",
- "Sean Pen",
- "Jude Law",
- "Bruce Willis"
- };
- var returnUsers = users.Where(s => s.ToLower().Trim().StartsWith(query.ToLower().Trim()))
- .Select(s => new GetUsersResponce { Name = s })
- .ToArray();
- HttpContext.Current.Session["Users"] = returnUsers;
- HttpContext.Current.Session["Query"] = query;
- return returnUsers;
- }
- public class GetUsersResponse
- {
- public string Name { get; set; }
- }
- <script type="text/javascript">
- $(function () {
- $.ajaxSetup({ type: 'POST', dataType: 'json', contentType: 'application/json', data: {} });
- $.ajax({
- url: 'Lookup.asmx/LoadUsers',
- data: '',
- success: function (data) {
- var responseJson = data.d;
- if (responseJson.length > 0) {
- $.each(responseJson, function () {
- $("#result").append("<li><input type='checkbox'>" + this.Name + "</input></li>")
- });
- }
- }
- });
- $("#txtType").keyup(function () {
- var input = $(this).val();
- $("#result").html("");
- if (input && input.length > 3) {
- $.ajax({
- url: 'Lookup.asmx/GetUsers',
- data: '{ "query": "' + input + '" }',
- success: function (data) {
- var responseJson = data.d;
- if (responseJson.length > 0) {
- $.each(responseJson, function () {
- $("#result").append("<li><input type='checkbox'>" + this.Name + "</input></li>")
- });
- }
- }
- });
- }
- });
- });
- </script>
- <table cellpadding="5">
- <tr>
- <td>Search</td>
- <td><asp:TextBox ID="txtType" runat="server" ClientIDMode="Static" /></td>
- </tr>
- <tr>
- <td colspan="2">
- <ul id="result" style="list-style: none;">
- </ul>
- </td>
- </tr>
- </table>
Advertisement
Add Comment
Please, Sign In to add comment