【GridView渐进全解】第三部分与DetailsView配合实现删改增

【接上文】

目录

一、准备工作

二、将选择改为“操作”

三、新建数据源增加Where字句

四、添加一个面板Panel控件

五、添加DetailsView控件

六、美化DetailsView

1.外观美化

2.表格内容居中

3.项目名称居中

七、添加按钮并美化

八、代码处理准备

1.页码初始化时，需要隐藏“操作”面板

2.处理点击GridView“操作”按钮代码

3.处理返回按钮

九、DetailsView代码

1.接收按钮发送的命令

2.编辑后代码

3.新建后代码

4.删除后代码

十、删除前提醒

上篇文章美化了GridView外观后，发现“选择”按钮单击后的本行“加亮”效果没有了。其实大可不必遗憾，我们完全可以利用这个按钮，实现对记录的“操作”（增、删、改）。

本期文章就要实现这个“数据操作”功能，解决数据库的“增、删、改”的操作。为了深入了解ASP.Net，这里采用DetailsView控件配合GridView共同实现。

一、准备工作

在GridView控件中隐藏“密码”列，留作详细时查看

选中GridView控件→编辑菜单→编辑列

选定的字段→密码→删除→确定

启动调试后效果：

二、将选择改为“操作”

选中GridView控件→编辑菜单→编辑列→选定的字段→“选择”→属性→SelectText→“操作”→确定

页面效果：

三、新建数据源增加Where字句

工具箱→数据→SqlDataSource→拖入页码→控件编辑菜单→配置数据源

这里跟以前的配置类似，到配置“Select语句”这一页是要注意→选择Where按钮

在列中选择“id”→有消防选择“=”→源选择“Control”→参数属性的控件ID选择“GridView1”→添加

确定后回到“Select语句”这一页→“高级”→生成Insert、Update和Delete语句→确定

最后“测试查询”后“完成”

四、添加一个面板Panel控件

这个面板控件的作用是包含一个DetailsView控件、一个返回按钮。这样不需要操作数据是就可以很好的整体隐藏起来。

五、添加DetailsView控件

工具箱→数据→DetailsView→拖入页码→选择数据源：SqlDataSource2→启用“插入”、“编辑”、“删除”

六、美化DetailsView

1.外观美化

选中控件→属性→CssClass→输入：table table-bordered table-striped m-auto

注：需要提前引用Bootstrap的样式表，可以参看前文

2.表格内容居中

DetailsView→编辑菜单→编辑字段→选定的字段→选择一个字段→属性→样式→ItemSyle→CssClass→输入：text-center align-middle

3.项目名称居中

操作同上，只是需要修改的属性样式为HeaderSyle

最终效果：

七、添加按钮并美化

从工具箱拖入按钮→按钮属性→ID输入：btnGoBack→CssClass输入：btn btn-primary mt-3→Text输入：返回

八、代码处理准备

1.页码初始化时，需要隐藏“操作”面板

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.panDetails.Visible = false;
        }
    }
代码解读

2.处理点击GridView“操作”按钮代码

输入代码：

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "Select")
        {
            this.GridView1.Visible = false;//隐藏GridView
            this.panDetails.Visible = true;//显示”操作”面板
        }
    }
代码解读

GridView有个“命令”子系统，特定的CommandField可以发出“命令”，触发的事件就是RowCommand，因此在其过程中可以通过e.CommandName获取发出的具体命令，从而进行相应处理。

3.处理返回按钮

protected void btnGoBack_Click(object sender, EventArgs e)
    {
        this.GridView1.Visible = true;
        this.panDetails.Visible = false;
}
代码解读

目前效果：

九、DetailsView代码

这里的代码是指处理“改”、“删”、“增”相关功能实现的代码。这里要用到DetailsView的命令系统，与GridView基本一致，需要给DetailsView添加ItemCommand处理过程。

1.接收按钮发送的命令

选中DetailsView控件→属性→动作→ItemCommand→双击添加代码

输入处理过程代码

protected void DetailsView1_ItemCommand(object sender, DetailsViewCommandEventArgs e)
    {
        Response.Write(e.CommandName);
        DetailsView detailsView = sender as DetailsView;
        switch (e.CommandName)
        {
            case "Cancel":
                this.GridView1.Visible = false;
                this.panDetails.Visible = true;
                this.DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
                break;
            case "Edit":
                this.GridView1.Visible = false;
                this.panDetails.Visible = true;
                this.DetailsView1.ChangeMode(DetailsViewMode.Edit);
                break;
            case "New":
                this.GridView1.Visible = false;
                this.panDetails.Visible = true;
                this.DetailsView1.ChangeMode(DetailsViewMode.Insert);
                break;
            case "Insert":
                //GridView到最后一页
                this.GridView1.PageIndex = this.GridView1.PageCount + 1;
                break;
            default:
                break;
        }
    }
代码解读

到这里，两个控件可以联动，并且DetailsView可以进入对应的“视图”了，但是如果真实操作，会发现“操作”正常（添加、修改、删除），就是完成后（比如：更新），页码将是空白。

这是因为我们还没处理“操作”之后的代码，对应事件如下：

2.编辑后代码

DetailsView→属性→事件→ItemUpdated→双击输入代码

代码：

protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
    {
        this.GridView1.DataBind();//更新GridView
        this.GridView1.Visible = true;//显示GridView
        this.panDetails.Visible = false;//隐藏DetailsView面板
    }
代码解读

3.新建后代码

由于与更新后要实现的代码一致，因此我们可以利用VS的“提取方法”生成一个共用的过程，方便反复调用。

选中代码→菜单“重构”→提取方法→输入新方法名称→确定

新建后的代码：

4.删除后代码

有了RefreshGridView过程就好处理了，代码如下：

protected void DetailsView1_ItemDeleted(object sender, DetailsViewDeletedEventArgs e)
    {
        RefreshGridView();
    }
代码解读

十、删除前提醒

上述所有功能完成后，我们发现一个小问题，就是“删除”时直接完成，“一气呵成”没给用户一个“思考过程”，因此有必要再点击“删除”按钮时，给出一个提示。

这个功能实际上是在“删除”按钮上，加入一小段JS代码，如果用户再次确认删除，“删除”按钮才执行最终的“删除”命令。

这里使用DetailsView的创建完成的事件ItemCreated，在其处理过程中，我们找到“删除”按钮后，添加js代码。

protected void DetailsView1_ItemCreated(object sender, EventArgs e)
    {
        //获取DetailsView按钮总数
        int ControlsCount = DetailsView1.Controls[0].Controls.Count;
        //找到按钮
        LinkButton linkButton = (LinkButton)DetailsView1.Controls[0].Controls[ControlsCount - 2].Controls[0].Controls[2];
        //添加js脚本
        linkButton.Attributes.Add("onclick", "return confirm('确认要要删除这条记录吗？')");
    }
代码解读

说明：

注意：

开启3个按钮时（ “编辑、删除、新建” ），对应控件序号为：0、2、4，因此具体要向那个按钮添加js代码，需要结合DetailsView最终显示的按钮数量决定。

本例三个按钮，“删除”在第二个位置，因此：DetailsView1.Controls[0].Controls[ControlsCount -2].Controls[0].Controls[2]

文章结束。创作图文不易，感谢点赞支持，欢迎收藏、关注我后期文章。