Làm thế nào để loại bỏ div trống có chứa một GridView

Question

Trong ASP.NET Gridviews tạo ra một bảng mà tạo ra một div cha mẹ container. Điều này có thể phá vỡ bố trí CSS vì không có cách nào để đính kèm phong cách cho div được tạo. Có cách nào để ngăn chặn div tạo ra hoặc một cách để áp dụng một phong cách cho nó?

Điều này đã được hỏi và đánh dấu là đã giải quyết here nhưng MS chỉ cho biết rằng div là cần thiết cho chức năng Phân trang và Sắp xếp. Tôi có hiểu rằng nếu tôi muốn sử dụng chức năng phân trang và sắp xếp, tôi không thể quấn div của riêng mình xung quanh nó và áp dụng một phong cách? Cảm ơn

Answer 1

Tôi chưa bao giờ làm điều này, nhưng tôi đoán đầu tiên của tôi sẽ là bạn có thể lấy đầu ra html rendered ngay trước khi nó được cho là trình duyệt, loại bỏ div bên ngoài và sau đó htmltextwrite ra html mới được hiển thị của bạn trong sự kiện trước hoặc thực hiện điều khiển người dùng hoặc tùy chỉnh để thực hiện việc này.

Nhưng sau đó bạn có nguy cơ phá vỡ các chức năng của GridView nhưng nếu bạn biết bạn sẽ không sử dụng các tính năng sử dụng div, sau đó bạn có thể nhận được ngay với nó.

Answer 2

Bạn có thể đặt nó vào bên trong của một asp: Bảng điều khiển và đặt thuộc tính Có thể nhìn thấy trên bảng thành sai nếu bảng trống.

Answer 3

Bạn có thể xác định CssClass rõ ràng cho GridView để sử dụng.

<asp:GridView ... CssClass="nameOfStyleClass" ... /> 

Sau đó định nghĩa một lớp css:

.nameOfStyleClass 
{ 
    < Style stuff > 
} 

Answer 4

Cùng một vấn đề ở đây, OMG là vì vậy gây phiền nhiễu. Trục trặc trong rendering trong IE6/7 khi butting một div để trên cùng của một GridView - cha mẹ DIV gây ra một không gian giữa hai yếu tố.

Tôi đã đào vào mã GridView sử dụng phản xạ và phát hiện các vấn đề:

Private Sub Render(ByVal writer As HtmlTextWriter, ByVal renderPanel As Boolean) 
    If (Not Me.Page Is Nothing) Then 
     Me.Page.VerifyRenderingInServerForm(Me) 
    End If 
    Me.PrepareControlHierarchy 
    If renderPanel Then 
     Dim clientID As String = Me.ClientID 
     If Me.DetermineRenderClientScript Then 
      If (clientID Is Nothing) Then 
       Throw New HttpException(SR.GetString("GridView_MustBeParented")) 
      End If 
      Dim builder As New StringBuilder("__gv", (clientID.Length + 9)) 
      builder.Append(clientID) 
      builder.Append("__div") 
      writer.AddAttribute(HtmlTextWriterAttribute.Id, builder.ToString, True) 
     End If 
     writer.RenderBeginTag(HtmlTextWriterTag.Div) 
    End If 
    Me.RenderContents(writer) 
    If renderPanel Then 
     writer.RenderEndTag 
    End If 
End Sub 

này được gọi là từ render:

Protected Friend Overrides Sub Render(ByVal writer As HtmlTextWriter) 
    Me.Render(writer, Not MyBase.DesignMode) 
End Sub 

Vì vậy, 'renderPanel' == không designMode. DIV được sử dụng để phân trang và phân loại khi lưới ảnh không phải là trong UpdatePanel. Trên trang web của tôi, tất cả GridViews đang ở trong một UP cộng với họ kế thừa từ một lớp tùy chỉnh GridView, vì vậy giải pháp của tôi là để ghi đè lên các chức năng trên như sau:

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) 
     Me.PrepareControlHierarchy() 
     Me.RenderContents(writer) 
    End Sub 

Các giải pháp khác có thể sao chép render phương pháp từ ở trên và thay đổi theo yêu cầu.

Mùi này của HACK - bạn đã được cảnh báo, nhưng có thể làm việc cho bạn, đặc biệt nếu bạn không sử dụng phân trang/phân loại.

Answer 5

