C# – Changing user control css class in code behind

asp.netcuser-controls

So I have a user control that displays links and I want to change the color of the link that is currently active.
This is the code inside my ListView of my usercontrol ascx file.

<asp:ListView ID="sidebarListView" runat="server" DataKeyNames="Id" DataSourceID="SqlDataSourceSidebar" OnItemCommand="sidebarListView_ItemCommand">
<ItemTemplate>
  <div id="sidebarItemID" class="sidebarItem" runat="server">
     <div>
        <asp:LinkButton ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' CommandName="Select" CommandArgument='<%# Eval("Id") %>' />
     </div>
  </div>
</ItemTemplate>
....

I need to change the sidebarItemID class when the linkbutton is clicked.
My default.aspx code behind looks like this:

private void SideBar1_ItemCommand ( object sender , EventArgs e ) {
  Int32 facId = Sidebar1.FacultyId;
  SqlDataSource1.SelectCommand = "SELECT [Id], [Name], [Faculty_Id], [User_Id], [Author], [Picture], [Location] FROM [Books] WHERE [Faculty_Id]=" + facId + " ORDER BY [DateAdded] DESC";
  HtmlGenericControl htmlDivControl = (HtmlGenericControl) FindControlRecursive( Sidebar1 , "sidebarItemID" );
  htmlDivControl.Attributes.Add("class", "sidebarItemActive");
  string newClass = htmlDivControl.Attributes["class"];
  //Response.Write( String.Format( "<script>alert('{0}');</script>" , newClass ) );
}

This correctly changes the sqlDataSource based on the ID of the link clicked in the user control. However the class doesn't change.

If I uncomment the Response.Write(…) section it correctly gives an alert that says "sidebarItemActive" so it correctly finds the control from my page and assigns its class attribute as "sidebarItemActive" but nothing changes on the page if I view the page source in the browser it says the class is still "sidebarItem".
What is going on here that the change does not come into effect?

Best Answer

The actual <div>s on your page are generated during the Render state of the ASP.NET Page Life Cycle. This happens after the Control event handling stage, thus any changes you make to the HTML during your handler function are effectively undone during Render, as the control's HTML is regenerated from the template. To have the control change its internal HTML in this case, you may put your update code in an overridden Render function for your control. The MSDN has an example of how to write the render function.

Related Solutions

C# – “The Controls collection cannot be modified because the control contains code blocks”

First, start the code block with <%# instead of <%= :

<head id="head1" runat="server">
  <title>My Page</title>
  <link href="css/common.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="<%# ResolveUrl("~/javascript/leesUtils.js") %>"></script>
</head>

This changes the code block from a Response.Write code block to a databinding expression.
Since <%# ... %> databinding expressions aren't code blocks, the CLR won't complain. Then in the code for the master page, you'd add the following:

protected void Page_Load(object sender, EventArgs e)
{
  Page.Header.DataBind();    
}

Wpf – the difference between a User Control Library and a Custom Control Library

In practice custom controls are something you implement on the code level while you can use XAML for user controls. The custom controls extend one of the WPF control base classes and provide additional functionality through code so all the added logic and representation must be implemented inside the code.

A user control is technically a normal content control which you can extend in some parts in the code but usually it is extended by placing other controls inside it. So as Kent mentioned a UserControl is an aggregation of other controls. This limits what you can do with a user control considerably. It's easier to use but more limited than a full custom control.

These controls have a small difference from a runtime point of view. When building an application and placing an UserControl into it, the control tree will have a concrete UserControl template inside of it. So if we consider a lame example of a specialized button. If you were using a user control you'd add a button inside the <UserControl> element. When using a custom control you'd derive the control itself from a button most likely. The difference would be visible in the logical tree.

While the custom control would provide a logical tree similar to

Window
- CustomButton

The UserControl would give a logical tree of

Window
- CustomButtonUserControl
  - Button

So in the end the UserControl is just a normal ContentControl which you can extend a bit and for which you can predefine the content. Custom control provides greater flexibility at the price of ease of implementation as you have to do all the logic and interaction in the code instead of having the benefit of XAML.

Though after all this, I don't think there's that much difference in the Visual Studio templates. Most likely the Visual Studio Custom Control just creates a project with an empty custom control while the User Control project is a project with an empty user control. You can later add any kind of items to the project.

Update

And my opinion on when to use custom control and user control is that if you can get something done with a user control and the extra control element in the logical tree doesn't bother you, use a user control as they are so much easier to create and maintain. Use a custom control only if you have a reason not to use a user control.

Best Answer

Related Solutions

C# – “The Controls collection cannot be modified because the control contains code blocks”

Wpf – the difference between a User Control Library and a Custom Control Library

Related Topic