C# 在net core 3.1 mvc中添加多个标记以形成表单

在我的项目中，用户可以在他们想要存储的视频数据库中添加一个条目。视频应该有多个标签（可选）。让用户动态输入多个标记的好方法是什么

我创建了三个模型，Video、Tag和VideoTags，它们保存每个视频的标记的m2m关系

录像带

我的html（Create.cshtml）

现在，我的问题是如何在我的html表单上正确实现这一点，用户提供视频输入的其他细节？

---

我认为这将涉及到

JQuery

，但我真的不知道如何进行。用户应该添加这些标记，因此我希望他们能够在需要时添加输入字段，然后在提交到后端时，我的

控制器

将接收该输入并将其转换为

IEnumerable

或

列表
它不需要
ICollection
来添加标记。您只能使用一个
字符串
，并使用jQuery实现。请参见示例：


让myArray=[]；
$（文档）.on（'click'，'#makeTags'，function（）{
if（$（'givTags'）.val（））{
设prev=$（'#sendTags'）.val（），
typed=$（'#givTags'）.val（），
make=prev+'，'+类型化；
$（'#sendTags'）.val（make）；
$（'givTags'）.val（''）；
}
});
#givTags，#sendTags{
宽度：400px；
高度：30px；
边界半径：10px；
边框：1px实心#eee；
填充：0 20px；
大纲：无！重要；
}
#制造标签{
边界：无；
宽度：100px；
高度：30px；
边界半径：9px；
背景：#e4；
利润率：10px0；
颜色：浅灰色；
光标：指针；
大纲：无！重要；
}



发送标签







这是我在网上商店项目中使用的代码的一部分


解决方案：
我们应该有两个输入

第一个输入只是一个显示，是用户正在工作的内容
开
第二个输入正好保存输入的标记和
最终允许我们将它们全部发送到服务器
操作：
用户在第一个输入中输入一个值。然后，您可以通过点击
+
键或
回车键来输入关键字。
根据谷歌、必应或任何其他搜索引擎的规则，关键字必须用
，
分隔。
因此，我们要做的是在输入关键字后将逗号粘贴到关键字的末尾。而且，这个过程一直持续到最后

重点：
当然，这不是我们从用户那里获取关键字的唯一方法。但我认为这是仍然流行的最好的方法之一。与
ICollection
定义方法不同，此方法不需要创建
for循环
来打印标记，所有标记都一起打印，搜索引擎可以跟踪它们。因此，这种方法比
ICollection
方法工作得快得多。
此外，您的用户将更舒适地使用此方法，并将拥有更愉快的用户体验

脚注：
最后，如果您对这个方法或我的代码有更多问题，请询问我。我会尽快回答他们。
我希望这个答案能满足你的所有需要。如果是这样的话，我请你接受这个答案



//按Enter键调用addKey（）（此块是可选的！）
$（窗口）.keydown（函数（事件）{
如果（event.keyCode==13）{
event.preventDefault（）；
addKey（）；
返回false；
}
});
//按按钮调用addKey（）
$（'#addKey'）。单击（函数（e）{
addKey（）；
});
//添加键功能
函数addKey（）{
让key=$（'#keysInput'）.val（）
如果（键！=''）{
让tag=document.createElement（'span'）
$（标记）.append（键）
$（tag.attr（'onclick'，`$（this.remove（）；removeKey（${key}”）；`）
$（'.addedKeysHolder'）.append（标记）
$（'#keysInput'）.val（''）
resetKey（）
}
}
//根据我的目标，此函数等于resetKey（）。但在这里，我把它放在一个单独的块中，因此，如果需要，您可以轻松地自定义它
函数removeKey（）{
resetKey（）
}
//重置所有键
函数resetKey（）{
$（'#lkey'）.val（''）
用于（设i=1；i按钮{
浮动：左；
身高：100%；
宽度：40px；
边界：无；
大纲：无！重要；
背景：#673AB7；
边界半径：7px；
颜色：白色；
光标：指针；
字号：26pt；
}
.keyHandler>输入{
浮动：左；
宽度：计算（100%-45px）；
利润率：0.5px；
高度：38px；
填充：0 14px；
背景：#ffffff；
边界：无；
大纲：无！重要；
字体系列：monospace；
边框底部：2个实心#673AB7；
}
.addedKeysHolder{
浮动：左；
宽度：100%；
高度：自动；
利润率：8px0；
}
.addedKeysHolder>跨度{
背景：2196F3；
填充：8px 10px 8px 30px；
浮动：左；
保证金：2倍；
边界半径：100px；
颜色：白色；
字体系列：monospace；
字号：12号；
位置：相对位置；
光标：指针；
}
.addedKeysHolder>跨度：之后{
内容：“\d7”；
位置：绝对位置；
左：12px；
排名：0；
底部：0；
宽度：14px；
高度：14px；
线高：.5；
保证金：自动；
字号：17号；
}

+
我要试试这个，谢谢！@CMorgan好极了！如果你的问题解决了，我邀请你接受我的答案，如果有帮助的话，请记住也要投票，欢呼这很有效，但是应该添加什么来让用户编辑标签并删除它们呢？我在自己的项目中做过一次。请允许我几分钟来分享我在另一封回复中使用的代码。非常感谢您的时间。我将尽快测试此代码！
public class Video: BaseModel
{
    public string Name { get; set; }
    public string OriginUrl { get; set; }
    public string Description { get; set; }
    public string FileLocationIcon { get; set; }
    public ICollection<VideoTags> VideoTags { get; set; }
}

public class Tag: BaseModel
{        
    public string TagName { get; set; }
    public ICollection<VideoTags> VideoTags { get; set; }
}

public class VideoTags
{
    public string VideoId { get; set; }
    public Video Video { get; set; }

    public string TagId { get; set; }
    public Tag Tag { get; set; }

}

<div class="col-md-4">
    <form asp-action="Create" enctype="multipart/form-data" method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Name" class="control-label"></label>
            <input asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="OriginalUrl" class="control-label"></label>
            <input asp-for="OriginalUrl" class="form-control" />
            <span asp-validation-for="OriginalUrl" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Description" class="control-label"></label>
            <textarea asp-for="Description" class="form-control"> </textarea>
            <span asp-validation-for="Description" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Icon" class="control-label"></label>
            <input type="file" asp-for="Icon" class="form-control" accept="image/x-png,image/gif,image/jpeg" />
            <span asp-validation-for="Icon" class="text-danger"></span>
        </div>

        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
</div>