How do i apply a CSS id when the control is runat=server?

I have an element, like this:

<div id="navleft">
</div>

I want to make this element runat=server but 开发者_C百科still be able to specify a css id selector. Is this possible?

soon as you apply the runat="server to the tag in asp.net it receives a new mangled id" ct100****navleft" , So you could still select the tag by id but you would have to go into the source code after rendered to get the actual id name, so it would be much easier to select the tag by its class name.

If you're using .net version 4 or above you can set the ClientIDMode.

If you set it to ClientIDMode.Static then it will use your styles. There are a few other options that you can read about by following the link above.

For your example you would use:

<div id="navleft" runat="server" ClientIDMode="Static">
</div>

Just be careful if you are going to do this in a control that might be used multiple times on the same page.

You can use control.ClientID

<label for='<%= TextId1.ClientID %>'>Title:</label>
<asp:Textbox ID="TextId1" runat="server" text="Some text here" />

Or within the context of a form use FindControl().ClientID

<label for='<%= FormView1.FindControl("TextId1") %>'>Title:</label>
<asp:Textbox ID="TextId1" runat="server" text="Some text here" />

I know this is old, but my answer might help better than the others (as long as its CSS3 we're talking about!)

As @TStamper correctly said, as soon as you add runat="server" to an element, the resulting ID will be a succession of IDs created by the server seperated by _, but always ending in the ID you gave.

Thus, if using CSS3, how about [attribute$=value] ? According to w3schools:

The [attribute$=value] selector matches every element whose attribute value ends with a specified value.

So in your case it could be div[id$="navleft"].

Since you have already accepted an answer, I hope it helps others with the same problem.

I banged my head on this for some time. Eventually I gave up and made my own webform control that allowed me to set the ID as I wanted. Here's a copy/paste of my code:

public abstract class BetterHTMLControl : WebControl {
    private readonly HtmlTextWriterTag _tag;
    public BetterHTMLControl(HtmlTextWriterTag tag) {
        _tag = tag;
    }

    /**
     * ASP.NET code uses the ID as the control reference variable name. It then changes
     * the name to a generated (and ugly) field when rendering the control.
     */
    public override String ID {
        get {
            /*
             * In the end, there can be only one "id" attribute for the element. 
             * ID is set by ASP.NET and may possibly be set in the code afterwards. 
             * HtmlID is typically set in the ASP.NET code, and may be set before or 
             * after ID is set.
             * 
             * If HtmlID is explicitly set, then we want its value to be used for the 
             * rendered "id" attribute and all other callers of "ID". Thus, check HtmlID 
             * for null; if it's not null, return it instead.
             */
            String statedID;
            if (_htmlID == null) {
                statedID = base.ID;
            }
            else {
                statedID = HtmlID;
            }
            return statedID;
        }
        set {
            base.ID = value;
        }
    }

    /**
     * Helper property for within ASP.NET code (where ID is reserved for the reference 
     * name). If HtmlID is set, it takes precedence over the regular ID. The ID 
     * property is then used as the "id" attribute for the rendered element.
     */
    private String _htmlID;
    public String HtmlID {
        get {
            return _htmlID;
        }
        set {
            _htmlID = value;
        }
    }

    private bool _suppressID;
    public Boolean SuppressID {
        get {
            return _suppressID;
        }
        set {
            _suppressID = value;
        }
    }

    private String _innerText;
    public String InnerText {
        get {
            return _innerText;
        }
        set {
            _innerText = value;
        }
    }

    protected override void Render(HtmlTextWriter writer) {
        if (Visible) {
            if (!String.IsNullOrEmpty(ID) && !SuppressID) {
                Attributes["id"] = ID;
            }
            foreach (String attributeName in Attributes.Keys) {
                String value = Attributes[attributeName];
                writer.AddAttribute(attributeName, value);
            }
            if (!String.IsNullOrEmpty(CssClass)) {
                writer.AddAttribute("class", CssClass);
            }
            writer.RenderBeginTag(_tag);
            if (InnerText != null) {
                writer.WriteEncodedText(InnerText);
            }
            else {
                RenderContents(writer);
            }
            writer.RenderEndTag();
        }
    }
}

I then subclassed this for each tag. It's not the most elegant solution (it's yet another library of HTML-generating classes) but it does give me the control I want.

When I want to use a tag, I'll write the following:

<%@ Register TagPrefix="myhtml" Assembly="MyAssembly" Namespace="MyNamespace.MyHTML" %>
<myhtml:Div runat="server" ID="_variableName" HtmlID="html_id_value" />

This would result in:

<div id="html_id_value"></div>

I think this but I'm not sure

 <div runat=server cssclass="navleft">
 </div>

or

 <div runat=server class="navleft">
 </div>

You should be able to just add the the runat like this:

<div id='navLeft' runat='server'></div>

However, depending on what you are doing, you might want to look at the ASP Panel Control

http://www.w3schools.com/ASPNET/control_panel.asp