I created few div's dynamically using C#. Now I want to delete few div's from displayed div's using the div's ID, which created dynamically. I tried in many ways, but didn't solution. So please me to come up with solution. I have created around 200 nodes using below code. I would like to delete using content or div id. Please suggest me the best way to solve this.
public void draw_node(int id, int top, int left, string content)
{
string topstr = Convert.ToString(top) + "px";
string leftstr = Convert.ToString(left) + "px";
System.Web.UI.HtmlControls.HtmlGenericControl dynDiv =
new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
dynDiv.ID = "window" + Convert.ToString(id); // like window1, window2, window3
dynDiv.Attributes["class"] = "component window";
dynDiv.Style.Add(HtmlTextWriterStyle.Top, topstr);
dynDiv.Style.Add(HtmlTextWriterStyle.Left, leftstr);
dynDiv.InnerHtml = content; // some no. like 1, 2, 3, 4
this.Controls.Add(dynDiv);
}
you could use jquery (documentation):
<div class="container">
<div class="hello">Hello</div>
<div id="a" class="goodbye">Goodbye</div>
</div>
<script>
$('div').remove('.hello');
or
$('div').remove('#a');
</script>
or as dynamic funktion:
<script>
function removeDIVbyID(ID)
{
$('div').remove('#'+ID);
}
</script>
Related
I'm using ASP.NET C# to display a catalog of items. When the user selects an item, I display the details of that item and I'd like to display one or more pictures. I tried a few methods for this and settled on the Blueimp carousel. It's working just fine if I populate the links div in the html, but I need to show different pics (from URLs in the SQL Server DB) depending on the item.
The code below works to populate the links div, but all I see is a blank space on the screen--no carousel, no images.
<div id="IllustrationDiv" runat="server">
<!-- Links div goes here -->
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
</script>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel"
class="blueimp-gallery blueimp-gallery-carousel"
aria-label="image carousel">
<div class="slides" aria-live="off"></div>
<h3 class="title"></h3>
<a class="prev"
aria-controls="blueimp-gallery-carousel"
aria-label="previous slide"></a>
<a class="next"
aria-controls="blueimp-gallery-carousel"
aria-label="next slide"></a>
<a class="play-pause"
aria-controls="blueimp-gallery-carousel"
aria-label="play slideshow"
aria-pressed="false"
role="button"></a>
<ol class="indicator"></ol>
</div>
<script src="../Scripts/blueimp-gallery.min.js"></script>
<script>
blueimp.Gallery(document.getElementById('links').getElementsByTagName('a'), {
container: '#blueimp-gallery-carousel',
carousel: true
})
</script>
</div>
ViewState["illustration_details_dt"] = dt;
// Open div
System.Web.UI.HtmlControls.HtmlGenericControl newDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
newDiv.ID = "links"; //<---Give and ID to the div, very important!
newDiv.Attributes.Add("hidden", "hidden");
for (int i = 0; i < dt.Rows.Count; i++)
{
Image newImage = new Image();
HyperLink newHyperLink = new HyperLink();
newHyperLink.NavigateUrl = dt.Rows[i]["universal_resource_locator"].ToString();
newHyperLink.Target = "_blank";
newHyperLink.Text = dt.Rows[i]["document_id"].ToString();
newImage.ImageUrl = dt.Rows[i]["universal_resource_locator"].ToString();
newImage.AlternateText = dt.Rows[i]["document_id"].ToString();
newImage.BackColor = System.Drawing.Color.White;
newHyperLink.Controls.Add(newImage); // TODO - Commented for troubleshooting
newDiv.Controls.Add(newHyperLink); // TODO - Commented for troubleshooting
}
IllustrationDiv.Controls.AddAt(0,newDiv); // Add the new div to our already existing div
I'm looking for options. If populating the links div from codebehind isn't going to work, what would work? If populating the links div from codebehind does work, what am I doing wrong?
Thanks.
I found the answer. I'm using a master page on my site with a content placeholder for the subpages. Because I'm using a ContentPlaceholderID = "MainContent", MainContent_ is appended to each of the IDs on my page, so my blueimp script looking for document.getElementById('links') needed to have "MainContent_" prepended to "links". I change the script to:
<script>
document.getElementById('MainContent_links').onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
var carouselOptions = {
startSlideshow: true
}
</script>
The links were populating just fine, but blueimp couldn't find them. This fixed it.
I am trying to remove the navbar and print button from the page that I am trying to print. I attempted to use CustomSwitches but Rotativa does not appear to like them.
string customSwitches =
"--disable-smart-shrinking --header-html {0} --footer-html {1}";
var printForm = new ActionAsPdf("Receipt", new { id = id })
{
PageSize = Rotativa.Options.Size.Legal,
CustomSwitches = customSwitches
};
return printForm;
My view for reference: Print view.
What are some thoughts?
You can use --print-media-type custom switch.
Apply the class no-print for your navbar div and button
Then write your CSS like this
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
I have an update panel, which fires every third seconds. I have this code into my asp.net page
<div ID="campaignDiv" runat="server" >
<ul>
</ul>
</div>
and I add its content dynamically like this:
private string CreateLiCheckbox(string checkBoxText)
{
return string.Format("<li><span class=\"textDropdown\">{0}</span><input id=\"{1}\" value=\"{0}\" type=\"checkbox\"><label for=\"{1}\"></label></li>", checkBoxText, checkBoxText + "dropdownID");
}
if (!IsPostBack) {
List<string> comps = getCompainNames();
string html = "<ul>";
for (int i = 0; i < comps.Count(); i++) {
html = html + CreateLiCheckbox(comps[i]);
}
html = html + "</ul>";
campaignDiv.InnerHtml = html;
}
My problem
when the page loads, the checkboxes are like this:
Then, I change the values to these:
but when the update pannel works, the page returns to its default statues, where nothing of the checkboxes are selected
could you help please?
How can I get the height of a div which is placed inside a masterpage?
I'm able to set the height as follow:
((HtmlControl)this.Master.FindControl("sidebar")).Style.Add("height", "600px");
Now I'm trying to get the height from my div called mainPage, how can I do this?
MasterPage.Master:
<div id="_test" style="height: 100px" runat="server"></div>
MasterPage.Master.cs:
public HtmlGenericControl test
{
get { return this._test; }
}
any other cs-file:
string width = ((MasterPage)this.Master).test.style["height"];
Edit: If you want to get any style information created dynamically you will need to store this information into a hidden field, because you won't be able to retrieve the data by calling style["x"] in the postback.
Edit2: Adjusted masterpage-name.
You will have to get the div's height on the client side as it may be rendered differently for each client...
Using jQuery, you can do
$("#sidebar").height();
but for this you will have to wait that the document is ready. So you can put this line in the ready function of the document:
$(document).ready(function(){});
EDIT
Another solution is adding runat="server" to your div
<div ID="sidebar" runat="server">...</div>
Then from your code you can do something like
HtmlGenericControl sb = this.form1.FindControl("sidebar") as HtmlGenericControl;
int sidebarHeight = sb.Height;
I have a dynamic number of data elements that need to be added to my asp.net page. I am currently trying to do this by looping through a result data set like this:
protected void Page_Load(object sender, EventArgs e)
{
UserDB db = new UserDB();
string employeeIDOrName = Request.QueryString["employeeID"];
DataSet ds = db.GetUserSearch(employeeIDOrName);
DataTable table = ds.Tables[0];
foreach (DataRow row in table.Rows)
{
string employeeID = row[0].ToString();
string emailAddress = row[1].ToString();
string phone = row[2].ToString();
string details = emailAddress + " | " + phone;
UserControl uc = new Controls_EmployeeSearchResults(employeeID, details);
placeholder1.Controls.Add(uc);
}
}
Then in the employeeSearchResults code, I have:
<div class="returnDataBoxSup" onclick="insertAddedSup('1091912','Shawna Burns');">
<div id="searchResults" runat="server">
</div>
</div>
for the ascx page and
public Controls_EmployeeSearchResults(string name, string details)
{
/*<div class="returnDataBoxSup" style="overflow:hidden;" onclick="insertAddedSup('1091912','Shawna Burns');">
<span ID="spanName" runat="server" style="text-transform:capitalize; white-space:nowrap"></span><br />
<span ID="spanDetails" runat="server" style="font-size:0.7em; white-space:nowrap"></span>
</div>*/
//Div
HtmlGenericControl div1 = new HtmlGenericControl("div");
div1.ID = "returnDataBoxSup";
div1.Attributes["style"] = "overflow:hidden;";
div1.Attributes["onClick"] = "insertAddedSup('1091912','Shawna Burns');";
div1.Attributes["class"] = "returnDataBoxSup";
//Span Name
HtmlGenericControl span1 = new HtmlGenericControl("span");
span1.ID = "span_" + name;
span1.Attributes["style"] = "text-transform:capitalize; white-space:nowrap";
span1.InnerHtml = name;
//Span Details
HtmlGenericControl span2 = new HtmlGenericControl("span");
span2.ID = "spanD_" + name;
span2.Attributes["style"] = "font-size:0.7em; white-space:nowrap";
span2.InnerHtml = details;
div1.InnerHtml = span1.ToString();
div1.InnerHtml += span2.ToString(); ;
//div1.Controls.Add(span1);
//div1.Controls.Add(span2);
//searchResults = new HtmlGenericControl("div");
searchResults.InnerHtml = div1.ToString();
}
in the code behind. I first tried to add the span controls to the div, but I was receiving an exception. When I tried to add the controls to the inner html, it said that it could not convert the control type to string. Is there any way that I can do what I am trying to do?
I receive employee data in a data set, then I want to loop through those and create a stylized div for each employee record and display it on my page. Any thoughts?
Using the user control isn't a bad idea, using a ListView could be a lot better/easier though.
But lets say you stick with a div and a user control for now. Firstly, you don't create usercontrols the same way you create other controls because you are part way through the page life cycle and they need to be caught up. Instead use LoadControl (see: https://stackoverflow.com/a/4786121/328968).
Second, don't pass the values into the constructor. Create a function in your usercontrol called LoadData and pass the values to that. After creating your usercontrol using LoadControl you call LoadData and pass in the values. LoadData takes care of loading the data into the various controls which, unlike your example, should probably already exist in your usercontrol.
Try the InnerText to see if it works.