如何將標簽添加到Asp.net文本框中？

Question

我正在嘗試在asp.net中開發一個Web應用程序，我的目標是創建一個文本框，用戶可以用逗號鍵入多個電話號碼，然后將其顯示為標簽。 我想要的如下：

我已經可以使用以下代碼實現此目的：

        <div class="control-group">
            <label class="control-label col-md-3 col-sm-3 col-xs-12">Input Tags</label>
            <div class="col-md-9 col-sm-9 col-xs-12">
                <input id="tags_1" type="text" class="tags form-control" value="social, adverts, sales" />
                <div id="suggestions-container" style="position: relative; float: left; width: 250px; margin: 10px;"></div>
            </div>
        </div>

        <script>
    function onAddTag(tag) {
        alert("Added a tag: " + tag);
    }

    function onRemoveTag(tag) {
        alert("Removed a tag: " + tag);
    }

    function onChangeTag(input, tag) {
        alert("Changed a tag: " + tag);
    }

    $(function () {
        $('#tags_1').tagsInput({
            width: 'auto'
        });
    });

但是問題是當我把它做成

  runat="server"

然后，它不再在前端顯示標簽。

所以，請建議我該怎么做。

Answer 1

將輸入設置為runat=server會提示asp.Net生成完全唯一的ID。 如果您檢查HMTL，您會看到ID不是tags_1 。 您可以通過在文本框中將ClientIDMode設置為static來關閉此功能

<asp:Textbox runat="server" ClientIDMode="static".../>

如您所見，您還必須使用asp.Net文本框，而不僅僅是將標准html文本框設置為runat="server"

您的另一種選擇是將jQuery更改為通過id以外的其他內容進行選擇，例如class：

<input id="tags_1" type="text" class="tags form-control 
     tags_1" value="social, adverts, sales" />

$('.tags_1').tagsInput({..});