asp.net 学习之路之gridView控件

淡淡的烟草味﹌ 2022-08-08 12:44 194阅读 0赞

笔者这里主要是针对 上篇博文中使用到的控件gridView使用进行总结：

先来看看效果吧：

![Center][]

对，上面承载了很多数据的表格就是gridView。笔者是并不是做牛掰的开发， 控件是自己拖上去的。

先来说说把，要让拖上去的控件显示数据：1，得给gridView指定数据源。2，得给gridView绑定数据源。3，记得把gridView的Visible属性设置为true。

感觉很多简单，就是这样3步，笔者个人觉得微软封装的太完美了。gridView 会根据所指定的数据源进行显示。

还是来看看代码是怎么写的吧：

string initStr = "select * from stuInfo";
                        DataSet ds = AccessHelper.dataSet(initStr);
                        //ds.Tables[0].Columns[1].ReadOnly = true;
                        ds = Calc(ds);
                        ///--指定数据源
                        GridView3.DataSource = ds.Tables[0];
                        ///---绑定数据源
                        GridView3.DataBind();

准确的说， gridview显示数据就是这样2步，因为，拖上去的gridview的属性：Visible是默认设置成true的。

ds = Calc(ds);

这行代码是做的统计。因为在数据库设计的表格里面就没有平均分与总成绩：

![Center 1][]

说到数据库，DataSet， gridview三者之间的关系。笔者用下面的一张简易图标来说明：

![Center 2][]

DataSet虽然是来自数据库， 但是吗，我们可以手动写代码 来改写DataSet对象里面的内容，比如，最上面展示的博文中，平均分与总成绩就是 笔者自己手动写进DataSet对象里面的，再调用gridview显示出来。

走远了~~~~~

gridview设置主键的方法：

1，代码实现：

string[] IDStr = new string[] { "ID" };
                        GridView3.DataKeyNames = IDStr;     ///---给gridview s设置主键

2，手动实现，在gridview的属性里面设置：

![Center 3][]

再来说说上面gridview上面的“编辑 与删除”：这里并不是笔者手动写代码实现的，而是将gridview上面的本来就有的“编辑”“删除”按钮个显示了出来：

![Center 4][]

当你这样设置了后，你就会法发现，在运行网页后，gridview的第一列就会出现编辑与删除了。但是，当你点击删除与编辑，要报错，因为还没有写编辑与删除的事件代码，我们这样做，只是设置了显示按钮，gridview并没有为我们生成对应的代码。当然，gridview也有对应按钮的事件， 同样在其属性里面，找到  
![Center 5][]

双击对应事件，VS就会为我们 生成对应的代码事件，接着，我们在生成的对应代码事件里面写上对应的处理代码就行了。

笔者是这样写的删除代码的：

///--------------------------------------------------------------------------------------------------------
                string delStr = "delete * from stuInfo where ID = '" + GridView3.DataKeys[e.RowIndex].Value + "'";
                ///QueryTextBox.Text = delStr;/// GridView3.DataKeys[e.RowIndex].Value.ToString();
               ///AccessHelper.excuteSql(delStr);
    
                ///----------------------------------------------------------------------------------------
                /---连接数据库字符串
                string connStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " + HttpContext.Current.Server.MapPath("res\\DB\\stu133.mdb") + " ";
                OleDbConnection conn = new OleDbConnection(connStr);
                OleDbCommand command = new OleDbCommand(delStr);
                command.Connection = conn;
                conn.Open();
                command.ExecuteNonQuery();
                conn.Close();
                ///----------------------------------------------------------------------------------------
                ///---更新数据库
                string oleStr = "select * from stuInfo";
                DataSet ds1 = AccessHelper.dataSet(oleStr);
    
                if (ds1.Tables[0].Rows.Count > 0)
                {
                    GridView3.DataSource = ds1;
                    GridView3.DataBind();
                    ///------修改结果提示
                    Response.Write("<script>alert('删除成功')</script>");
                }

