如何将标签添加到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({..});