Comment puis-je ajouter une classe CSS à un updatepanel dans ASP.Net?
Comment puis-je ajouter une classe css à un updatepanel dans le code c # derrière le fichier asp.net
Comme vous l'avez vu, le panneau de mise à jour n'a pas de propriété de classe css. Donc, comme cela ne peut pas être fait directement, vous avez besoin d'un travail de contournement; il existe deux ((saisis dans UpdatePanel et CSS ) qui peuvent obtenir le comportement souhaité.
L'une consiste à entourer le panneau de mise à jour d'un div:
<div id="foo" style="visibility: hidden; position: absolute">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</div>
L'autre consiste à appliquer un sélecteur CSS basé sur l'ID du panneau de mise à jour:
<style type="text/css">
#<%=UpdatePanel1.ClientID%> {
visibility: hidden;
position: absolute;
}
</style>
Encore une autre manière non mentionnée dans l'article consiste à entourer le panneau dans une div et à styler le panneau de mise à jour en fonction de son rendu en tant que div:
<style type="text/css">
#foo div {
visibility: hidden;
position: absolute;
}
</style>
<div id="foo">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</div>
vous pouvez utiliser un attribut HTML de classe unique
<asp:UpdatePanel ID="UpdatePanel1" runat="server" class="MyCssClass">
</asp:UpdatePanel>
Un panneau de mise à jour peut être rendu sous forme de div ou de span (selon le mode). Le moyen le plus simple de réaliser ce que vous voulez consiste à envelopper UpdatePanel dans un panneau standard:
<asp:Panel ID="Panel1" runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</asp:Panel>
Vous pouvez simplement le faire dans codebehind:
Panel1.CssClass = "myCssClass";
Vous pouvez également utiliser un div, comme dit LFSR Consulting, et ajouter runat="server", puis modifier l'attribut de classe. Mais il est un peu plus facile de travailler avec Panel (un Panel se présente simplement en tant que div).
Vous pouvez également faire ce que je fais et créer une nouvelle classe qui hérite de UpdatePanel. J'ai eu la base pour ceci ailleurs mais je ne me souviens pas où donc je ne peux pas créditer entièrement mais je l'ai seulement modifié pour cette idée. Je suis sur le point de faire la même chose pour les attributs HTML (puisque la collection .attributes () concerne les CSS sur UpdatePanel au lieu des attributs HTML bruts, comme avec la plupart des autres web.ui.controls).
MISE À JOUR: j'ai mis à jour pour inclure une autre personnalisation que j'ai faite qui permet d'ajouter n'importe quel attribut. Vraiment, cela duplique la première personnalisation, à la différence que la première crée une approche assez standard où elle est complètement flexible (donc non 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
Conversion C # via 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.");
}
}
}
}
CodeBehind:
UpdatePanel panel = new UpdatePanel();
panel.Attributes.Add("class","your-css-class");
Résultat HTML:
<div id="..." class="your-css-class"></div>
HTML
<asp:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>
CSS
<style type="text/css">
#UpdatePanel1 { position: relative; }
</style>