动态生成按钮/链接列表的最佳方法是什么答案

【问题标题】：What is best way to generate a list of button/links dynamically动态生成按钮/链接列表的最佳方法是什么
【发布时间】：2016-03-24 21:52:14
【问题描述】：

我正在为一家餐厅构建一个内部应用程序。我不确定动态创建按钮/链接列表的最佳方法是什么。

我有组合餐框列表，比如说 box1、box2、box3（组合框的数量会改变），它们将显示在屏幕上。在选择给定框时，将显示一个弹出窗口，其中包含项目列表，例如 item1...item5。用户可以选择项目并继续。

我想实现一个按钮或链接列表，它们的作用类似于组合框列表和每个按钮的弹出面板，以显示项目并继续。

请指导我创建按钮/链接动态列表的最佳方法。按钮是正确的控件还是可以用来调用面板的其他东西。

我正在使用 asp.net（与 2010 相比）来构建应用程序。

【问题讨论】：

如果您提及并标记您计划使用的 GUI 技术/框架和平台，将会有所帮助。
您在寻找哪种技术？请把你的需要解释清楚一点。

标签： asp.net button dynamic

【解决方案1】：

从这些很少的信息中，只能提出一个非常笼统的建议。

一、链接和按钮的区别：

link 是为了带你去一些地方，它从不使用POST 方法并且应该不会改变服务器中的任何状态，因此应该被视为作为机器人安全（意味着搜索引擎蜘蛛将跟踪链接）
按钮，尤其是在 HTML5 中，是一种通用的 UI 元素，可以用来做许多不同的事情（例如在 JavaScript 的帮助下），但通常不能 strong> 被认为是机器人安全，这意味着搜索引擎蜘蛛可能不会点击按钮（如果它们绑定到 POST 表单，虽然 Google 现在正在渲染 JavaScript 并且可能会遵循 GET 表单，但定义不会)。

从上面看 - 如果您的弹出面板只是一个带有链接的子菜单，那么<a href="#"> 链接可能是好的。

但如果弹出的面板是一个form，它会触发服务器中的某些更改（例如，向购物车中添加一些东西等），那么<button> 会更好地传达面板的真正用途。

关于生成布局，当前的最佳实践是使用<ul>，遍历所有餐盒并为每个餐盒生成一个<li> 元素。然后使用 CSS 设置每个框的高度和高度，并使用 JavaScript 弹出面板。

例如这样的：

<ul class="mealboxes">
  <li class="mealbox"><button id="box1" class="mealbox">Meal Box 1</button></li>
  <li class="mealbox"><button id="box2" class="mealbox">Meal Box 2</button></li>
  <li class="mealbox"><button id="box3" class="mealbox">Meal Box 3</button></li>
</ul>

使用附加 CSS 和 click 事件处理程序的类，并使用按钮 ID，您知道单击了哪个餐盒按钮，因此您可以弹出正确的面板。

PS：要隐藏列表项项目符号，请使用类似这样的 CSS：

ul.mealboxes {
 list-style: none;
}

【讨论】：

谢谢拉斯。有没有办法我们可以使用服务器端控件来实现。
抱歉，我对 ASP.NET 了解不多，但我假设您必须遍历您的餐盒并为每个元素创建一个 runat="server" 按钮。

【解决方案2】：

假设您要使用按钮和/或链接填充的 div 的 id 是：cat 然后使用jQuery：

$('#cat').html('<input type="button" name="" value="Button1"/>');

添加更多文字：

 $('#cat').append('<a href="http://www.google.com">Click Here</a>');

【讨论】：