Как применить идентификатор CSS, когда элемент управления runat = server? - PullRequest
3 голосов
/ 28 октября 2009

У меня есть элемент, подобный этому:

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

Я хочу сделать этот элемент runat = server, но все же иметь возможность указать селектор идентификатора css. Возможно ли это?

Ответы [ 7 ]

4 голосов
/ 28 октября 2009

как только вы примените runat = "server к тегу в asp.net, он получит новый искаженный идентификатор" ct100****navleft", так что вы все равно можете выбрать тег по идентификатору, но вам придется войдите в исходный код после рендеринга, чтобы получить фактическое имя идентификатора, чтобы было легче выбрать тег по имени класса.

3 голосов
/ 06 февраля 2012

Если вы используете .net версии 4 или выше, вы можете установить ClientIDMode .

Если вы установите его на ClientIDMode.Static, он будет использовать ваши стили. Есть несколько других опций, о которых вы можете прочитать, перейдя по ссылке выше.

Для вашего примера вы бы использовали:

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

Просто будьте осторожны, если вы собираетесь сделать это в элементе управления, который может использоваться несколько раз на одной странице.

1 голос
/ 12 августа 2014

Я знаю, что это старый, но мой ответ может помочь лучше, чем другие (если речь идет о CSS3!)

Как правильно сказал @TStamper, как только вы добавите runat="server" к элементу, результирующий идентификатор будет представлять собой последовательность идентификаторов, созданных сервером, разделенных _, но всегда заканчивающихся указанным идентификатором. 1005 *

Таким образом, если вы используете CSS3, как насчет [attribute$=value]? По данным w3schools :

Селектор [attribute $ = value] соответствует каждому элементу, значение атрибута которого заканчивается указанным значением.

Так что в вашем случае это может быть div[id$="navleft"].

Поскольку вы уже приняли ответ, я надеюсь, что он поможет другим с такой же проблемой.

1 голос
/ 27 февраля 2012

Вы можете использовать control.ClientID

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

Или в контексте формы используйте FindControl (). ClientID

<label for='<%= FormView1.FindControl("TextId1") %>'>Title:</label>
<asp:Textbox ID="TextId1" runat="server" text="Some text here" />
0 голосов
/ 28 октября 2009

Вы можете просто добавить рунату так:

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

Однако, в зависимости от того, что вы делаете, вы можете посмотреть на ASP Panel Control

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

0 голосов
/ 28 октября 2009

Я ударился головой об этом в течение некоторого времени. В конце концов я сдался и сделал свой собственный контроль веб-формы, который позволил мне установить идентификатор, как я хотел. Вот копия / вставка моего кода:

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();
        }
    }
}

Затем я сделал это для каждого тега. Это не самое элегантное решение (это еще одна библиотека классов, генерирующих HTML), но оно дает мне нужный мне контроль.

Когда я захочу использовать тег, я напишу следующее:

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

Это приведет к:

<div id="html_id_value"></div>
0 голосов
/ 28 октября 2009

Я думаю это, но я не уверен

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

или

 <div runat=server class="navleft">
 </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...