I'm working with code someone else has written that I cannot change too much for now.
It has a table defined in the html, something like this:
<table id="tblResult">
some stuff defined in here.
</table>
I would like to use the behind code to make this table and all its contents invisible, but I notice I can't address the table directly as tblResult.visible in the code behind. This makes sense to me, since this is not an asp object. Simply changing this to an asp:table doesn't work, as there's some stuff going on inside that table I prefer not to mess with. Is it possible to address that table and set visibility to false from the behindcode?
Wrap it into a <asp:PlaceHolder> amd then toggle the placeholder visibility.
Add runat='server' to the tag. The other thing you can do is wrap it around a server side tag of div, panel, etc and set them to visible='false' Something to this effect:
<div id='myDiv' runat='server'>
<table id="tblResult">
//stuff
</table>
</div>
Then in your code-behind:
this.myDiv.Visible=False;
This will now ensure your table is not visible. Again you can use div's, panels (which are just divs really), literals, placeholders, etc.
You can wrap it in a Literal:
<asp:Literal runat="server" ID="Literal1" Visible="False">
<table> ... </table>
</asp:Literal>
Related
I'm trying to change the CSS class and attributes of a set of asp.net controls via the code behind using this:
ASP.NET:
<span id="followbtn_mainbtn" runat="server" class="follow-btner" onclick="profile_followers_follow(this)">
<img id="img_followingbtn" runat="server" class="profile-single-profile-follow-btn-img" src="icons/profico/following.png" style="display: none;">
<img id="img_unfollowbtn" runat="server" class="profile-single-profile-unfollow-btn-img" src="icons/profico/unfollow.png" style="display: none;">
<img id="img_followicon" runat="server" class="profile-single-profile-follow-icon" src="icons/profico/followIcon.png">
<span id="span_following_text" runat="server" class="profile-single-profile-follow-btn-following">Follow</span>
<span id="span_unfollow_text" runat="server" class="profile-single-profile-follow-btn-unfollow" style="display: none;">Unfollow</span>
</span>
Code:
followbtn_mainbtn.Attributes.CssStyle.Add("className", "follow-btner-no-hoverer");
span_unfollow_text.InnerText = "Following";
img_followingbtn.Attributes.CssStyle.Add("display", "block");
img_unfollowbtn.Attributes.CssStyle.Add("display", "block");
span_unfollow_text.Attributes.CssStyle.Add("display", "block");
However when I run this, I do not see the desired results. If I hard code the appropriate classes to the controls, they work properly but the code doesn't do it dynamically.
What am I doing wrong?
Are you updating the css during a postback? First try adding the changes to your Page_Load method on the form and that will tell you that your code is working when setting the styles and classes. If the code works then I would make sure you have EnableViewState="false" on your page and/or parent control of the span.
It was actually a simple error. I've used the wrong code to change the css class of the span named "followbtn_mainbtn".
I replaced this
followbtn_mainbtn.Attributes.CssStyle.Add("className", "follow-btner-no-hoverer");
with this
followbtn_mainbtn.Attributes["class"] = "follow-btner-no-hoverer";
Voila! Done deal. Thanks for all your answers and comments though :)
You can use this code to change css in code behind
img_followingbtn.Style.Add("display", "block");
I have the same behavior from many similar questions here.
But I tried anything and nothing happens to me.
I have 2 html controls. One anchor tag and a input button.
I applied vertical-align:top; float:right; display:inline-block; independently and together and nothing happens.
When I click on Close, I see a shadow like a button! I want them inline both controls
At the end of table I incluided a Div like this.
<div style="float:right;">
<asp:Button ID="btnInput" runat="server" Text="Add selected"></asp:Button>Close
</div>
You need to set a width for each element when you make them display:inline-block, otherwise they default to 100%.
Here is a jsFiddle with the closest equivalent markup I could make. (asp buttons don't work)
As Dolchio said, every element must have display: inline-block for this to work. Note that your float:right will not achieve anything helpful in this scenario.
Try adding the CssClass attribute to the asp button and styling that class.
So it would look like <asp:Button ID="btnInput" runat="server" CssClass="myButton" Text="Add selected"></asp> and in your css myButton{display:inline-block,vertical-align: top, width: 200px substitute width for whatever the width of the button is (not entirely familiar with asp buttons and their implied widths).
The following is the record which I am getting from the database:
"Dear:Thank you for applying to school. We have received your application to the program.As of today,we have received the following for your application:"
I am trying to put the above value into a label. My label looks like the following:
<div id="secondd" style="float:left;width:50%;background-color:#C0D5F2;">
<asp:Label id="valueIntroduction" Cssclass="labelarea" runat="server"> </asp:Label>
<div class="line"></div>
My problem is value is not getting fitted into the label. How to make it as a multi line label?
Here is the HTML that contains this div:
<div id="first" style="float:left;width:50%;background-color:#C0D5F2">
<div id="second" style="float:left;width:50%;background-color:#C0D5F2">
<div id="Introduction" style="float:left;width:100%" class="wote">
Introduction:
</div>
<div class="line"></div>
</div>
<div id="secondd" style="float:left;width:50%;background-color:#C0D5F2;">
<asp:Literal id="valueIntroduction" runat="server"> </asp:Literal>
<div class="line"></div>
</div>
If you want the text to wrap based on the in-line style of your outer <div>, you can change the <asp:label> to an <asp:literal> and use CSS to style the outer <div>.
The difference is that a Literal does not render any HTML markup, whereas a Label will be wrapped in a element. The Literal just inserts the exact text you have, letting your existing HTML and CSS do the styling.
An example of a different style would be:
Less percentage, note 20% instead of 50% for the width attribute:
<div id="secondd" style="float:left;width:20%;background-color:#C0D5F2;">
Or, use a dedicated value of pixels (denoted by the px)
<div id="secondd" style="float:left;width:150px;background-color:#C0D5F2;">
You can even indent the text, using text-indent. I suggest to google some basic CSS and just try different things out, it is the best way to learn.
You just have to play with it to see how it fits in your webpage. Once you get the hang of it, note for future reference that you can use style sheets for this stuff which will make your code cleaner and allow you to create reusable, easily editable styles for your application.
I'm trying to select an element from my webpage...
I have inserted a control into my page and i need to set some values an element inside the control at pageload from c# code.. The thing is, as soon as I insert the control into the page... A prefix is appended to the id name... Because of that new name, my css definition won't be appended...
Is there any way to access this element from C# without the need to make it an Id?
Edit: To clarify what Im trying to do here. Im trying to make a generic control, which gets a width and height set to it's parameters. I need to set this manually to the element by adding a style attribute. I can't make the element an id, because this will stop the possibility of making it generic.
This is whats inside of the control... the fact is, I need the imageRotatorDiv to be a class instead of an id. Otherwise i can't use multiple image rotators on one page.
But how can I select a class in a page from c# code? Is it possible?
<div id="imageRotatorDiv" runat="server">
<div class="imageRotator">
<asp:Repeater ID="rprImages" runat="server">
<ItemTemplate>
<asp:Image ID="imgItem" runat="server" />
</ItemTemplate>
</asp:Repeater>
</div>
</div>
you can define your style to a class name instead of id.
<asp:TextBox ID="MyText" CssClass="someclass" runat="server" />
html output
<input type="text" id="Something_MyText" class="someclass" />
css
.someclass { border:solid 1px red; }
In JQuery :
$("div[id$=MyDiv]").addClass("myDiv")
And you just need to define the myDiv CSS class. Or, to modify directly the style :
$("div[id$=MyDiv]").css("font-size", "14px");
JQuery details
I'm trying to grab a div's ID in the code behind (C#) and set some css on it. Can I grab it from the DOM or do I have to use some kind of control?
<div id="formSpinner">
<img src="images/spinner.gif" />
<p>Saving...</p>
</div>
Add the runat="server" attribute to it so you have:
<div id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</div>
That way you can access the class attribute by using:
formSpinner.Attributes["class"] = "classOfYourChoice";
It's also worth mentioning that the asp:Panel control is virtually synonymous (at least as far as rendered markup is concerned) with div, so you could also do:
<asp:Panel id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</asp:Panel>
Which then enables you to write:
formSpinner.CssClass = "classOfYourChoice";
This gives you more defined access to the property and there are others that may, or may not, be of use to you.
Make sure that your div is set to runat="server", then simply reference it in the code-behind and set the "class" attribute.
<div runat="server" id="formSpinner">
...content...
</div>
Code-behind
formSpinner.Attributes["class"] = "class-name";
This question makes me nervous. It indicates that maybe you don't understand how using server-side code will impact you're page's DOM state.
Whenever you run server-side code the entire page is rebuilt from scratch. This has several implications:
A form is submitted from the client to the web server. This is about the slowest action that a web browser can take, especially in ASP.Net where the form might be padded with extra fields (ie: ViewState). Doing it too often for trivial activities will make your app appear to be sluggish, even if everything else is nice and snappy.
It adds load to your server, in terms of bandwidth (up and down stream) and CPU/memory. Everything involved in rebuilding your page will have to happen again. If there are dynamic controls on the page, don't forget to create them.
Anything you've done to the DOM since the last request is lost, unless you remember to do it again for this request. Your page's DOM is reset.
If you can get away with it, you might want to push this down to javascript and avoid the postback. Perhaps use an XmlHttpRequest() call to trigger any server-side action you need.
Add the runat="server" attribute to the tag, then you can reference it from the codebehind.
Add runat to the element in the markup
<div id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</div
Then you can get to the control's class attributes by using
formSpinner.Attributes("class")
It will only be a string, but you should be able to edit it.
How do you do this without runat="server"? For example, if you have a
<body runat="server" id="body1">
...and try to update it from within an Updatepanel it will never get updated.
However, if you keep it as an ordinary non-server HTML control you can. Here's the Jquery to update it:
$("#body1").addClass('modalBackground');
How do you do this in codebehind though?
If you do not want to make your control runat server in case you need the ID or simply don't want to add it to the viewstate,
<div id="formSpinner" class="<%= _css %>">
</div>
in the back-end:
protected string _css = "modalBackground";
If all you want to do is conditionally show or hide a <div>, then you could declare it as an <asp:panel > (renders to html as a div tag) and set it's .Visible property.
To expand on Peri's post & why we may not want to use viewstate the following code:
style="<%= _myCSS %>"
Protected _myCSS As String = "display: none"
Is the approach to look at if you're using AJAX, it allows for manipulating the display via asp.net back end code rather than jquery/jscript.