c# - 有什么办法可以在 div 中放置一个链接

Question

有没有一种方法可以使用 c#/css 在 div 中放置一个链接，然后在 c# asp.net 中创建一个函数来删除该 div？

我希望将 Delete 添加到我的 div 的右上角，这就像一个链接，然后在我的代码后面调用一个函数，该函数将从我的数据库中删除该条目。

我的CSS:

div .test
{
  width:90%; 
  z-index:1; 
  padding:27.5px; 
  border-top: thin solid #736F6E;
  border-bottom: thin solid #736F6E;
  color:#ffffff;
  margin:0 auto;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

编辑: 到目前为止，页面上没有呈现任何内容:

System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                    div.Attributes["class"] = "test";
                    div.ID = "test";


                    // Deletebutton div with link
                    System.Web.UI.HtmlControls.HtmlGenericControl divClose = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                    divClose.Attributes["class"] = "deleteButton";
                    divClose.ID = "deleteButton";
                    div.Controls.Add(divClose);
                    System.Web.UI.HtmlControls.HtmlGenericControl link = new System.Web.UI.HtmlControls.HtmlGenericControl("a");
                    link.ID = "link";
                    divClose.Controls.Add(link);

                    Image img = new Image();
                    img.ImageUrl = String.Format("{0}", reader.GetString(1));
                    img.AlternateText = "Test image";

                    div.Controls.Add(img);
                    div.Controls.Add(ParseControl(String.Format("{0}", reader.GetString(0))));
                    div.Style["clear"] = "both";

                    test1.Controls.Add(div);

CSS:

div#test1 {
}
div .test {
  width:90%; 
  z-index:1; 
  padding:27.5px; 
  border-top: thin solid #736F6E;
  border-bottom: thin solid #736F6E;
  color:#ffffff;
  margin:0 auto;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}
.deleteButton {
  width: 200px;
  height: 15px;
  border: 1px solid blue;
}

.deleteButton a{
  display:none;
}

.deleteButton:hover a{
  display:block;
}

Answer 1

在您的 HTML 中创建链接。我们将使用 css 隐藏它，并在悬停 div 时显示它。

<div class="deleteButton">
  <asp:LinkButton runat="server" id="delButton" Text="Delete"/>
</div>

如果您在代码中创建 div:

System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
div.Attributes["class"] = "test";
div.ID = "test";


// Deletebutton div with link
System.Web.UI.HtmlControls.HtmlGenericControl divClose = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
divClose.Attributes["class"] = "closeButton";
divClose.ID = "closeButton";
div.Controls.Add(divClose);
System.Web.UI.HtmlControls.HtmlGenericControl link= new System.Web.UI.HtmlControls.HtmlGenericControl("a");
link.ID = "link";
divClose.Controls.Add(link);

img = new Image();
ImageUrl = String.Format("{0}", reader.GetString(1));
img.AlternateText = "Test image";

div.Controls.Add(img);
div.Controls.Add(ParseControl(String.Format("{0}", reader.GetString(0))));
div.Style["clear"] = "both";

test1.Controls.Add(div);

这是用于隐藏/显示链接的 CSS。

<!-- CSS -->
.deleteButton {
  width: 200px;
  height: 15px;
  border: 1px solid blue;
}

.deleteButton a{
  display:none;
}

.deleteButton:hover a{
  display:block;
}