如何将标签添加到 Asp.net 文本框中？答案

【问题标题】：How to add Tag into Asp.net Textbox?如何将标签添加到 Asp.net 文本框中？
【发布时间】：2016-04-18 14:52:19
【问题描述】：

我正在尝试在 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"

那么它在前端不再显示标签了。

所以，请建议我该怎么做。

【问题讨论】：

刚刚回答了一个类似的问题stackoverflow.com/a/36695435/2592042

标签： javascript c# asp.net

【解决方案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 以外的其他内容进行选择，例如类：

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

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

【讨论】：