Question

Is there a way I can put a link inside a div using c#/css and then create a function in c# asp.net to delete that div?

Im looking to add Delete to the top right hand corner of my div which is like a link then in my code behind call a function which will delete that entry from my database.

My 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;
}

EDIT:
Nothing is being rendered so far on the page:

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

In your HTML create the link. We will hide it using css, and display it when we hover the div.

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

If you create the div in Code:

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);

This is the CSS used to hide/display the link.

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

.deleteButton a{
  display:none;
}

.deleteButton:hover a{
  display:block;
}