博客文章列表 - XOYOZO.NET

搜索你要找的文章

标签示例

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>标签示例</title>
  <style type="text/css">
    BODY { font-size: 14px; font-family: "宋体"; }
    OL LI { margin: 8px; }
    #con { font-size: 12px; margin: 0px auto; width: 600px; }
    #tags { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 0px 10px; width: 400px; padding-top: 0px; height: 23px; }
    #tags LI { background: url(images/tagleft.gif) no-repeat left bottom; float: left; margin-right: 1px; list-style-type: none; height: 23px; }
    #tags LI A { padding-right: 10px; padding-left: 10px; background: url(images/tagright.gif) no-repeat right bottom; float: left; padding-bottom: 0px; color: #999; line-height: 23px; padding-top: 0px; height: 23px; text-decoration: none; }
    #tags LI.emptyTag { background: none transparent scroll repeat 0% 0%; width: 4px; }
    #tags LI.selectTag { background-position: left top; margin-bottom: -2px; position: relative; height: 25px; }
    #tags LI.selectTag A { background-position: right top; color: #000; line-height: 25px; height: 25px; }
    #tagContent { border-right: #aecbd4 1px solid; padding-right: 1px; border-top: #aecbd4 1px solid; padding-left: 1px; padding-bottom: 1px; border-left: #aecbd4 1px solid; padding-top: 1px; border-bottom: #aecbd4 1px solid; background-color: #fff; }
    .tagContent { padding-right: 10px; display: none; padding-left: 10px; background: url(images/bg.gif) repeat-x; padding-bottom: 10px; width: 576px; color: #474747; padding-top: 10px; height: 350px; }
    #tagContent DIV.selectTag { display: block; }
  </style>
</head>
<body>
  <div id="con">
    <ul id="tags">
      <li><a onclick="selectTag('tagContent0',this)" href="javascript:void(0)">标签一</a>
      </li>
      <li class="selectTag"><a onclick="selectTag('tagContent1',this)" href="javascript:void(0)">
        标签二</a> </li>
      <li><a onclick="selectTag('tagContent2',this)" href="javascript:void(0)">自适应宽度的标签</a>
      </li>
    </ul>
    <div id="tagContent">
      <div class="tagContent" id="tagContent0">
        第一个标签的内容</div>
      <div class="tagContent selectTag" id="tagContent1">
        第二个标签的内容</div>
      <div class="tagContent" id="tagContent2">
        第三个标签的内容</div>
    </div>
  </div>
  <script type="text/javascript">
    function selectTag(showContent, selfObj) {
      // 操作标签
      var tag = document.getElementById("tags").getElementsByTagName("li");
      var taglength = tag.length;
      for (i = 0; i < taglength; i++) {
        tag[i].className = "";
      }
      selfObj.parentNode.className = "selectTag";
      // 操作内容
      for (i = 0; j = document.getElementById("tagContent" + i); i++) {
        j.style.display = "none";
      }
      document.getElementById(showContent).style.display = "block";
    }
  </script>
</body>
</html>

13 年前 2249

采用动态生成控件模式架构简单评论系统

许多情况下，asp.net 在 Page_Load 事件中需要动态生成控件，这对于一些新手，包括我在内，会因为回传控件消失，或重复叠加控件等原因搞得头大，经过我翻阅资料和自己的实践，以博客评论页为例，把整个框架写在下面，仅供参考。

<asp:Panel>
<asp:Panel 记录索引 3 >
<asp:Label 昵称 /> <asp:Label 时间 /> <asp:LinkButton 支持按钮_3 /> <asp:LinkButton 删除按钮_3 /> 1楼
</asp:Panel>
<asp:Panel 记录索引 5 >
<asp:Label 昵称 /> <asp:Label 时间 /> <asp:LinkButton 支持按钮_5 /> <asp:LinkButton 删除按钮_5 /> 2楼
</asp:Panel>
</asp:Panel>

记录索引是指数据库中的自动编号。

支持按钮触发事件 LinkButton_support_Click(object sender, EventArgs e)

删除按钮触发事件 LinkButton_del_Click(object sender, EventArgs e)

所有子 Panel 和内部的所有控件都是在 Page_Load 事件中动态创建的，并且不能被嵌套在 if(!IsPostBack)

“点支持累计点击数”和“点删除删除一条记录”都是需要操作数据库的，我以前的做法是操作完数据库后 .Clear() 掉所有控件，再重新生成一次，这样既浪费服务器资源，又容易出现界面上的混乱，譬如显示了两遍该文章的评论。

其实上面代码中 Panel 套 Panel 的好处就是可以根据索引直接删除相应控件，然后直接在页面呈现，而省去上述烦恼。至于累计支持数就更简单了，下面的代码可以轻松解决问题：

string n = ((Label)Panel_commentLists.FindControl("Label_against_" + id)).Text;
n = (Convert.ToInt32(n) + 1).ToString();
((Label)Panel_commentLists.FindControl("Label_against_" + id)).Text = n;

如果有修改和添加评论操作，同样道理，不要重复地全部 .Controls.Add 一次。为了添加时追加一个子 Panel 方便，建议在 Page_Load 的地方传参使用方法来做。

补充：在现在的开发中，我更喜欢用动态生成TableRow,TableCell来操作。

14 年前 2067

编程

前端

查询 / 检测

行业

考试

地图

本站 API

博客

搜索你要找的文章