Gridview

背景：使用info、nation、work、family四个表；使用Linq to sql连接。

入门学习gridview控件，一步步学习Gridview的功能

我们先来让数据显示出来：

1、方法一：新建一个aspx页面，添加一个gridview控件，右键‘查看代码’，在代码视图简单的绑定数据浏览器预览实现如下效果

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    private MyDBDataContext _context = new MyDBDataContext();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            var query = _context.Info;
            GridView1.DataSource = query;
            GridView1.DataBind();

        }
    }
}

2、方法二： 可视化配置数据源：拖控件“Gridview”、“SqlDataSource”给SqlDataSource配置数据源--选择数据连接--下一步，指定要显示的表（这里选择info表--下一步--完成；

接下来给gridview选择数据源，浏览器预览效果跟方法一是一样的。

数据源：SqlDataSource,LinQDataSource,ObjectDataSource..根据需要进行选择使用吧。。。

注意：使用LinQDataSource时，必须要有linq to sql类来做上下文对象。

---

学会了简单的数据绑定我们来看看如何控制它的外观吧

（一）控制整体

1.方法一：自动套用样式：细心的朋友在看上面的显示效果图肯定已经察觉到猫腻，为啥我的效果跟你的不一样呢？

其实很简单，这样做：GridView右上角的智能菜单--“自动套用格式”，微软已经为我们定值了这么多好看的样式选一个自己喜欢的吧····如果这些默认的样式满足不了你的需求，那么看方法二我们来私人定制。
2.方法二：手动设置样式：
GridView属性中的“外观”和“样式”类别的属性来调整整体外观的风格。

外观、样式、布局····那么多可以自定义的东东，等着喜欢研究折腾的你，赶快动手试试吧，定制一个属于自己的样式。

改变后的样式我们预览查看页面源码不难发现：gridview被编译生成为table表格，而我们刚刚设置的样式都是已行内样式的方式实现的。有意思吧

要注意的属性：CssClass(要设置的css类名)/ShowFooter（是否显示控件脚注）/GridLines（单元格网线设置）

（二）控制列

Columns属性或右上角的智能菜单中的“编辑列”来实现
在“编辑列”的对话框中，设置列的类型和属性。

（三）控制行

GridView的生成过程：逐行创建，逐行绑定。
创建完成后会触发RowCreated事件
绑定完成后会触发RowDataBound事件。
以后主要使用的事件是RowDataBound，很少使用RowCreated

---

数据删除编辑等操作

（四）删除数据操作

LinQDataSource启用删除功能=>Gridview启用删除

要单行删除数据我们要做的工作有这些：

1、提示用户是否要“确认删除”

方法一：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        //方法一：RowDataBound事件代码：
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            LinkButton btnDel = e.Row.Cells[5].Controls[0] as LinkButton;
            btnDel.OnClientClick = "retum confirm('确认要删除吗？')";
        }
    }

方法二：用JQuery实现（非侵入式）

首先：gridview编辑列给删除代码添加cssclass样式“del”

然后：给aspx页面引入query文件编写相应的提示代码

<script src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".del").click(function () {
                return confirm("确认删除吗？");
            });
        });
    </script>

2、获取要删除的行数据的Code值

先来了解两个关键的事件RowDeleting--（执行删除之前触发的）、RowDeleted--（执行删除之后触发的）

方法一：在RowDeleting事件中写代码

//删除执行之前要执行的代码：
        //删除工作简历和家庭情况
        /////获取主键
        //string key = e.Keys[0].ToString();//不推荐用索引
        string key2 = e.Keys["Code"].ToString();//必须保证gridview中的datakeyname属性有值
        /////执行删除
        var query = _Context.Work.Where(p => p.InfoCode == key2);
        var query2 = _Context.Family.Where(p => p.InfoCode == key2);
        _Context.Work.DeleteAllOnSubmit(query);
        _Context.Family.DeleteAllOnSubmit(query2);
        _Context.SubmitChanges();

在RowDeleted添加代码

protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e)
    {
        //提示删除成功
        Literal1.Text = "<Scrip>alert('删除成功');</Script>";
    }

方法二：（推荐）

//获取主键
        string key = e.Keys["Code"].ToString();
        //删除有关联的表（三个表）
        var query = _Context.Info.Where(p => p.Code == key);
        Info data = query.Single();
        _Context.Work.DeleteAllOnSubmit(data.Work);
        _Context.Family.DeleteAllOnSubmit(data.Family);
        _Context.Info.DeleteOnSubmit(data);
        _Context.SubmitChanges();
        ////刷新页面，阻止事件继续前行
        GridView1.DataBind();
        e.Cancel = true;//阻止事件序列
        Literal1.Text = "<Scrip>alert('删除成功');</Script>";

3、删除与本行数据相关联的数据（存在外键关联的数据）（代码如上）

4、刷新页面，提示删除成功（代码如上）

 

接下来我们不用微软提供的“启用删除”，做一个超链接实现删除功能

编辑列添加一个HyperLinkField--自定义删除设置绑定字段“code”、绑定格式“del.ashx?id={0}”

新建一个del.ashx一般处理程序实现删除操作

<%@ WebHandler Language="C#" Class="del" %>

using System;
using System.Web;
using System.Linq;
using System.Data.Linq;

public class del : IHttpHandler
{
    private MyDBDataContext _Context = new MyDBDataContext();
    public void ProcessRequest(HttpContext context)
    {
        string id = context.Request["id"].ToString();
        var query = _Context.Info.Where(p => p.Code == id);
        Info data = query.Single();
        _Context.Work.DeleteAllOnSubmit(data.Work);
        _Context.Family.DeleteAllOnSubmit(data.Family);
        _Context.Info.DeleteOnSubmit(data);
        _Context.SubmitChanges();
        context.Response.Redirect("~/Default2.aspx?del=yes");
    }
}

扩展下：编辑列=>字段选择HyperLinkField（双击添加两个）

这里我添加了两个字段分别是code、name；修改它们的属性，如图：（Name）

设置DataNavigateUrlField为“Url”
设置HeaderText为"Name"

Url是Info表中一个字段，用于直接存储url地址,当点击的时候作为超链接直接链接到存储的url地址

 

如图：（Code）

设置DataNavigateUrlField为主键列Code
设置DataNavigateUrlFormatterString为Default3.aspx?id={0}
设置HeaderText为"Code"

部分属性解释：

HeaderText：该超链接列的页眉文本
FooterText：该超链接列的页脚文本
Text：超链接列中的链接文字，这个属性用来把该列所有单元格的超链接的文字设成相同的。
DataTextField：指定数据源的一个字段名，把该字段的内容作为超链接列的超链接文本。如果同时设置了Text属性和DataTextField属性，则忽略Text属性的设置。
DataTextFormatterString：为绑定显示的DataTextFied数据设置显示格式
DataNavigateUrlField：指定数据源的一个字段名，该字段的内容作为超链接列导向的网址，或者把该字段的值作为超链接传递的参数。
DataNavigateUrlFormatterString：为DataNavigateUrlField列设置超链接的导航格式。如Default7.aspx?id={0}则该列的超链接导航到Default7.aspx页面，并且把DataNavigateUrlField中指定的字段值赋给id，作为查询字符串传递至Default3.aspx页面
        如果超链接列需要向目标页面传递多个字段的值作为参数的话，那么请在DataNavigateUrlField中指定多个字段名并用逗号隔开，然后再在DataNavigateUrlFormatterString属性中用"&"链接多个参数(如：default3.aspx?id={0}&name={1})

（四）编辑数据操作