asp.net - 空数据行样式不起作用

Question

我有一个emptydatarowstyle似乎不起作用的。当 GridView 为空时。我试图隐藏这个周围的白色边框：

在此处输入图像描述

代码：

<emptydatarowstyle  BorderStyle="None" BorderWidth="0px" />

                    <emptydatatemplate>

                    No Dates Found for this experience at this current time.  Please try again.

                    </emptydatatemplate>

编辑：

ASPX：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="book.aspx.cs" Inherits="chinatownexperience.book" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />

<!-- Put the following javascript before the closing </head> tag. -->
<script type="text/javascript">
    (function () {
        var cx = '000935526448861961589:s0c0yzdtfao';
        var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
    })();
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="body-1">
        <div id="topblank">
                <div class="top-1-1"><a href="experiences.aspx"><img onmouseover="this.src='images/myexperience-on.png'" onmouseout="this.src='images/myexperience.png'" src="images/myexperience.png" width="111" height="23" alt="My Experience" /></a></div>
                <div class="yellowsquare"></div>
                <div class="top-1-2"><a href="loginpublic.aspx"><img onmouseover="this.src='images/login-on.png'" onmouseout="this.src='images/login.png'" src="images/login.png" width="49" height="23" alt="Login" /></a></div>
                <div class="yellowsquare"></div>
                <div class="top-1-3"><a href="register.aspx"><img onmouseover="this.src='images/register-on.png'" onmouseout="this.src='images/register.png'" src="images/register.png" width="62" height="23" alt="Register" /></a></div>
                <div class="top-2-google"><gcse:searchbox-only></div>
        </div>

        <div class="center">
            <div class="navhome"><a href="index.aspx"><img src="images/menu-home-button-off.png" width="81" height="54" alt="Home" /></a>
            </div>
            <div class="navaboutus"><a href="aboutus.aspx"><img src="images/menu-aboutus-button-off.png" width="105" height="54" alt="Home" /></a>
            </div>
            <div class="navexperiences"><a href="experiences.aspx"><img src="images/menu-experiences-button-on.png" width="129" height="54" alt="Home" /></a>
            </div>
            <div class="navgetinvolved"><a href="getinvolved.aspx"><img src="images/menu-getinvolved-button-off.png" width="130" height="54" alt="Home" /></a>
            </div>
            <div class="navsupportus"><a href="supportus.aspx"><img src="images/menu-supportus-button-off.png" width="128" height="54" alt="Home" /></a>
            </div>
            <div class="navcontactus"><a href="contactus.aspx"><img src="images/menu-contactus-button-off.png" width="132" height="54" alt="Home" /></a>
            </div>
            <div class="navmenuend"><img src="images/menu-end.png" width="8" height="54" alt="menu end" />
            </div>
        </div>

        <div class="line"><hr /></div>

        <div class="centergrid">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                DataSourceID="SqlDataSource1" CssClass="bookgridview">

<%--                <emptydatarowstyle  BorderStyle="None" BorderWidth="0px" />--%>

                    <emptydatatemplate>

                    Unfortunately, this Experience is currently fully booked. Please try again later for availability.

                    <!-- <div id="filler"></div>  -->

                    </emptydatatemplate> 

                <Columns>
                    <asp:BoundField DataField="TName" HeaderText="Experience" SortExpression="TName" />
                    <asp:BoundField DataField="SDate" HeaderText="Date" SortExpression="SDate" DataFormatString="{0:d}" />
                    <asp:BoundField DataField="STime" HeaderText="Time" SortExpression="STime" />
                    <asp:BoundField DataField="TDuration" HeaderText="Duration (approx)"
                        SortExpression="TDuration" />
                    <asp:BoundField DataField="TPriceadult" HeaderText="Adult" 
                        SortExpression="TPriceadult" DataFormatString="{0:C}"  /> 
                    <asp:BoundField DataField="TPricesenior" HeaderText="Student/Senior" 
                        SortExpression="TPricesenior" DataFormatString="{0:C}"  /> 
                    <asp:BoundField DataField="TPricechild" HeaderText="Child" 
                        SortExpression="Tpricechild" DataFormatString="{0:C}"   /> 

                    <asp:BoundField DataField="ScheduleId" HeaderText="ScheduleId" 
                        SortExpression="ScheduleId"  Visible="False" />
                    <asp:TemplateField>
                    <ItemTemplate>
                         <asp:HyperLink ID="lnkSelect" runat='server' NavigateUrl='<%# String.Format("~/bookingform.aspx?ID={0}", Eval("ScheduleId")) %>'>Book</asp:HyperLink>
                    </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:ChinatowndbConnString %>" 
                SelectCommand="SELECT * FROM [vwSchedule] Where TourId=@tid">

                <SelectParameters>
                    <asp:QueryStringParameter DbType="Int32" Name="tid" QueryStringField="tourid" />
                </SelectParameters>
            </asp:SqlDataSource>

        </div>

        <div id="bottomspace"></div>
        <div class="line"><hr class="top" /></div>             


    </div>

    </form>

</body>
</html>

CSS：

.bookgridview 
{
    float: left;
    width: 836px;
    border: 1px solid white; 
    padding: 0px 0px 0px 0px;
    font: 14px "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    color: #FFFFFF;  
}

.bookgridview td {   
    padding: 2px;   
}

.bookgridview th {   
    padding: 2px;    
}

敬茶

score 1 · Accepted Answer

我解剖了你的页面。见下图。

在此处输入图像描述

并在行数据绑定中执行魔术之后。您可以看到样式 bookgridview 是罪魁祸首。所以我们通过将 css 设置为空字符串来清除它。

在此处输入图像描述

最终结果。您现在可以看到边框已删除。让我知道这是怎么回事。在此处输入图像描述

score 1 · Accepted Answer

如果在空数据行中删除样式后丢失样式，请像这样将其添加回来。您不必在标记中删除它。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            GridView bookingGridView = (GridView)sender;
            bookingGridView.CssClass = "bookgridview";

        }

        if (e.Row.RowType == DataControlRowType.EmptyDataRow)
        {
            GridView bookingGridView = (GridView)sender;

            bookingGridView.Attributes.Add("border", "0");
            bookingGridView.CssClass = "";

        }


    }

score 0 · Accepted Answer

我复制了您的问题并发现在网格视图的渲染 html 表上，它带有一个额外的边框 =“1” 属性添加到它。无论您如何尝试将样式设置为空数据行，它都会被覆盖通过这个父属性。我使用萤火虫工具和 Opera Dragon fly 发现了这一点。这两个工具都确认将添加这个讨厌的边框属性。

然后我以这种方式解决了这个问题

标记

   <EmptyDataTemplate>
        Ooops. No rows to display.
    </EmptyDataTemplate>

后面的代码在你的 gridview 行数据绑定事件中添加这些代码行，看看魔术

   Protected Sub TestGridView_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles TestGridView.RowDataBound
If e.Row.RowType = DataControlRowType.EmptyDataRow Then

      CType(sender,GridView).Attributes.Add("border","0")
      CType(sender,GridView).CssClass=""

 End If
 End Sub

这在所有浏览器中都能完美运行。请参阅下面的示例！！！查看结果

score 0 · Accepted Answer

也许你可以试试这种方法。

添加到您的 css 文件

tr.empty-row, tr.empty-row td
{
  border: none;
}

在您的网格视图中添加

<EmptyDataRowStyle CssClass="empty-row" />

如果它不起作用，请尝试将边框颜色设置为与背景相同。

asp.net - 空数据行样式不起作用

4 回答 4

添加到您的 css 文件

在您的网格视图中添加

Related

Reference