Một giải pháp dễ dàng mà không làm thay đổi:

tôi cần phải áp dụng một phong cách cho div tạo ra bởi các GridView vì nó phá vỡ bố cục của tôi, vì vậy tôi đã tạo ra một div với id "myContainerDiv" và chuyển GridView của tôi vào nó và sử dụng jQuery tôi áp dụng một số kiểu.

Ví dụ:

$("#myContainerDiv > div").css("display", "inline"); 

tôi đặt javascript này trong $ (document) .ready (function ({})) ;. Nhưng nếu bạn sử dụng UpdatePanel, như tôi phải sử dụng trong trường hợp cụ thể này, tôi thực thi $(). Css() này trong mọi postback async. Nếu không có phong cách đó sẽ bị mất nếu bạn thực hiện một số updatepanel nơi gridview của bạn được chứa. Nhưng tôi thực hiện $ này() css() chỉ khi một UpdatePanel đặc biệt là bắn (không cần phải thực hiện hướng dẫn này javascript trong mỗi mỗi mỗi postback async)

Ví dụ:.

<script type="text/javascript"> 

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

function EndRequestHandler(sender, args) { 
    if (args.get_error() == undefined && sender._updatePanelClientIDs != null && 
      sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") { 
      $("#myContainerDiv > div").css("display", "inline"); 
     } 
    } 

</script> 

giải quyết!

Toàn bộ trang sẽ trông như thế:

<script type="text/javascrcipt" src="jquery.js"></script> 

<script type="text/javascript">  

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

function EndRequestHandler(sender, args) { 
    if (args.get_error() == undefined && sender._updatePanelClientIDs != null && 
      sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") { 
      $("#myContainerDiv > div").css("display", "inline"); 
     } 
    } 

</script> 

<asp:UpdatePanel runat="server" ID="MyParticularUpdatePanel" UpdateMode="Conditional" RenderMode="Inline"> 
<Triggers> 
// Your triggers here... 
</Triggers> 
<ContentTemplate> 
<div id="myContainerDiv" style="display:inline;"> 
    <asp:GridView runat="server" ID="MyGridView" AutoGenerateColumns="false" Height="150px" EmptyDataText="No data."> 
    <Columns> 
     <asp:BoundField DataField="ID" HeaderText="My ID" /> 
    </Columns> 
    </asp:GridView> 
</div> 
</ContentTemplate> 
</asp:UpdatePanel> 

Tôi không biết nếu mã này sẽ biên dịch chính xác như tôi đã viết vì tôi đã viết nó bằng notepad.

Xin lỗi vì tiếng anh nghèo của tôi, tôi đến từ Braxin.

Christophe Trevisani Chavey. http://www.christophetrevisani.com

Answer 6

Nếu bạn đang mắc kẹt với một wrapper unstyled (mà có vẻ như bạn đang có) nhưng muốn thực thi một phong cách, cung cấp cho nó khác wrapper, và áp dụng phong cách của bạn với sự kết hợp. Nếu một div đồng bằng có một số padding bạn muốn thoát khỏi (ví dụ), điều này trong aspx:

<div id="crushGvDiv"> 
<asp:GridView ... > 
</div> 

và điều này cho CSS:

div#crushGvDiv, div#crushGvDiv div { padding: 0; margin: 0; } 

Answer 7

Tôi có vấn đề này cùng sử dụng bootstrap đáp ứng bảng với điều khiển GridView. Tôi đã có thể dễ dàng sửa chữa (một số có thể nói hack) các vấn đề bằng cách thêm dòng này đến chức năng sẵn sàng:

$("div.table-responsive > div").addClass('table-responsive'); 

này sẽ cho kết quả giống như sau:

<div class=table-responsive> 
    <div class=table-responsive> 
     <table ..... 

này nên làm việc một cách công bằng nhưng nó không phải là giải pháp hoàn hảo.

Answer 8

Giải pháp đơn giản và tốt nhất khi sử dụng lớp CSS "gridViewWrapperFix".

ASPX:

<div class="gridViewWrapperFix"> 

    <asp:GridView> 
    <%--the full gridview would go here--%> 
    </asp:GridView> 

</div> 

CSS:

/* styles the div that gets auto generated around and asp.net gridview */ 

.gridViewWrapperFix > div { 
    padding: 0; 
    margin: 0; 
    border: 3px solid red; 
}