Как я могу добавить класс CSS в панель обновления в ASP.Net? - PullRequest
31 голосов
/ 29 июля 2009

Как я могу добавить класс css на панель обновления в коде c # за файлом asp.net

Ответы [ 6 ]

21 голосов
/ 17 августа 2011

вы можете использовать атрибут html одного класса

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" class="MyCssClass">
 </asp:UpdatePanel>
20 голосов
/ 29 июля 2009

Как вы уже видели, панель обновления не имеет свойства класса css. Так как это не может быть сделано напрямую, вам нужно обойтись; Есть два (взяты из UpdatePanel и CSS ), которые могут получить желаемое поведение.

Один из них - окружить панель обновления div:

<div id="foo" style="visibility: hidden; position: absolute">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
</div>

Другой способ - применить селектор CSS на основе идентификатора панели обновления:

<style type="text/css">
#<%=UpdatePanel1.ClientID%> {
    visibility: hidden;
    position: absolute;
}
</style>

Еще один способ, не упомянутый в статье, - заключить панель в div и стилизовать панель обновления на основе ее рендеринга в виде div:

<style type="text/css">
#foo div {
    visibility: hidden;
    position: absolute;
}
</style>

<div id="foo">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
</div>
4 голосов
/ 22 марта 2013

Вы также можете сделать, как я, и просто создать новый класс, который наследует UpdatePanel. Я получил основание для этого где-то еще, но я не помню, где, поэтому я не могу отдать должное, но я только подправил это для этой идеи. Я собираюсь сделать то же самое для атрибутов HTML (поскольку коллекция .attributes () предназначена для css на UpdatePanel, а не для необработанных атрибутов HTML, как в большинстве других web.ui.controls).

ОБНОВЛЕНО: я обновил и включил некоторые другие настройки, которые позволяют добавлять ЛЮБОЙ атрибут. На самом деле это дублирует первую настройку, за исключением того, что первая создает довольно стандартный подход, где он полностью гибкий (и поэтому не стандартный).

Imports System.ComponentModel
Imports System.Collections 
Imports System.Web.UI        

Namespace Controls

    Public Class UpdatePanelCss
        Inherits UpdatePanel
        Private _cssClass As String
        Private _tag As HtmlTextWriterTag = HtmlTextWriterTag.Div
        Public HtmlAttributes As New HtmlAttributes

        <DefaultValue("")> _
        <Description("Applies a CSS style to the panel.")> _
        Public Property CssClass() As String
            Get
                Return If(_cssClass, [String].Empty)
            End Get
            Set(ByVal value As String)
                _cssClass = value
            End Set
        End Property

        ' Hide the base class's RenderMode property since we don't use it
        <Browsable(False)> _
        <EditorBrowsable(EditorBrowsableState.Never)> _
        <DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)> _
        Public Shadows Property RenderMode() As UpdatePanelRenderMode
            Get
                Return MyBase.RenderMode
            End Get
            Set(ByVal value As UpdatePanelRenderMode)
                MyBase.RenderMode = value
            End Set
        End Property

        <DefaultValue(HtmlTextWriterTag.Div)> _
        <Description("The tag to render for the panel.")> _
        Public Property Tag() As HtmlTextWriterTag
            Get
                Return _tag
            End Get
            Set(ByVal value As HtmlTextWriterTag)
                _tag = value
            End Set
        End Property

        Protected Overrides Sub RenderChildren(ByVal writer As HtmlTextWriter)
            If IsInPartialRendering Then
                ' If the UpdatePanel is rendering in "partial" mode that means
                ' it's the top-level UpdatePanel in this part of the page, so
                ' it doesn't render its outer tag. We just delegate to the base
                ' class to do all the work.
                MyBase.RenderChildren(writer)
            Else
                ' If we're rendering in normal HTML mode we do all the new custom
                ' rendering. We then go render our children, which is what the
                ' normal control's behavior is.
                writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID)
                If CssClass.Length > 0 Then
                    writer.AddAttribute(HtmlTextWriterAttribute.[Class], CssClass)
                End If
                If HtmlAttributes.Count > 0 Then
                    For Each ha As HtmlAttribute In HtmlAttributes
                        writer.AddAttribute(ha.AttrName, ha.AttrVal)
                    Next
                End If
                writer.RenderBeginTag(Tag)
                For Each child As Control In Controls
                    child.RenderControl(writer)
                Next
                writer.RenderEndTag()
            End If
        End Sub

    End Class

    Public Class HtmlAttribute
        Private PAttrName As String
        Private PAttrVal As String

        Public Sub New(AttrName As String, AttrVal As String)
            PAttrName = AttrName
            PAttrVal = AttrVal
        End Sub

        Public Property AttrName() As String
            Get
                Return PAttrName
            End Get
            Set(value As String)
                PAttrName = value
            End Set
        End Property

        Public Property AttrVal() As String
            Get
                Return PAttrVal
            End Get
            Set(value As String)
                PAttrVal = value
            End Set
        End Property

    End Class


    Public Class HtmlAttributes
        Inherits CollectionBase

        Public ReadOnly Property Count() As Integer
            Get
                Return List.Count
            End Get
        End Property

        Default Public Property Item(ByVal index As Integer) As HtmlAttribute
            Get
                Return CType(List.Item(index), HtmlAttribute)
            End Get
            Set(ByVal Value As HtmlAttribute)
                List.Item(index) = Value
            End Set
        End Property

        Public Function Add(ByVal item As HtmlAttribute) As Integer
            Return List.Add(item)
        End Function

        Public Sub Remove(ByVal index As Integer)
            If index < List.Count AndAlso List.Item(index) IsNot Nothing Then
                List.RemoveAt(index)
            Else
                Throw New Exception(String.Concat("Index(", index.ToString, ") is not valid. List only has ", List.Count.ToString, " items."))
            End If
        End Sub

        Public Sub Remove(ByRef hAttribute As HtmlAttribute)
            If List.Count > 0 AndAlso List.IndexOf(hAttribute) >= 0 Then
                List.Remove(hAttribute)
            Else
                Throw New Exception("Object does not exist in collection.")
            End If
        End Sub

    End Class


