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?
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 have a code that generates a div tag for each image in a folder, and then i want to click the div it created but it dosn't work...
This is my code:
string[] images = Directory.GetFiles(Server.MapPath(#"~/images/avatars"));
for (int i = 0; i < images.Length; i++)
{
string name = Path.GetFileName(images[i]);
WebControl div = new WebControl(HtmlTextWriterTag.Div);
div.Attributes.Add("runat", "server");
div.Attributes.Add("class", "preview-item");
div.Attributes.Add("onclick", "SelectAvatar_Click");
WebControl img = new WebControl(HtmlTextWriterTag.Img);
img.Attributes.Add("class", "item-image");
img.Attributes.Add("src", #"images\avatars\" + name);
div.Controls.Add(img);
avatars.Controls.Add(div);
}
avatars is the div that I insert all the dynamiclly generated divs into.
But when i click one of thoes divs nothing happens, although i specified the on click function.
protected void SelectAvatar_Click(object sender, EventArgs e)
{
}
the avatars div looks like this:
<div id="avatars" runat="server"></div>
Maybe im doing it all wrong, or maybe i just don't fully understand how to do it.
So if anybody knows how to do it, it would be great :)
So basicly im adding elements to my html, via litterals from the backend.
It works great when using it in the asp content placeholders. But i need it to be another specific place on a specific page. Ive tryed making div's with runat="server" But it does not seem to work.. Does anyone have any experience with what i could use? This is part of my code:
foreach (var something in somethingelse)
{
this.Page.Form.FindControl("ContentPlaceholder1")
.Controls.Add(
new LiteralControl("It's a long list, so just typing this.")
);
}
You can use runat="server" on divs. For example:
<div id="myNewDiv" runat="server"></div>
and in the code behind:
myNewDiv.InnerHtml = "Some new text in the div";
If you need to create the divs dynamically you can do the following:
for (var i = 0; i < 10; i++)
{
var ele = new HtmlGenericControl("div")
{
InnerHtml = string.Format("new div {0}", i),
ID = string.Format("NewDiv_{0}", i)
};
Page.Form.FindControl("MainContent").Controls.Add(ele);
}
You can even push the new divs into an existing div which is anywhere in the ContentPlaceHolder:
var page = Page.Form.FindControl("MainContent").FindControl("myNewDiv").Controls;
for (var i = 0; i < 10; i++)
{
var ele = new HtmlGenericControl("div")
{
InnerHtml = string.Format("new div {0}", i),
ID = string.Format("NewDiv_{0}", i)
};
page.Add(ele);
}
Place a HTML tag in source as below
<table>
<tbody>
<-- Your literal control here -->
</tbody>
</table>
and in code behind set literal1.Text ="<tr><td>'"+ Your data here +"'</td></tr>" and it will work
// this function create mutiple htmlcontrol with id fileid1,fileid2, fileid3 etc "content_data" is a html div id.
protected void enter_rec_btn_Click(object sender, EventArgs e)
{
String control_data="";
for (Int64 x = 1; x <= 4; x++)
{
control_data = control_data + "<input type='text' id='fileid" + x + "' runat='server' /> ";
}
content_data.InnerHtml = control_data;
}
//now in another btn click just access the controls
for(Int64 i=1;i<=4;i++)
{
HtmlInputText text1,
text1 = (System.Web.UI.HtmlControls.HtmlInputText)Page.FindControl("fileid" + i);
Response.write(text1.value);
}
but it can't find the control.i already include using System.Web.UI.HtmlControls.
Help me..
thanks in advance
You are rendering a string in the Div and not actually adding the control to the web-page so find control will not work you may have to read the html of the Div you are writing to to get the controls.
Alternatively add an actual control to the page to be able to use findcontrol.
i.e MyPannel.controls.add(new ctrl.....
Good Example found here :)
http://learning2code.net/Learn/2009/8/12/Adding-Controls-to-an-ASPNET-form-Dynamically.aspx
I am trying to add Checkboxes dynamically to webpage
string[] words = masg.Split('~');
int size = words.Length;
CheckBox[] cbl = new CheckBox[size];
for (int i = 0; i < words.Length; i++)
{
cbl[i] = new CheckBox();
cbl[i].Text = words[i].ToString();
this.Controls.Add(cbl[i]);
// Response.Write("\n" + words[i]);
}
I am getting error
Control 'ctl01' of type 'CheckBox' must be placed inside a form tag with runat=server.
How should I proceed ? What changes to make on aspx page ? Please help.
You should change it to add in form, because this is referencing your Page. and any server control which you are creating programmatic or by adding on page with runat="server" should place inside a form tag.
like
this.Form.Controls.Add(cbl[i]);
or place a placeholder or panel on the form. and than you can add in it
like
placeholder1.Controls.Add(cbl[i]);
If your .aspx does not contain a form tag, then you should place a form tag there
like
<form runat="server" id="form1">
//Other mark up or server controls.
</form>
hi you need to add a parent control like Panel on your form and then add your check box controls to that panel
string[] words = masg.Split('~');
int size = words.Length;
CheckBox[] cbl = new CheckBox[size];
for (int i = 0; i < words.Length; i++)
{
cbl[i] = new CheckBox();
cbl[i].Text = words[i].ToString();
pnlControls.Controls.Add(cbl[i]);
// Response.Write("\n" + words[i]);
}
Add the a panle control in your aspx page :
<asp:Panel ID="pnlControls" runat="server" >