如何使用 html/css 设置 gridview、boundfield 和 asp.net 上的列的样式

Question

I am trying to style gridview/boundfield/columns with html/css (mostly bootstrap) on asp.net. I'm not too sure how to make it prettier since I cannot implement any divs in between the gridview codes since it can't read it. I have two codes below that I am trying to style.

Code 1 in asp.net with bootstrap html/css:

       <div class="row">
                <div class="col-md-8 mx-auto">
                    <asp:GridView ID="gridviewJobsPageLoad" runat="server" AutoGenerateColumns="false" AutoGenerateSelectButton="true" OnSelectedIndexChanged="gridviewJobsPageLoad_SelectedIndexChanged">
                        <Columns>
                            <asp:BoundField DataField="JobDescription" HeaderText="Job Title" />
                            <asp:BoundField DataField="JobYear" HeaderText="Job Year" />
                            <asp:BoundField DataField="DateStart" HeaderText="Start Date" />
                            <asp:BoundField DataField="Category" HeaderText="Category" />
                            <asp:BoundField DataField="Link" HeaderText="Link" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" />
                            <asp:TemplateField ShowHeader="false">
                                <ItemTemplate>

                                    <asp:Button runat="server" ID="btnApplyToJob" class="btn btn-secondary btn-lg" OnClick="btnApplyToJob_Click" Text="Apply Now" CommandArgument='<%# Eval("Link") %>' />


                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ShowHeader="false">
                                <ItemTemplate>

                                    <%-- <asp:CheckBox ID="checkBoxAppliedConfirmation" runat="server" AutoPostBack="true" OnCheckedChanged="checkBoxAppliedConfirmation_CheckedChanged" />--%>
                                    <asp:Button ID="btnConfirmation" class="btn btn-secondary btn-lg" runat="server" Text="Confirmed" OnClick="btnConfirmation_Click" Visible="true" />
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>



                    </asp:GridView>

                </div>
            </div> 
    <style>
    tbody, td, tfoot, th, thead, tr {
        width: 50%;
        font-size: 1.05em;
        padding: 10px;
        border-color: #3D0859;
        border-style: solid;
        border-width: 3px !important;
    } </style>

Code 1 image: enter image description here

Code 2:

    <div class="row">
    <div class="col-md-10 mx-auto">
        <div class="grid">
                <asp:GridView ID="gridviewAnnouncement" runat="server" AutoGenerateColumns="false" Width="100%"
                    AutoGenerateSelectButton="true" OnSelectedIndexChanged="gridviewAnnouncement_SelectedIndexChanged" 
                    GridLines="Horizontal" BorderStyle="Solid">
                    <Columns>
                        <asp:BoundField DataField="Header" HeaderText="Announcement" HtmlEncode="false" /> 
                        <asp:TemplateField ShowHeader="false">
                            <ItemTemplate>

                                <asp:Button type="button" class="btn btn-secondary" runat="server" ID="btnInterested" Text="Interested" 
                                    OnClick="btnInterested_Click" Visible="false"/>
                            </ItemTemplate>
                            </asp:TemplateField>
                    </Columns>
                </asp:GridView>
          </div>
            </div>
</div>

Code 2 image: enter image description here

Answer 1

Well, if we drop in a gridview, say like this:

    <div style="padding:25px;width:60%">
        <asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="ID" OnRowDataBound="GHotels_RowDataBound" >
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName"   />
                <asp:BoundField DataField="City" HeaderText="City"           />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="Description" HeaderText="Description" />

                <asp:TemplateField HeaderText="Gender">
                    <ItemTemplate>
                    <asp:RadioButtonList ID="RGender" runat="server" 
                        RepeatDirection="Horizontal" 
                        Text='<%# Eval("Gender") %>' 
                        AutoPostBack="true"
                        OnSelectedIndexChanged="RGender_SelectedIndexChanged"
                        >
                        <asp:ListItem>M</asp:ListItem>
                        <asp:ListItem>F</asp:ListItem>                            
                    </asp:RadioButtonList>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Option">
                    <ItemTemplate>
                    <asp:DropDownList ID="cboOption" runat="server" 
                        DataValueField="ID"
                        DataTextField="Feature" >
                    </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

And this code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GHotels.DataSource = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName");
            GHotels.DataBind();
        }
    }

    public DataTable MyRst(string strSQL)
    {
        DataTable rstData = new DataTable();
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                cmdSQL.Connection.Open();
                rstData.Load(cmdSQL.ExecuteReader());
            }
        }
        return rstData;
    }

we get this:

But, if we want to bootstrap the Gv, then just set it to the class "table".

and, it now looks rather nice:

