如何在ASP.Net中向updatepanel添加css类?

How can I add a css class to an updatepanel in the c# code behind file of asp.net

如何在asp.net文件后面的c#代码中向updatepanel添加css类

6 个解决方案

#1

As you've seen the update panel doesn't have a css class property. So since it can't be done directly you need a work around; there are two (Grabbed from UpdatePanel and CSS) that can get the behavior you desire.

如您所见，更新面板没有css类属性。因为它不能直接完成，所以你需要一个周围的功;有两个(从UpdatePanel和CSS中获取)可以得到您想要的行为。

One is to surround the update panel with a div:

一个是用div围绕更新面板:

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

The other is to apply a css selector based on the update panel's id:

另一个是基于更新面板的id应用css选择器:

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

Yet another way not mentioned in the article is surround the panel in a div and style the update panel based on it rendering as a div:

另一种没有在本文中提到的方法是将面板围成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>

#2

you can use single class html attribute

可以使用单个类html属性

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

#3

An update panel can render as a div or span (depending on mode). Easiest way to achieve what you want is to wrap the UpdatePanel in a standard Panel:

更新面板可以呈现为div或span(取决于模式)。实现您想要的最简单的方法是将UpdatePanel封装在一个标准面板中:

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

The you can just do this in codebehind:

你可以在代码后面这样做:

Panel1.CssClass = "myCssClass";

You could also use a div, like LFSR Consulting said, and add runat="server" and then change the class attribute. But Panel is a bit easier to work with (a Panel just renders as a div).

您还可以使用div，如LFSR Consulting所说，并添加runat="server"，然后更改类属性。但是面板更容易使用(面板只是作为div呈现)。

#4

You could also do as I have and just create a new class that inherits the UpdatePanel. I got the basis for this somewhere else but I don't remember where so I can't credit fully but I only tweaked it for this idea. I'm about to do the same for HTML Attributes (since the .attributes() collection is for css on the UpdatePanel instead of raw HTML attributes as with most other web.ui.controls).

您也可以像我一样，创建一个继承UpdatePanel的新类。我在其他地方得到了这个基础，但我不记得在哪里我不能完全信任，但我只是为了这个想法而调整。我将对HTML属性执行同样的操作(因为. Attributes()集合是针对UpdatePanel上的css，而不是像大多数其他web.ui.controls那样使用原始的HTML属性)。

UPDATED: I've updated to include some other customization I've made that allow for ANY attribute to be added. Really this duplicates the first customization except that the 1st creates a fairly standard approach where this is completely flexible (thus not standard).

更新:我已经更新了一些其他的自定义，允许添加任何属性。这实际上复制了第一个定制，除了第一个创建了一个相当标准的方法，其中完全灵活(因此不是标准)。

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# conversion via http://www.developerfusion.com/:

通过http://www.developerfusion.com/ c#转换:

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.");
            }
        }

    }


}

#5

CodeBehind:

后台代码:

UpdatePanel panel = new UpdatePanel();

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

HTML Result:

HTML结果:

<div id="..." class="your-css-class"></div>

#6

HTML

HTML

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

CSS

CSS

<style type="text/css">
  #UpdatePanel1 { position: relative; }
</style>