使用ASP.NET和AJAX從復選框列表填充文本框

Question

我的頁面上有一個文本框控件和一個復選框列表控件。

首先，我在復選框列表中使用隱藏代碼中的員工對象列表。 員工有一個ID和一個名字。 兩者都顯示在復選框列表中，如下所示：

• 吉姆（1）
• 亞歷克斯（2）
• 加里（3）

用戶選中其中一個框時，需要在文本框中填充員工的姓名。 因此，如果選擇了Jim，則文本框值為“ Jim”。 它還需要支持多個值，因此，如果選擇Jim和Gary，則文本框值為“ Jim，Gary”。

另外，如果用戶在文本框中輸入有效值，則應檢查正確的員工。 這需要支持名稱和ID。 因此，如果我在文本框中輸入“ 1，Alex”，然后在文本框外單擊，則應該選擇Jim和Alex。

我正在使用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);
            }
        }
    });
});