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テーブルに、ボーナスborder = "1"属性が追加されていることがわかりました。スタイルを空のデータ行に設定しようとしても、オーバーライドされます。この親属性によって。これは、FirebugツールとOpera dragon flyを使用して発見しました。どちらのツールも、この厄介な境界属性が追加されることを確認しました。

それから私はこのように問題に取り組みました

マークアップ

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

コードビハインド グリッドビュー行のデータバインドイベントにこれらのコード行を追加して、魔法を見てください

   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

これはすべてのブラウザで完全に機能します。以下のサンプルを参照してください!!! 結果を見る

asp.net - 空のデータ行スタイルが機能していません

4 に答える 4

Related

Reference