ASP.NET / javascript 中的动态标签

Question

我正在做的网站需要有动态标签，例如： 如果网页列出了特定书籍的作者（有多个作者），它看起来像这样： Author 1: Nikola Tesla [Remove] Author 2: Elon Musk [Remove] Author 3: Alan Turing [Remove]

（请注意，在这种情况下，[Remove] 是一个按钮，用于删除作为作者的特定人员。）

我的问题是，假设我删除了 Elon Musk 作为作者，图灵的标签现在应该更改以反映这一点（将变为 Author 2）。

我已经使用客户端 JavaScript 尝试了一些不同的事情（因为解决方案需要在不刷新页面或任何回发的情况下工作）但我自己无法接近可行的解决方案，我的逻辑似乎不正确或受限于我缺乏网络开发经验。我根本没有做过太多的网络开发，所以我真的在学习。该解决方案还需要在用户向图书添加新作者的情况下工作。

编辑：作者不存储在表格中，而只是使用标签列出。这（由于我无法控制的事情）无法更改。

编辑 2：这是我认为相关的代码，如果需要其他内容，请告诉我。
<div ID='dvAuthor" + i.ToString + "' class='form-group'><div class='col-sm-4 control-label'>

一个额外的转折是在服务器端，它在添加作者时替换占位符（这意味着当添加作者时，页面确实会刷新 - 这很好，但删除不应该要求相同） .更有趣的是我们没有使用 JQuery！

i.ToString 只是一个添加的整数，以便对作者的 ID 进行编号，例如 dvAuthor0 等等。

编辑 3：回复@Basic

好的，这让事情变得更清楚了。作者标签的div 来自服务器（即，每次添加作者时，页面都会刷新，客户端现在将新添加的作者呈现给他们。）所以我想我的问题是，我将如何循环div 在客户端，或者更好的是，如果我不知道页面上有多少作者，我可以遍历每个作者的div 并获取他们的 ID？会不会是这样的while(hasNextAuthor) {add author ID to array} 抱歉所有问题，我对 Web 开发的东西真的很陌生，我正在尽我所能。

另外，我不需要担心从网页中删除作者，我已经有一个功能可以做到这一点（在客户端和服务器上）。编号是唯一需要做的事情，它实际上只是装饰性的，当前的编号系统工作正常，但不会在用户删除作者时动态更改编号，而是等到用户选择保存然后重新加载页面用正确的编号。

编辑 4：我想我有办法完成这项工作，我只是挂断了一个……如何从客户端获取网页上的作者数量？它们是 JavaScript 中的一种方式，我可以循环查看为网页创建了多少 divs？

Answer 1

有一些库可以通过 JavaScript 进行模板化。淘汰赛是一个不错的选择，您可以在此处了解更多信息： http://knockoutjs.com/documentation/template-binding.html ...并在这里看到一个很好的例子： https://www.devbridge.com/articles/knockout-a-real-world-example/

使用 Knockout，您基本上可以创建一个客户端 ViewModel 和一组可观察的作者。然后可以将它们绑定到模板 HTML UI，该 UI 与 ViewModel 交互，直到需要将其保存回来。

使用该库重新绑定应该没什么问题。

Answer 2

原 JQuery 解决方案

您可以使用具有奇数索引的数组并绑定到它。这样您就可以解决缺失的索引。

There is an older stackoverflow article here that answers your question.

相当于指定每个元素的索引以及输入值：

<input type="hidden" name="Author.Index" value="3" />

如果你只是想让文字更漂亮，你可以这样做：

<div id="author_1" class="author-container">Author <span class="authors" data-index="1">1</span>: First Last <a ..>[Remove]</a></div>

然后在 JavaScript 中你可以做 (Assuming JQuery):

function UpdateIndexes()
{
   var idx = 1;
   $(".authors").each(function(el){
      $(this).text(idx);
      idx++;
   });
}

$(function(){
    $(".whateverRemoveSelector").on("click", function(){
      $(this).parents(".author-container").remove();
      UpdateIndexes();
   });
})

