Заполнение текстового поля из списка флажков с помощью ASP.NET и AJAX

Question

У меня есть элемент управления текстовыми полями и элемент управления флажком на моей странице.

Я сначала заполняю свой список флажков со списком объектов-сотрудников в коде. У сотрудника есть идентификатор и имя. Оба отображаются в списке CheckBox следующим образом:

• Джим (1)
• Alex (2)
• Gary (3)

Когда пользователь проверяет одну из коробок, тем имя сотрудника должно быть заполнено в текстовом поле. Поэтому, если выбран Jim, значение текстового поля - «Джим». Он также должен поддерживать несколько значений, поэтому, если выбраны Джим и Гэри, значение текстового поля будет «Джим, Гэри».

Кроме того, если пользователь вводит допустимое значение в текстовое поле, необходимо проверить правильного сотрудника. Это необходимо для поддержки имен и идентификаторов. Поэтому, если я введу «1, Алекс» в текстовое поле, а затем щелкните за пределами текстового поля, следует выбрать Джима и Алекса.

Я использую ASP.NET, и мне нужно сделать это с помощью AJAX, но у меня нет опыта использования jQuery и AJAX. Может ли кто-нибудь показать мне простой пример того, как это сделать?

Answer 1

Вот что я собрал вместе, что могло бы помочь вам начать. Он не проверен и не завершен, но у меня нет времени делать все правильно, поэтому подумал, что это может помочь. Там определенно должно быть намного больше проверок и парирования, которые я оставил для вас, чтобы реализовать.

$(function() { 
    // gets all checkbox items by a common class you will put on all of them 
    $('.checkboxlistclass').click(function(e) { 
     var txt = $(this).text(); 
     var employeeName = txt; // change this to parse out the name part and remove the id 

     var currentTxtVal = $('#textboxid').val(); 
     var newVal = currentTxtVal + ',' + employeeName; // check if you need the comma or not 

     $('#textboxid').val(newVal); 
    }); 

    // textboxid is the id of the textbox 
    $('#textboxid').change(function(e) { 
     var textboxVal = $(this).val(); 

     // split on the comma and get an array of items 
     // this is dummy data 
     var items = []; 
     items.push('Jim'); 
     items.push(2); 

     // go through all the items and check if it's a number or not 
     // if it's a number do a selection based on the id in parenthesis 
     // if not then check first part for name match 
     for (var i=0; i < items.length; i++) { 
      if (isNaN(parseInt(items[i])) { 
       $(".checkboxlistclass:contains('" + items[i] + " ('").attr('checked', true); 
      } 
      else { 
       $(".checkboxlistclass:contains(' (" + items[i] + ")'").attr('checked', true); 
      } 
     } 
    }); 
});