如何通过后台代码使用Tagit jQuery生成独立的案号标签？

我明白你的困扰——后台把案号追加到文本框后，Tagit却把所有内容当成了一个标签，这是因为你用的换行符并不是Tagit默认识别的分隔方式，而且直接给文本框赋值的逻辑也不符合Tagit的初始化规则。下面给你两个实用的解决方案：

方案一：通过initialTags初始化独立标签（推荐） #

1. 修改后台代码，生成标签数组的JSON格式 #

不用再给文本框拼接换行的案号，而是把拆分后的案号数组转成JSON字符串，方便前端直接读取：

List<Models.Case> caseRefer = CaseCon.ViewById(SelectedCase.strId);
List<string> casenumbers = new List<string>();

if (caseRefer[0].ReferCases != null)
{
    casenumbers = caseRefer[0].ReferCases.Split(',').ToList();
    // 过滤掉包含<br />的无效项
    casenumbers = casenumbers.Where(item => !item.Contains("<br />")).ToList();
}

// 将标签数组序列化为JSON字符串
string initialTagsJson = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(casenumbers);
// 把JSON字符串存到ViewState，供前端调用
ViewState["InitialTags"] = initialTagsJson;

2. 前端初始化时传入初始标签数组 #

修改JS代码，读取后台生成的JSON数组，作为Tagit的初始标签参数：

<asp:TextBox ID="txt_referCases" runat="server"></asp:TextBox>
<script>
$(function () {
    // 读取后台生成的标签数组，默认空数组防止报错
    var initialTags = <%= ViewState["InitialTags"] ?? "[]" %>;
    
    $('#<%=txt_referCases.ClientID %>').tagit({
        initialTags: initialTags, // 传入初始标签数组，自动渲染为独立标签
        autocomplete: {
            delay: 0,
            minLength: 3,
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/Case.aspx/ReferCases") %>',
                    data: "{ 'caseNum': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item, index) {
                            return { label: item, val: index }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
        }
    });
});
</script>

方案二：初始化后逐个添加标签（适合动态追加场景） #

如果不想调整初始化逻辑，也可以在Tagit初始化完成后，调用API逐个添加标签：

1. 后台代码调整 #

把拆分后的案号用逗号分隔拼到文本框：

List<Models.Case> caseRefer = CaseCon.ViewById(SelectedCase.strId);
List<string> casenumbers = new List<string>();

if (caseRefer[0].ReferCases != null)
{
    casenumbers = caseRefer[0].ReferCases.Split(',').ToList();
    casenumbers = casenumbers.Where(item => !item.Contains("<br />")).ToList();
}

// 用逗号分隔案号，存到文本框
txt_referCases.Text = string.Join(",", casenumbers);

2. 前端调用API添加标签 #

初始化Tagit后，拆分文本框的值，逐个创建标签：

<asp:TextBox ID="txt_referCases" runat="server"></asp:TextBox>
<script>
$(function () {
    var $tagitInput = $('#<%=txt_referCases.ClientID %>');
    
    // 初始化Tagit并获取实例
    var tagitInstance = $tagitInput.tagit({
        autocomplete: {
            delay: 0,
            minLength: 3,
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/Case.aspx/ReferCases") %>',
                    data: "{ 'caseNum': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item, index) {
                            return { label: item, val: index }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
        }
    }).data('tagit');
    
    // 拆分文本框的逗号分隔值，逐个添加标签
    var existingTags = $tagitInput.val().split(',');
    $.each(existingTags, function(index, tag) {
        if ($.trim(tag) !== '') { // 过滤空标签
            tagitInstance.createTag(tag);
        }
    });
});
</script>

为什么原来的方法失效？ #

Tagit默认不会把换行符当成标签分隔符，它初始化时只识别initialTags数组，或者文本框内逗号分隔的内容（需对应配置）。你用换行符拼接的内容会被当成一段完整文本，自然就变成了单个标签。

内容的提问来源于stack exchange，提问作者Salar Muhammad