仅 JavaScript 解决方案

我试图让变量名保持原样，以便于理解。这既可以从作者的数组创建、连接删除事件，也可以重新编号作者的数组。

希望这能解决您需要做的事情！

var authors = [
  { Name: "J.K. Rowling" },
  { Name: "Orson Scott Card" },
  { Name: "Stephen King" },
  { Name: "Nicholas Sparks" }
];

/*
<div ID='dvAuthor" + i.ToString + "' class='form-group'><div class='col-sm-4 control-label'>
*/

function Remove(){
  var e = event.target.parentNode.parentNode;  
  e.parentNode.removeChild(e);
  
  var numbers = document.getElementsByClassName("sel-author-number");
  for(var i = 0; i < numbers.length; i++){
    var number = numbers[i];
    number.innerHTML = i+1;
  }
}

window.onload = function(){
  var authors = [
    { Name: "J.K. Rowling" },
    { Name: "Orson Scott Card" },
    { Name: "Stephen King" },
    { Name: "Nicholas Sparks" }
  ];
  
  var e = document.getElementById("authorsContainer");
  for(var i = 0; i < authors.length; i++){
    var container = document.createElement("div");
    var author = document.createElement("div");
    var authorNumber = document.createElement("span");
    authorNumber.setAttribute("class", "sel-author-number");
    authorNumber.appendChild(document.createTextNode((i+1)));
    container.setAttribute("class", "form-group");
    var authorID = "author" + (i+1);
    container.setAttribute("id", authorID); 
    author.setAttribute("class","col-sm-4 control-label");
    author.appendChild(authorNumber);
    author.appendChild(document.createTextNode(": " + authors[i].Name));
    var removeLink = document.createElement("span");
    removeLink.appendChild(document.createTextNode("[Remove]"));
    author.appendChild(removeLink);
    container.appendChild(author);
    
    e.appendChild(container);
    removeLink.onclick = function(){
      Remove();
    };
  }
};

<div id="authorsContainer"></div>

Answer 3

你有 2 个不同的问题；

• 管理作者列表（可能带有 ID）
• 显示编号列表

对于第一部分，有一个数组或作者，并使用 js 来添加/删除。如果您不熟悉该技术，请参阅this answer。当对该数组进行任何更改时，调用第二个“更新屏幕”函数，该函数会清除保存作者的<div> 并重新创建其内容。

您的update() 函数可能如下所示：

//Add and remove from authors as you wish, then call update()
var authors = ['Bob', 'Sue'];

function update() {
    var container = document.getElementById('Authors');

    //clear the container, open a list
    container.innerHTML = "<ul>"

    //Recreate the contents...
    for(var i = 0; i < authors.length; i++) {
        //Add the author
        container.innerHtml += '<li>' + i + '. ' + authors[i] + '</li>';
    }

    //Close the list
    container.innerHTML += "</ul>"
}

当然，如果您使用的是 jQuery，那么这段代码可以被大量清理...

编辑：作者最初来自哪里并不重要，您可以轻松地将它们放入 javascript 列表中。猜测一下循环代码/对象模型的样子，更改生成 div 的代码

<% For i = ... %>
    <div ID='dvAuthor" + i.ToString + "' class='form-group'><div class='col-sm-4 control-label'>
<% Next %>

改为生成数组条目

var authors = [];
<% for i = ... %>
    authors[i] = '<%=Authors(i).Name.Replace("'", "\'") %>';
<% Next %>

或者如果这不可能，您可以从当前页面内容中填充列表（比较混乱，但是...）

var authors = [];
var authorDivs = document.getElementById("Container").getElementsByTagName("div");
for(var i=0;i<authorDivs.length;i++) {
    authors[i] = authorDivs[i].innerHTML;
}

而且没有多余的东西：

var authorDivs = document.getElementById("Container").getElementsByTagName("div");
for(var i=0;i<authorDivs.length;i++) {
    var currentId = authorDivs[i].id;
    var currentContents = authorDivs[i].innerHTML;
    // etc...
}