将新项目添加到列表/部分视图而不重新加载页面？答案

【问题标题】：Add new item to a list/partial view without reload the page?将新项目添加到列表/部分视图而不重新加载页面？
【发布时间】：2018-01-23 18:05:58
【问题描述】：

我做了一些谷歌搜索，发现这可能需要使用局部视图和 JavaScript。但是在我进一步挖掘之前想得到一些建议。

我想要实现的是：在文本框中输入一些文本，按下按钮，页面不会刷新（使用 JavaScript），在文本框上方或下方的某个位置显示刚刚输入的文本（尚未保存在数据库中），以及删除任何添加的项目的能力（可能在每段文本之后带有 ax 按钮，当单击该段文本时会从页面中删除，就像在 stackoverflow 中删除标签的方式一样）。

谢谢。

【问题讨论】：

如果有人能指点我一个可以做这种工作的样本，我们将不胜感激。

标签： javascript asp.net-core-mvc asp.net-mvc-partialview

【解决方案1】：

这是一个开始。也许其他人可以完成它。我得走了

var paragraphInput = document.querySelector('#paragraphInput');
var tagsHere = document.querySelector('#tagsHere');
document.querySelector('#breakBtn').addEventListener('click',function(){

  var words = paragraphInput.value.split(" ");
  console.log(words);
  
  for( var i = words.length; i>=0; i--){
    if( words[i] != undefined ){
  
      var newspan = document.createElement("span");
      newspan.classList = "post-tag";
      newspan.innerHTML = words[i] + "<span class='delete-tag'></span>";
      tagsHere.appendChild(newspan)
      }
  }
});

html, body {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 13px;
    line-height: 1.26666667;
    color: #242729;
}
.tag-editor {
    border: 1px solid #c8ccd0;
    cursor: text;
    background-color: #FFF;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

div, span{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.post-tag {
    
    position: relative;
    display: inline-block;
    padding: .4em .5em;
    margin: 2px 2px 2px 0;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    transition: all .15s ease-in-out;
    color: #39739d;
    background-color: #E1ECF4;
    border-color: transparent;
}

.delete-tag {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-block;
    background-position: -40px -319px;
    cursor: pointer;
    margin-left: 3px;
    margin-top: -2px;
    margin-bottom: -1px;
    background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.png?v=0786b22b9381);
    background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be),none;
    background-size: initial;
    background-repeat: no-repeat;
    overflow: hidden;
}

<textarea id="paragraphInput"></textarea>
<input id="breakBtn" type="button" value="break" ></input>

<br><br>

<div class="tag-editor">


<span id="tagsHere">

<span class="post-tag rendered-element">javascript<span class="delete-tag" title="remove this tag"></span></span>

<span class="post-tag rendered-element">asp.net-core-mvc<span class="delete-tag" title="remove this tag"></span></span>

<span class="post-tag rendered-element">asp.net-mvc-partialview<span class="delete-tag" title="remove this tag"></span></span>

</span>

</div>

【讨论】：

非常感谢。我会试一试的。

【解决方案2】：

找到一个使用 JQuery 插件 tokenInput 的帖子，几乎可以完成我需要的一切（仍在弄清楚样式部分）。此示例适用于 .net 用户： https://medium.com/yasser-shaikh/using-jquery-tokeninput-with-asp-net-mvc-3-razor-f80c2d68e994

【讨论】：

【解决方案3】：

您可以使用直接的 HTML 和 jQuery 完成您提到的所有操作。

https://codepen.io/anon/pen/mXVxXJ

$(document).ready(function() {
  $('#listSection').on('click', '.itemDelete', function() {
    $(this).closest('li').remove();
  });
});


  function addItem() {
    var text = $('#txtVal').val(); 
    $('#listSection ul').append("<li class='list-group-item'>" + text + "<a href='#' title='Remove Item' class='itemDelete'> X</a></li>");
    $('#txtVal').val('');
  };

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <h3>Dynamic List Example</h3>
    <hr/>
    <div class="row">
      <div class="col-md-4">
        <label>Enter Text</label>
        <input id="txtVal" type='text' class="form-control"></input><br/>
        <button id="AddButton" onClick="addItem()" class="btn btn-primary">Add to list</button>
      </div>
    </div>
    <br/>
    <label>My List</label>
    <div class="row">
      <div class="col-md-2">
        <div id="listSection">
          <ul class="list-group">
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

【讨论】：