Note how much nicer the spacing is. And if I set the div to 100%, then the grid looks VERY nice and will span the whole page (the GV in fact becomes "responsive" when you do this.

And there no reason why you can't say add css styling to any control. So, for example, lets style the radio button with Css, say:

So, now the gv is responsive (sizes to browser size), and I even added css to the radio buttons.

So, you can apply booth strap and css to a gridview - quite much like any other web site.

HOWEVER - having stated the above?

The layout abilities of the GV is limited.

if you want the mother of all layout options - and quite near unlimited flexibility?

Then adopt the ListView. They render as a table, but have significant advantages:

They are:

All the controls don't need to be put inside of that messy templatefield. I mean, maybe for 4-8 controls - sure, use the GV. But after that, and ALSO wanting custom layout, and ALSO wanting to use plane jane asp.net controls?

Then HANDS down, the ListView control is 100x better. Not only is it better, but as stated, you don't have to bother with template fields, and EVEN better is not only can you drop in plane jane markup - including divs etc.? But you also can style the markup with much greater ease.

So, converting the above to a listview, we get this:

Note that I did use the wizard and a "on page" data source to create this listview. Then I go delete crazy on the lv, and remove ALL OF the templates.

So, this took me no time flat to build (for this post on so).

So, I now have this:

    <div style="padding:20px;width:60%">
        <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" OnItemDataBound="ListView1_ItemDataBound" >

            <ItemTemplate>
                <tr style="">
                    <td><asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /></td>
                    <td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>
                    <td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td>
                    <td><asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' /></td>
                    <td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
                    <td><asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' /></td>

                    <td>
                        <asp:RadioButtonList ID="RGender" runat="server" 
                            RepeatDirection="Horizontal" 
                            Text='<%# Eval("Gender") %>' 
                            AutoPostBack="true"
                            OnSelectedIndexChanged="RGender_SelectedIndexChanged"
                             CssClass="rMyChoice"  >
                            <asp:ListItem>M</asp:ListItem>
                            <asp:ListItem>F</asp:ListItem>                            
                        </asp:RadioButtonList>
                    </td>
                    <td>
                        <asp:DropDownList ID="cboOption" runat="server" 
                            DataValueField="ID"
                            DataTextField="Feature" >
                        </asp:DropDownList>
                    </td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table id="itemPlaceholderContainer" runat="server" border="0" class="table">
                    <tr runat="server" style="">
                        <th runat="server">ID</th>
                        <th runat="server">FirstName</th>
                        <th runat="server">LastName</th>
                        <th runat="server">City</th>
                        <th runat="server">HotelName</th>
                        <th runat="server">Description</th>
                        <th runat="server">Gender</th>
                        <th runat="server">HotelOption</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>

If you look close, it NOT really more markup - and in fact it rather clean.

We now get this:

but, here is where the fun comes:

You can see this is mostly just markup - so we can modify this. Say, more like a card view of some sort:

However, we can use markup now. Say we move description and hotel to the same column,

Like this:

            <ItemTemplate>
                <tr style="">
                    <td>
                        
                     <asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>'
                         Font-Size="Large"/>
                    <br />
                     <asp:Label ID="DescriptionLabel" runat="server" 
                         Text='<%# Eval("Description") %>'
                         Font-Italic="true" />
                    </td>
                    <td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>

And now:

            <LayoutTemplate>
                <table id="itemPlaceholderContainer" runat="server" border="0" class="table">
                    <tr runat="server" style="">
                        <th runat="server">HotelName</th>
                        <th runat="server">FirstName</th>
                        <th runat="server">LastName</th>
                        <th runat="server">City</th>
                        <th runat="server">Gender</th>
                        <th runat="server">HotelOption</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>

So, we now get this:

So, note how we can add as much information, or layout to each section.

Sometimes a repeater might be better, but ListView tends to be the best choice WHEN you start to need fancy layout, or things beyond a simple grid.

I could also say move the First/Last Name over to the left side, maybe add a picture of the hotel - it don't matter.

So, as above shows:

Even adding css styles to the grid view and controls is 100% possbile and supported.

But, using the ListView means you using plane jane asp.net controls - no messy template tags, and as you can see, you quite much free to put any kind of markup in each column - including divs or whatever floats your boat.

so, gridview is fine, can be styled with css. However, the INSTANT you go beyond simple grid layouts, then Listview is far better, winds up with less markup, no templated stuff, and tends to support not only more layout options, but also is more HTML friendly.

And for simple, the GV wins, but even above, you can see the total amount of markup for the listview was not much less. GV wins if you let it auto generate columns or just have a few. But when you go custom layout and want to use many different standard asp.net controls, the Listview starts to win big time as above shows.

Same goes for first name, last name and gender.

We can just "bunch" them up into the markup for the one column. Say like this:

                <td>
                    <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
                    <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
                    <br />
                    <asp:RadioButtonList ID="RGender" runat="server" 
                        RepeatDirection="Horizontal" 
                        Text='<%# Eval("Gender") %>' 
                        AutoPostBack="true"
                        OnSelectedIndexChanged="RGender_SelectedIndexChanged"
                         CssClass="rMyChoice"  >
                        <asp:ListItem>M</asp:ListItem>
                        <asp:ListItem>F</asp:ListItem>                            
                    </asp:RadioButtonList>
                </td>
                <td><asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' /></td>

Now, remove the last name column - and gender. So we have this:

        <LayoutTemplate>
            <table id="itemPlaceholderContainer" runat="server" border="0" class="table">
                <tr runat="server" style="">
                    <th runat="server">HotelName</th>
                    <th runat="server" style="width:120px">Guest Name</th>
                    <th runat="server">City</th>
                    <th runat="server">HotelOption</th>
                </tr>
                <tr id="itemPlaceholder" runat="server">
                </tr>
            </table>
        </LayoutTemplate>

And now we have this:

So we could actually keep bunching up controls - but nice how I was able to just move the markup from one column shove it into "one" column.