how do i user css for usercontrol label? - asp.net

I want to change color of label which is in usercontrol.
as it in in usercontrol i'm failed to do this using css.
I did like following :
inside myusercontrol.ascx
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<asp:Label ID="Label2" runat="server" Text="user control"></asp:Label>
StyleSheet1.css
#Label2
{
color:red;
}
webform.aspx
<div>
<asp:Label ID="Label1" runat="server" Text="home" ></asp:Label>
<uc:myuc runat="server" ID="uc1" />
</div>
As in normal aspx page it is working fine but not on usercontrol please suggest

Never style against asp.net id:s since they might change in the markup. If you view source the label (rendered as a span) propably won´t have id="Label2" when it´s inside the usercontrol. Rather style it using a class or set clientidmode static if that suits your solution.

Try
uc1.Style["Color"] = "Red";

Related

styling asp controls by using stylesheet

i want to ask how i can apply style on asp tags by using stylesheet???
For example i want to style a asp button control like following
<asp:Button ID="btnhme" runat="server" Text="Home" Width="145px"
BackColor="#3399FF" />
i know i can style it by using its properties but i want that if i have 10 buttons in my page then same style is apply to all buttons automatically and i have to do it for my all pages buttons and labels controls and i cannot set properties for all separately
is there is a solution by using stylesheet and if not by using stylesheet then what should i do that the style apply to all button controls and textbox,labels controls also
<asp:Label ID="lbllogin" runat="server" Text="LogIn Here"></asp:Label>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
please guide me how i can solve this issue
Thanx :)
Add the CssClass property to the Button control, for example, and add a corresponding class to the CSS file.
aspx
<asp:Button ID="btnhme" runat="server" Text="Home" Width="145px" BackColor="#3399FF" CssClass="my-buttons" />
CSS
.my-buttons { background-color:#3399FF; }
well you could set default css for each element, this would automatically cause every control of this type to take on this css:
input[type=text] {
//styling
color:blue;
}
label {
//styling
color:blue;
}
or you could come up with your own css class and just attach it to the elements you want:
.myTextClass
{
//styling
color:blue;
}
.myLabelClass
{
//styling
color:blue;
}
then attach the class using the CssClass property:
<asp:Label ID="lbllogin" runat="server" Text="LogIn Here" CssClass="myLabelClass"></asp:Label>
<asp:TextBox ID="txtuser" runat="server" CssClass="myTextClass"></asp:TextBox>
You can register default skin for server controls with desired properties responsible for styling.
Look at this article: How to: Apply ASP.NET Themes
If the page theme does not include a control skin that matches the SkinID property, the control uses the default skin for that control type.

Databinding to a View Model not working

I have an AJAX Accordion Control sitting on my Web Form. I have a Asp.Net Label sitting inside an Accordion Pane. I want to databind the text property of the label to a View Model I have running.
The Label Text Property never seems to databind with the View Model? It will work perfectly if I pull the label outside of the Accordion Pane, but not inside?
This works:
<asp:Label runat="server" Text='<%# Model.Program.NameVisible.ToString() %>' />
This does not:
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header>
Advanced Search
</Header>
<Content>
<asp:Panel ID="pnlAdvancedSearch" runat="server">
<table cellpadding="2" cellspacing="0" width="100%" runat="server">
<tr>
<td align="right">
<asp:Label runat="server" Text='<%# Model.Program.NameVisible.ToString() %>' />
</td>
</tr>
</table>
</asp:Panel>
</Content>
</asp:AccordionPane>
Any ideas or workarounds?
Thanks.
Update: This apparently does not work when nested inside any AJAX Controls. I have had the same issue with the binding not taking place inside a ModalPopUpExtender as well.
The DataBind of the Accordion control does not invoke DataBind for each of the explicitly defined, custom AccordionPane controls. It instead will build the panes, as per the answer provided by Jupaol, using templates.
In your example, you will need to explicitly call DataBind on the control you want bound, or on a parent which will invoke databinding on all children. So, in your example, calling pnlAdvancedSearch.DataBind() would suffice to bind your label, and any other controls within the search panel.
I feel it worthwhile to add, however, that it also seems like it would be simpler to replace your <asp:Label> control entirely with a simple:
<%: Model.Program.NameVisible.ToString() %>
I just found a way
First of all the Accordion control does support data binding:
The Accordion can also be databound. Simply specify a data source through the DataSource or DataSourceID properties and then set your data items in the HeaderTemplate and ContentTemplate properties.
Source
Example:
Output
ASPX
<ajax:Accordion runat="server" ID="ajax22" RequireOpenedPane="true"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
>
<ContentTemplate>
Even cooler content
<br />
<asp:Label Text='<%# DataBinder.Eval(Container.DataItem, "Something") %>' ID="lbl" runat="server" />
</ContentTemplate>
<HeaderTemplate>
Cool header
<br />
<asp:Label Text='<%# DataBinder.Eval(Container.DataItem, "Something") %>' ID="lbl" runat="server" />
</HeaderTemplate>
</ajax:Accordion>
ASPX code behind
You need to specify the Accordion.DataSource property, this property only supports IEnumerable or IListSource, therefore you would need to bind your accordion as follows:
this.ajax22.DataSource = new[] { this.Model };
this.DataBind();
Model
public class MyModel
{
public MyModel()
{
this.Something = "plop!";
}
public string Something { get; set; }
}
When you bind your Accordion, a number of AccordionPanes are created to represent each bound item.
If you specify additional custom AccordionPanes, when you apply binding as specified above, these AccordionPanes will be ignored and won't be rendered.

Asp.Net radiobutton inside repeater does not work CssClass and GroupName

I have created repeater with radiobutton inside and binding data from db, all works good instead css and groupName.. when render - it doesn't works, user can check all radiobuttons instead one...
This is my code below, please help...
<asp:Repeater ID="rptList" runat="server">
<ItemTemplate>
<ul><li>
<asp:RadioButton ID="RadioButton8"
runat="server"
CssClass="w1"
GroupName="Options"
Text='<%# DataBinder.Eval(Container.DataItem, "EvName")%>'
ValidationGroup="Options" />
</li></ul>
</ItemTemplate>
</asp:Repeater>
I had the same problem.
I couldn't find a way that doesn't use jquery.
I was able to use this tutorial to solve my problem.
http://blog.marketnet.com/index.php/2010/03/01/overcoming-the-radio-button-repeater-bug/
Copied from the tutorial:
In the markup file, add this bit of Javascript and jQuery:
<script type="text/javascript" language="javascript">
function SetUniqueRadioButton(strGroupName, current)
{
$("input[name$='" + strGroupName + "']").attr('checked', false);
current.checked = true;
}
</script>
Set up the Repeater control using a RadioButton control:
<asp:Repeater ID="rptMyRepeater" runat="server">
<ItemTemplate>
<asp:RadioButton ID="rdoButton" GroupName="GroupName" runat="server"/>
</ItemTemplate>
</asp:Repeater>
Finally, in the code behind file:
rdoButton.Attributes.Add("onclick", "SetUniqueRadioButton('MyGroupName',this)");

Hiding Panels and Divs on ASP.NET is making me crazy

Searching on google, i deffinitly can't find a non-javascript way to show and hide my panel/updatepanel.
I do have panels and updatepanels, I want to show/hide them on the fly, after a button click, preferably without javascript, or if so, with jQuery.
All the examples I found consumes a lot of code and honestly I don't want to crap out my code just because of this.
Ideas?
It doesn't really take a lot of code with jQuery:
<input type="button" onclick="$('#blah').toggle();" />
<someelement id="blah"></someelement>
For ASP.NET (modified from your code):
<asp:Button ID="btnSubmit" runat="server" CssClass="button-login" OnClientClick="$('#login').toggle();" />
You could as well use the multi view and a couple of views inside. By doing this you can use a button control to choose which view (panel) is to be displayed. The code below will toggle between two views containing two image tags.
ASP.NET Form (HTML)
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<imgage = "my picture"> //add image tage here
</view>
<asp:View ID="View2" runat="server">
<imgage = "your picture"> //add image tage here
</view>
</asp: Multiview>
</div>
CODE BEHIND
Private button click toggleImageView
If multiview1.ActiveViewIndex=0 then
multiview1.ActiveViewIndex=1
ElseIf
multiview1.ActiveViewIndex=1 then
multiview1.ActiveViewIndex=0
EndIf
You may also use a list box to select which view to display on the fly like this
But note that your control o select which view to be displayed should be outside the multiview control and also be rendered on page load
<asp:DropDownList ID="DropDownList1" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
runat="server" AutoPostBack="True">
<asp:ListItem Value="0">View 1</asp:ListItem>
<asp:ListItem Value="1">View 2</asp:ListItem>
</asp:DropDownList><br />

ajax collaps panel not working in my application?

i am going to implement the collapsiblepane in my application but it is not getting any thing just two link buttons
this is my code
CollapsiblePanelExtender ID="CollapsiblePanelExtender1"
AutoCollapse ="False" AutoExpand ="false" ScrollContents ="true" TargetControlID ="mypanel"
Collapsed ="true" CollapsedSize ="0" ExpandedSize ="300"
ExpandControlID ="mylink" CollapseControlID ="mylink2"
CollapsedText ="Show Details..." ExpandedText ="Hide Details..." runat="server">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID ="mypanel" runat ="Server" Visible ="False" >
<asp:TextBox ID="txt" runat ="server" ></asp:TextBox><br />
<asp:Button ID="btn" runat ="Server" Text ="Click" />
</asp:Panel>
<asp:LinkButton ID="mylink" runat ="Server" Text ="Mydetaails" OnClick="mylink_Click" ></asp:LinkButton>
<asp:LinkButton ID="mylink2" runat ="Server" Text ="HideMydetails" OnClick="mylink2_Click" ></asp:LinkButton>
I'm not sure but can see at least 2 problems:
You server tag of CollapsiblePanelExtender must be closed, so you have:
runat="server">
but it must be:
runat="server"/>
Did you recreate CSS classes? CollapsiblePanelExtender works by manipulating styles, so these styles must be present. Also look at note from ( http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CollapsiblePanel/CollapsiblePanel.aspx ) "Note: CollapsiblePanel assumes that the standard CSS box model is being used ... so please use the !DOCTYPE declaration (as found at the top of this page and enabled by default for new ASP.NET pages) to specify that the page should be rendered in IE's standards-compliant mode."

Resources