在net core 3.1 mvc中添加多个标签以形成

Question

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

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

视频

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; }

}

我的 html (Create.cshtml)

<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>

现在，我的问题是如何在用户提供视频条目的其他详细信息的 html 表单上正确实现这一点？ 我认为这将涉及JQuery，但我真的不知道如何进行。用户应该添加这些标签，所以我希望他们能够在需要时添加输入字段，然后在提交到后端时，我的 Controller 将接受该输入并将其转换为 IEnumerable 或 List .

Answer 1

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

---

解决方案：

我们应该有两个输入。

1. 第一个输入只是一个显示，是用户正在工作的内容 开。
2. 第二个输入正是保存输入标签和 最终允许我们将它们全部发送到服务器。

操作：

用户在第一个输入中输入一个值。然后您可以通过点击+ 键或Enter key 输入您的关键字。 根据 Google 或 Bing 或任何其他搜索引擎的规则，关键字必须以, 分隔。 所以我们所做的就是在输入关键字后将逗号粘贴到关键字的末尾。而且，这个过程一直持续到最后。

强调：

当然，这不是我们从用户那里获取关键字的唯一方法。但我认为这是仍然流行的最好方法之一。与ICollection定义方法不同，这种方法不需要创建for loop来打印标签，所有标签都打印在一起，搜索引擎可以跟踪。所以这个方法比ICollection 方法工作得快得多。 此外，您的用户会更适应这种方法，并获得更愉快的用户体验。

脚注：

最后，如果您对此方法或我的代码有更多疑问，请咨询我。我会尽快回复他们。 我希望这个答案能满足您的所有需求。如果是这种情况，我邀请您接受这个答案。

---

//call addKey() by pressing Enter (  This block is optional!  )
$(window).keydown(function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    addKey();
    return false;
  }
});

//call addKey() by pressing button
$('#addKey').click(function(e) {
  addKey();
});


//Add key function
function addKey() {
  let key = $('#keysInput').val()
  if (key != '') {
    let tag = document.createElement('span')
    $(tag).append(key)
    $(tag).attr('onclick', `$(this).remove();removeKey("${key}");`)
    $('.addedKeysHolder').append(tag)
    $('#keysInput').val('')
    resetKey()
  }
}

//According to my goals, this function was equal to the resetKey(). But here I put it in a separate block, so you can easily customize it if you want
function removeKey() {
  resetKey()
}

//Reset all keys
function resetKey() {
  $('#lkey').val('')
  for (let i = 1; i <= $('.addedKeysHolder span').length; i++) {
    let theKey = $(`.addedKeysHolder span:nth-child(${i})`).text()
    let prevVal = $('#lkey').val() + ','
    $('#lkey').val(prevVal + theKey)
  }
  $('#lkey').val($('#lkey').val());
  $('#keysInput').focus();
}

/*  Just add some styles to make it beautiful  */
*,
::after,
::before {
  box-sizing: border-box;
}

.keyHandler {
  float: left;
  width: 250px;
  height: 40px;
}

.keyHandler>button {
  float: left;
  height: 100%;
  width: 40px;
  border: none;
  outline: none !important;
  background: #673AB7;
  border-radius: 7px;
  color: white;
  cursor: pointer;
  font-size: 26pt;
}

.keyHandler>input {
  float: left;
  width: calc(100% - 45px);
  margin: 0 0 0 5px;
  height: 38px;
  padding: 0 14px;
  background: #ffffff;
  border: none;
  outline: none !important;
  font-family: monospace;
  border-bottom: 2px solid #673AB7;
}

.addedKeysHolder {
  float: left;
  width: 100%;
  height: auto;
  margin: 8px 0 0 0;
}

.addedKeysHolder>span {
  background: #2196F3;
  padding: 8px 10px 8px 30px;
  float: left;
  margin: 2px;
  border-radius: 100px;
  color: white;
  font-family: monospace;
  font-size: 12pt;
  position: relative;
  cursor: pointer;
}

.addedKeysHolder>span:after {
  content: "\d7";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  line-height: .5;
  margin: auto;
  font-size: 17pt;
}

<div class="keyHandler">
  <button type="button" id="addKey">+</button>
  <input type="text" placeholder="Keyword + Enter" id="keysInput">
</div>
<div class="addedKeysHolder"></div>


<!-- Just give this input the name="etc" attribute -->
<input type="hidden" id="lkey" name="tags">


<!--------------------------------------------------->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Answer 2

添加标签不需要ICollection。可以只用一个string，用jQuery来实现。看例子：

let myArray = [];
$(document).on('click', '#makeTags', function(){
    if ($('#givTags').val()){
    let prev = $('#sendTags').val(),
          typed = $('#givTags').val(),
        make = prev + ',' + typed;
        $('#sendTags').val(make);
    $('#givTags').val('');
  }
});

#givTags, #sendTags {
    width: 400px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #eee;
  padding: 0 20px;
  outline: none !important;
}
#makeTags {
    border: none;
    width: 100px;
    height: 30px;
    border-radius: 9px;
    background: #e4e4e4;
    margin: 10px 0 0 0;
    color: dimgrey;
    cursor: pointer;
    outline: none !important;
}

<input type="text" id="givTags" value="" placeholder="write any thing and then press button..." />
<br />
<button id="makeTags">send tags</button>
<br />
<br />
<br />
<input type="text" name="tags" id="sendTags" value="" placeholder="make it's type as hidden after you find out how it works" />

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

你的班级：

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 string VideoTags { get; set; }
}