I have a problem with creating dynamic <li> elements from codebehind. I need to assign runat server to li, but I didnt find a way to assign runat server, so I can't find that li control when I need to change the attributes from code behind. Is there any answer to my problem? I am new to asp.net c#.
Here is my code:
<ul class="nav nav-tabs" runat="server" id="tabList">
//First i got ul control that i assign runat=server in aspx page
</ul>
//then i create li from code behind in Page_Init()
System.Web.UI.HtmlControls.HtmlGenericControl tab = new System.Web.UI.HtmlControls.HtmlGenericControl("li");
tab.ID = "tab" + (i + 1);
tab.Attributes.Add("runat", "server");//this is not working
tab.Controls.Add(new LiteralControl("Penumpang " + (i + 1) + ""));
//then i add the li to my ul controler called tablist
this.tabList.Controls.Add(tab);
My problem is, when the page loads, I can see the li on the page, but I cannot call li from the code behind when i need to do something with it. Is there any way to call the li in code behind? Or change the li attributes when it is assigned dynamically? Sorry for bad English.
Thanks in advance.
The reason why you cannot access the <li> in your code-behind is because it is dynamically generated.
Dynamically generated controls lose their state when they are rendered on the view and for you to access them again in your code-behind when a postback occurs, you need to recreate them before playing with them. So basically, you need to recreate them everytime on your postback to access their properties and values and to manipulate with them.
Also, runat='server' wont work from code-behind. Instead of using <li>, you could also try using some ASP.NET controls such as Listview or other data-binding controls.
Hope this helps.
Related
I'm facing a problem where I'm not able to view the data select from the database into my Drop Down in Bootstrap. See screenshots for detailed information about the problem I'm facing. I used to do that easily with ASP controls by I'm facing a difficulty doing that in bootstrap. Also, I would appreciate if there's a way to dynamically add elements to the drop-down list, I mean programmatic
enter image description hereenter image description here[enter image description here][3]
use runat server tag and populate from datatble from codebehind like this
in aspx file
<ul class="dropdown-menu">
<li runat="server" id="ddl"></li>
</ul>
and in codeBehind File
for(int i=0;i<dt.Rows.Count;i++)
{
ddl.InnerHtml += "" +dt.Rows[i]["Name"] + "";
}
I programatically create li elements, however I need some of them disabled, so far I have:
HtmlGenericControl htmlLi = new HtmlGenericControl("li");
htmlLi.InnerText = row["name"].ToString();
tab_content.FindControl("tab_content_" + row["stars"].ToString()).Controls.Add(htmlLi);
Is it possible to disable them? If not, is their any alternatives?
An <li> element can't be disabled, as there's no input to prevent.
You can however hide the elements you don't want to be displayed.
You can either hide them from the code-behind:
htmlLi.Visible = false;
or you can add some styling to it so that it is put into the DOM, but made invisible by the CSS (so that you can make it visible again with javascript, should you want to):
htmlLi.Attributes.Add("style", "display: none");
or
htmlLi.Attributes.Add("class", "SomeInvisibleCssClass");
I have an <li> on my page. It has runat="server". I can now reference this li directly in code-behind. However, as I do with other controls on the page, I need to find it based on a string value that should match it's ID.
As part of a loop I have:
var li = Page.FindControl("li" + i);
Ultimately wanting to change the class of the li. But I don't seem to have access to any attributes just as I would if I had referenced the li directly. What have I done wrong here? Is there another method for amending an li's attributes from code-behind?
As you are using generic html elements on the server-side, you will get an instance of HtmlGenericControl when accessing the <li> on the server. The HtmlGenericControl class does not support the Class or CssClass properties as do most .NET web controls. Still you can change the class via the Attributes collection:
var li = (HtmlGenericControl) Page.FindControl("li" + i);
li.Attributes["class"] = "myCssClass";
The Page.FindControl("li" + i) method requires a valid control ID. Therefore, you need to also add an id for the <li> elements:
<li runat="server" id="li1">...</li>
If you are creating a dynamic list inside a repeater or list view control, however, this may not work for you, as the id's will get prefixed by the parent control. You should hook to the appropriate item created event for the repeater/list view control in order to programatically access the <li>.
Cast your control in HtmlGenericControl to add attributes
HtmlGenericControl li = (HtmlGenericControl)Page.FindControl("li" + i);
li.Attributes["onclick"] = "return null;";
I am making a table for schedule and putting div's on the table. People can make new appointments by clicking on one of the div .
I am changing the activeview when a div is clicked. I need to embed information in the div's so I can use it in the database and I want to know which div is clicked.
How can I solve this? Here is my code:
HtmlGenericControl div = new HtmlGenericControl("DIV");
div.Style.Add(HtmlTextWriterStyle.Width, "60px");
div.Style.Add(HtmlTextWriterStyle.MarginTop, "1px");
div.Style.Add(HtmlTextWriterStyle.BackgroundColor, "green");
div.Style.Add(HtmlTextWriterStyle.Height, last * 40 + "px");
div.Attributes.Add("onclick", "somefunction()");
div.Style.Add("cursor", "pointer");
bul.Controls.Add(div);
bul is a table cell where I put a DIV.
Don't forget to set an ID in your div server control
see this url which explains you how reference your server control in javascript:
http://encosia.com/2007/08/08/robust-aspnet-control-referencing-in-javascript/
Excerpt from article:
$get('<%= yourdiv.ClientID %>')
<script>
alert('yourdiv has a value of: ' + $get('<%= yourdiv.ClientID %>').value);
</script>
IMHO, you need to rethink about your approach.
I think you will need to seperate the solution into 3 different parts:
1- Server-side code: which will get the information about current appointments, and to save the new appointment that your audience may create.
2- Markup code: which should contain the basic building blocks for your markup, and not to generate everything from your server-side code, as #Senfo has suggested.
3- You should use some client-side code (Javascript) in order to switch between the normal-view mode, and the create-view mode.
4- if you don't want to use client-side code, you should decorate your div with 2 attributes in order to be able to deal with them in your C# code:
ID (which should be unique per every div)
Runat="Server" attribute
I know that my solution is not complete, but considering that this is a homework question, I think it's better to guide you to the correct path, but to let you move on according to these principles.
I think you can make it, and you should now create a much cleaner solution.
if you still can't figure it out, I will try to give you an example, but my advice is to take a deep breath, and start by your own :)
> .answer {
width:20px;
height:20px;
border-color:Red;
border:1px;
background-color:Green;
HtmlGenericControl div = new HtmlGenericControl("DIV");
div.ID = "testDiv";
div.Attributes.Add("class", "answer");
div.Attributes.Add("onclick", "somefunction(this)");
this.Controls.Add(div); // this code shlould be on pageload
<script language="javascript">
function somefunction(obj)
{
alert(obj.id);
}
I have the following problem.
I have a div (id = "outline") on my page.
Now I would like it to be set visible="false when clicked on a button.
The catch is it is way outside the container-div.
I've thought about using a Panel and then the Panel.FindControl
but then what happens with the </div>?
Server Side
You dont mention if you want to do this on the server side or via jquery / javascript (client side).
If on the server side set your div to runat="server" and in the code behind set the visibility to false.
So your HTML becomes <div id="outline" runat="server"> and your button click event has a single line:
outline.Visible=false;
Client Side
If you want to do this via jquery (which you should) just give the div an id and use a selector:
http://api.jquery.com/hide/
$('.target').hide();
Or via javascript if you aren't using jquery:
document.getElementById('outline').style.visibility = 'hidden';
Add a onclick to the button with a javascript like this:
document.getElementById('outline').style.visibility = "hidden"
You can also use "display: none" instead:
document.getElementById('outline').style.display = "none"
you havent mentioned that do you want to show the container div while disabling the "outline" div?? If so separate them and then try it..is the simple answer.... if you can not separate - group the part you want to hide in to separate div ( which does not incldued "container" div ) and then hide that part only.