5

I have an element, like this:

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

I want to make this element runat=server but still be able to specify a css id selector. Is this possible?

7 Answers 7

5

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.

4

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.

2

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.

1
  • FYI: this is much much slower. I'd only really recommend this if you're in a file that can't use the server tags for pre-rendering the ClientID. Proof: jsperf.com/id-selector-endswith Apr 24, 2018 at 15:54
1

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" />
0

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>
1
  • 2
    asp.net 4.0 will allow us to directly specify the ClientID without mangling, or to control the mangling so the ids become useful - if tesseract can just wait 6 months or so, his problem will be solved...
    – Ray
    Oct 28, 2009 at 20:26
-2

I think this but I'm not sure

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

or

 <div runat=server class="navleft">
 </div>
1
  • 1
    That's the class attribute, not the ID attribute. Oct 28, 2009 at 19:48
-3

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

1
  • 1
    Your answer doesn't have anything to do with the question. @Tesseract didn't ask how to turn an element into a server side control.
    – StinkyCat
    Aug 12, 2014 at 12:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.