Làm thế nào tôi có thể thêm một lớp css vào một updatepanel trong ASP.Net?

Question

Làm cách nào để thêm lớp css vào bảng cập nhật trong mã C# phía sau tệp asp.net

Answer 1

Như bạn đã thấy bảng cập nhật không có thuộc tính lớp css. Vì vậy, vì nó không thể được thực hiện trực tiếp bạn cần một công việc xung quanh; có hai (Lấy từ UpdatePanel and CSS) có thể nhận được hành vi mà bạn mong muốn.

Một là để bao quanh bảng điều khiển cập nhật với một div:

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

khác là để áp dụng một selector css dựa trên id bảng cập nhật của:

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

Tuy nhiên, một cách không được đề cập trong bài viết được bao quanh bảng điều khiển trong một div và kiểu bảng điều khiển cập nhật dựa trên nó hiển thị dưới dạng div:

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

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

Answer 2

Bảng cập nhật có thể hiển thị dưới dạng div hoặc span (tùy thuộc vào chế độ). Cách dễ nhất để đạt được những gì bạn muốn là để bọc các UpdatePanel trong một Panel tiêu chuẩn:

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

Các bạn chỉ có thể làm điều này trong codebehind:

Panel1.CssClass = "myCssClass"; 

Bạn cũng có thể sử dụng một div, như LFSR Consulting nói và thêm runat="server" và sau đó thay đổi thuộc tính lớp. Nhưng Panel dễ làm việc hơn một chút (Bảng điều khiển chỉ hiển thị dưới dạng div).

Answer 3

bạn có thể sử dụng lớp html đơn thuộc tính

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

Answer 4

Bạn cũng có thể làm như tôi có và chỉ cần tạo một lớp mới kế thừa UpdatePanel. Tôi đã có cơ sở cho điều này ở một nơi khác nhưng tôi không nhớ nơi vì vậy tôi không thể tín dụng đầy đủ nhưng tôi chỉ tinh chỉnh nó cho ý tưởng này. Tôi sắp làm tương tự cho các thuộc tính HTML (vì bộ sưu tập .attributes() là dành cho css trên UpdatePanel thay vì các thuộc tính HTML thô như với hầu hết các web.ui.controls khác).

CẬP NHẬT: Tôi đã cập nhật để bao gồm một số tùy chỉnh khác mà tôi đã thực hiện cho phép bất kỳ thuộc tính nào được thêm vào. Thực sự điều này sao chép các tùy chỉnh đầu tiên ngoại trừ việc 1 tạo ra một cách tiếp cận khá chuẩn, nơi điều này là hoàn toàn linh hoạt (do đó không chuẩn).

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# chuyển đổi qua 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."); 
      } 
     } 

    } 


} 

Answer 5

HTML

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

CSS

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

Answer 6

CodeBehind:

UpdatePanel panel = new UpdatePanel(); 

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

HTML Kết quả:

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