Develop Reference

Populating Blueimp carousel inks in codebehind

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.

Dynamically Loading DevExpress PageControl Tabs

Below is a simplified example of my view code. I would like to have DevExpress tabs such that each tab shares the content of a single div. The idea here is that I have a lot of HTML that will be displaying in these tabs and I don't want to bog down the browser with all of it at once. I would like to make it so when you select a tab the HTML in the shared div is deleted and then a new partial view is loaded through AJAX to repopulate the div and display on the screen. This way only a single tab would load on page load and when switching between tabs the HTML of the previous tab would be dropped to increase browser performance. Does anyone know how I might accomplish this? Thanks!
<%
Html.DevExpress().PageControl(settings =>
{
settings.Name = "pcGeneralTabs";
settings.Styles.Tab.Paddings.Padding = Unit.Pixel(5);
settings.Styles.ActiveTab.BackColor = Color.White;
settings.Styles.Tab.Height = Unit.Pixel(35);
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Percentage(100);
settings.ClientSideEvents.ActiveTabChanged = #"
function(s, e) {
var tab = s.GetActiveTab().name;
//Implement loading of Tab content through AJAX
}";
settings.TabPages.Add(tab =>
{
tab.Name = "tbFirst";
tab.Text = "Summary Information";
});
settings.TabPages.Add(tab =>
{
tab.Name = "tbSecond";
tab.Text = "Financial Analysis";
});
}).Render();
%>

You can do it by changing following settings and methods:
Change Name and text properties for other tabs.
settings.TabPages.Add(tabpage =>
{
tabpage.Name = "TabPage1";
tabpage.Text = "Page 1";
tabpage.SetContent(() =>
{
ViewContext.Writer.Write(String.Format("<div id='{0}' >", tabpage.Name));
Html.RenderAction(tabpage.Name);
ViewContext.Writer.Write("</div>");
});
});
and ClientSideEvent:
function OnActiveTabChanging(s, e) {
var action = e.tab.name;
var actionUrl = window.location + "/Home/" + action;
$.ajax({
type: "POST",
url: actionUrl,
success: function (response) {
$("#" + action).html(response);
}
});
}
Add Method in your controller:
public ActionResult TabPage1()
{
return PartialView("PartialView1");
}

There is no built-in functionality to drop the already loaded HTML content. However, it is possible to enable the lazy/postponed tabs loading (i.e., creating a dynamic HTML content to speed up the initial rendering) while activating them for the first time via the PageControlSettings.CallbackRouteValues settings. Check out the Tab Strip
- AJAX demo to see how to accomplish this task.

checkbox status lost after update panel works

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 to delete dynamically created DIV controls dynamically

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>

Customize printing properties in asp.net

I need to print some pictures in asp.net page and I need to print every picture in a separate page. How can I do this using ASP.net C#?
When I use window.print() it prints the whole page, but I need just the images and also every image in a separate page!

You need to define some things in your stylesheet (.css) file:
#media all
{
.page-break { display:none; }
}
#media print
{
.page-break { display:block; page-break-before:always; }
}
Then, in your HTML, whenever you'd like a page break:
<div class="page-break"></div>
You can hide/show elements in your print layout the same way (by using #media print and setting display:none on any element you don't want to print. For example, to only display images in a print layout, this might work (untested):
#media print
{
* { display:none; }
img { display:block; }
.page-break { display:block; page-break-before:always; }
}