GridView控件的显示，光棒效果和缺货警示，主题皮肤

 

快速回顾
GridView_1快速回顾区：

思路流程（3步）
1.把供应商Id改为供应商（借助了一个DropDownList）
2.实现光棒效果和缺货警示(GridView_Products_RowDataBound事件）
3.在页面加一个DropDownList实现联动
4.主题皮肤

逐步实现：
  1.GridView于Products表绑定，ItemTemplate里加一个DropDownList(数据源与Suppliers绑定)
    编辑DataBindings时和SupplierId绑定（Eval("SupplierId")，在DropDownList的DataBound事件里把
    DropDownList.SelectedItem赋给标签（Label1.Text），并将自己的Visible属性设置为false
  2.在GridView的RowDataBound事件里写代码（每一行绑定一个鼠标移动事件）
  3.主题皮肤
       1.在解决方案资源管理器里 右键网站（添加Asp.Net文件夹下的主题），然后把主题文件拷到这个网站下的
         App_Themes下
       2.在页面空白处（右键属性）-->在属性窗口选择Document（StyleSheetTheme设置选择为WebBlue）
       3.在GridView处（右键属性）-->把CssClass设置为Grid_WebBlue
       4.把下面的代码加在页面的原视图里，具体位置：（标签<asp:GridView>之后，标签<Columns>之前）
        <FooterStyle CssClass="GridFooter_WebBlue" />
        <RowStyle CssClass="GridRow_WebBlue" />
        <EditRowStyle CssClass="GridEditRow_WebBlue" />
        <SelectedRowStyle CssClass="SelectedRow_WebBlue" />
        <PagerStyle CssClass="GridPager_WebBlue" />
        <HeaderStyle CssClass="GridHeader_WebBlue" />
        <AlternatingRowStyle CssClass="GridAltRow_WebBlue" />

关键代码：
    protected void GridView_Products_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {         
            if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == 

DataControlRowState.Alternate)
            {
//缺货警示
                if (Convert.ToInt32(e.Row.Cells[6].Text) <= 10)
                {
                    e.Row.Cells[6].BackColor = System.Drawing.Color.Yellow;
                }
 //光棒效果                
                e.Row.Attributes.Add("onmouseover", 

"currentcolor=this.style.backgroundColor;this.style.backgroundColor='#aabbcc';");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;");
            }
        }
    }

//显示供应商名称（本来是供应商Id）
    protected void DropDownList_Supplier_DataBound(object sender, EventArgs e)
    {
        Label lblSupplier = ((DropDownList)sender).Parent.FindControl("lblSupplier") as Label;
        lblSupplier.Text = ((DropDownList)sender).SelectedItem.ToString();
    }
问题：
1.lbl_Supplier绑定还是可以赋值(是的)
2.JavaScript变量都要小写（对）
3.DropDownList在模板和页面都有 可以重用吗？（数据源可以重用）

 

图文显示：GridView显示级联表数据
   目标：GridView显示Room表 其中的TypeId用（RoomType表）的TypeName替换

如果图打不开看详细的文字说明
         1.把数据库加好-->新建一个页面GridView_Sql.aspx(配置好连接字符串)-->拖一个GridView到GridView_Sql.aspx页面（点击GridView右上方的小三角）-->选择数据源里（选新建数据源）-->选数据库（命名为SqlDataSource_Room，然后选择好连接字符串，再选择Room，列在*前打勾，确定）-->回到页面（再次点击GridView右上方的小三角）-->点编辑列（在选定的字段下，选中TypeId，点确定按钮上面的超链接，将此字段转化为模板）-->回到页面（再次点击GridView右上方的小三角，点最下面的编辑模板，拖一个DropDownList到ItemTemplate里，并且将其和数据库绑定，只不过这次选择RoomType表，列选择TypeId和TypeName，然后把DropDownList显示的字段为TypeName，值为TypeId）-->点击DropDownList右上面小三角（将SelectedValue和字段TypeId绑定）-->右键DropDownList（选属性，找到闪电图标，双击下面的DataBound事件）-->加2句代码（目的，将DropDownList的项既（TypeName）赋给一个标签）
        Label lbl_Type = ((DropDownList)sender).Parent.FindControl("Label1") as Label;
        lbl_Type.Text = ((DropDownList)sender).SelectedItem.ToString();
-->然后，将DropDownList右键（在属性里把Visible设为false）-->运行就可以看到TypeId下的值变成了TypeName

下面是图文描述
1.添加一个数据库并把连接字符串配好，拖一个GridView到页面
如何配置连接字符串：双击数据库，找到表，拖一个表到页面，再把拖的表删掉，打开Web.config看到有形如下面的代码
表示已经配置好了，其中name表示连接字符串的键，connectionString表示它的值
  <connectionStrings>
    <add name="DatabaseConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

2.点GridView右上方小三角，再选择并新建数据源（选数据库），选Room表（列为*）

3.继续点GridView右上方小三角，点编辑列，在选定的字段下，选中TypeId并转化为模板

4.继续点GridView右上方小三角，进入编辑模板，拖一个DropDownList到ItemTemplate里，并且将其和数据库绑定，这次选择RoomType表，列选择TypeId和TypeName，然后把DropDownList显示的字段为TypeName，值为TypeId

5.这次点DropDownList右上面小三角，点编辑DataBinding将SelectedValue和字段TypeId绑定，
右键DropDownList（选属性，找到闪电图标，双击下面的DataBound事件，加2句代码
Label lbl_Type = ((DropDownList)sender).Parent.FindControl("Label1") as Label;
lbl_Type.Text = ((DropDownList)sender).SelectedItem.ToString();
然后，将DropDownList右键（在属性里把Visible设为false）,全部保存后运行页面就可以看到效果了