关于数据库操作的这部分代码，我就没用上篇博文中提到的那个AccessHelper.excuteSql()函数了，方便自己再次加深印象吧。

再接看看编辑的代码吧：

GridView3.EditIndex = -1;
                string upDataStr = "select * from stuInfo";
                DataSet ds = AccessHelper.dataSet(upDataStr);
                if (ds.Tables[0].Rows.Count > 0)
                {
                    GridView3.DataSource = ds;
                    GridView3.DataBind();
                }

编辑的代码没得啥要说的。

我们点击编辑后，编辑按钮的那个地方会变成更新按钮：

![Center 6][]

这样我们在更新的事件函数里面写上更新的代码就行了。

笔者是这样做的更新：

string[] IDStr1 = new string[] { "ID" };
                GridView3.DataKeyNames = IDStr1;     ///---给gridview s设置主键
    
                GridViewRow Row = (GridViewRow)GridView3.Rows[e.RowIndex];
                ///---获取ID
                string IDStr = GridView3.DataKeys[e.RowIndex].Value.ToString();    
                ///---引用
                TextBox nameBox = (TextBox)Row.Cells[2].Controls[0];
                TextBox genderBox = (TextBox)Row.Cells[3].Controls[0];
                TextBox mathBox = (TextBox)Row.Cells[4].Controls[0];
                TextBox ENGBox = (TextBox)Row.Cells[5].Controls[0];
                TextBox DataBaseBox = (TextBox)Row.Cells[6].Controls[0];
    
                ///------------------------------------
                GridView3.EditIndex = -1;
                ///--更新语句
                string upDateStr = "update stuInfo set name = '" + nameBox.Text + "', gender = '" + genderBox.Text + "', 高数= '" + mathBox.Text + "',英语= '" + ENGBox.Text + "',数据库= '" + DataBaseBox.Text + "' where ID = '" + IDStr + "'";
                AccessHelper.excuteSql(upDateStr);
                /---更新数据库
                //string connStr = "Provider=Microsoft.Jet.4.0;Data Source = "+HttpContext.Current.Server.MapPath("res\\DB\\stu133.mdb")+"";
                //OleDbConnection conn = new OleDbConnection(connStr);
                //OleDbCommand command = new OleDbCommand(upDateStr);
                //command.Connection = conn;
                //conn.Open();
                //command.ExecuteNonQuery();
                //conn.Close();
    
                ----刷新数据库后，显示更新结果
                string upDateString = "select * from stuInfo";
                DataSet ds = Calc(AccessHelper.dataSet(upDateString));
                //ds = Calc(ds);
                ///---更新成功
                if (ds.Tables[0].Rows.Count > 0)
                {
                    GridView3.DataSource = ds;
                    GridView3.DataBind();
                }

因为要同步到数据库嘛，这里首先获取gridview上修改后的数值，接着在将获取的数值存入数据库。

考虑到操作的人性化，当我们点击取消按钮的时候，是不是应该保持数据不变呢。下面就是取消按钮事件的代码：

很简单，重新设置索引，并重新读取数据库内容再显示。笔者这是比较笨的方法，看到此处的你，要是有新招，麻烦支招哦

续~~~~~~~~~~~~~~~~~~~~~~

[Center]: /images/20220805/20abff6bf1fe45ceb6501f666f2f88da.png
[Center 1]: /images/20220805/39aa9b01eae349588ede5d70cadb4e9b.png
[Center 2]: /images/20220805/f1328ad0fa674630b8b958ca463bfea0.png
[Center 3]: /images/20220805/167e2c99c8f647048c51c11352b103f6.png
[Center 4]: /images/20220805/05efe9912a7d45a089c237b8824bdbb1.png
[Center 5]: /images/20220805/b9652009591840a79a029289b2ec5de4.png
[Center 6]: /images/20220805/004418c532f34077a5d5ac6d41cae6ab.png