End Namespace

C # преобразование через http://www.developerfusion.com/:

using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.ComponentModel;
using System.Web.UI;

namespace Controls
{

    public class UpdatePanelCss : UpdatePanel
    {
        private string _cssClass;
        private HtmlTextWriterTag _tag = HtmlTextWriterTag.Div;

        public HtmlAttributes HtmlAttributes = new HtmlAttributes();
        [DefaultValue("")]
        [Description("Applies a CSS style to the panel.")]
        public string CssClass {
            get { return _cssClass ?? String.Empty; }
            set { _cssClass = value; }
        }

        // Hide the base class's RenderMode property since we don't use it
        [Browsable(false)]
        [EditorBrowsable(EditorBrowsableState.Never)]
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
        public new UpdatePanelRenderMode RenderMode {
            get { return base.RenderMode; }
            set { base.RenderMode = value; }
        }

        [DefaultValue(HtmlTextWriterTag.Div)]
        [Description("The tag to render for the panel.")]
        public HtmlTextWriterTag Tag {
            get { return _tag; }
            set { _tag = value; }
        }

        protected override void RenderChildren(HtmlTextWriter writer)
        {
            if (IsInPartialRendering) {
                // If the UpdatePanel is rendering in "partial" mode that means
                // it's the top-level UpdatePanel in this part of the page, so
                // it doesn't render its outer tag. We just delegate to the base
                // class to do all the work.
                base.RenderChildren(writer);
            } else {
                // If we're rendering in normal HTML mode we do all the new custom
                // rendering. We then go render our children, which is what the
                // normal control's behavior is.
                writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID);
                if (CssClass.Length > 0) {
                    writer.AddAttribute(HtmlTextWriterAttribute.Class, CssClass);
                }
                if (HtmlAttributes.Count > 0) {
                    foreach (HtmlAttribute ha in HtmlAttributes) {
                        writer.AddAttribute(ha.AttrName, ha.AttrVal);
                    }
                }
                writer.RenderBeginTag(Tag);
                foreach (Control child in Controls) {
                    child.RenderControl(writer);
                }
                writer.RenderEndTag();
            }
        }

    }

    public class HtmlAttribute
    {
        private string PAttrName;

        private string PAttrVal;
        public HtmlAttribute(string AttrName, string AttrVal)
        {
            PAttrName = AttrName;
            PAttrVal = AttrVal;
        }

        public string AttrName {
            get { return PAttrName; }
            set { PAttrName = value; }
        }

        public string AttrVal {
            get { return PAttrVal; }
            set { PAttrVal = value; }
        }

    }


    public class HtmlAttributes : CollectionBase
    {

        public int Count {
            get { return List.Count; }
        }

        public HtmlAttribute this[int index] {
            get { return (HtmlAttribute)List[index]; }
            set { List[index] = value; }
        }

        public int Add(HtmlAttribute item)
        {
            return List.Add(item);
        }

        public void Remove(int index)
        {
            if (index < List.Count && List[index] != null) {
                List.RemoveAt(index);
            } else {
                throw new Exception(string.Concat("Index(", index.ToString(), ") is not valid. List only has ", List.Count.ToString(), " items."));
            }
        }

        public void Remove(ref HtmlAttribute hAttribute)
        {
            if (List.Count > 0 && List.IndexOf(hAttribute) >= 0) {
                List.Remove(hAttribute);
            } else {
                throw new Exception("Object does not exist in collection.");
            }
        }

    }


}
4 голосов
/ 29 июля 2009

Панель обновления может отображаться как div или span (в зависимости от режима). Самый простой способ добиться того, чего вы хотите - это обернуть панель обновления в стандартную панель:

<asp:Panel ID="Panel1" runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
</asp:Panel>

Вы можете просто сделать это в коде:

Panel1.CssClass = "myCssClass";

Вы также можете использовать div, как сказал LFSR Consulting, добавить runat="server" и затем изменить атрибут класса. Но с Panel немного проще работать (Panel просто визуализируется как div).

2 голосов
/ 21 августа 2017

CodeBehind:

UpdatePanel panel = new UpdatePanel();

panel.Attributes.Add("class","your-css-class");

HTML Результат:

<div id="..." class="your-css-class"></div>
0 голосов
/ 13 ноября 2014

HTML

<asp:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>

CSS

<style type="text/css">
  #UpdatePanel1 { position: relative; }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...