ASP.NET - DataGridView 进阶 之 Ajax无刷新操作

 本篇文章主要讲到 DataGridView 控件的数据绑定，RowDataBound事件来添加光棒效果和脚本，RowDeleting事件，RowUpdating事件，以及如何使用ScriptManager和UpdatePanel控件来实现Ajax无刷新技术。

一：DataGridView的数据绑定。

首现我们拖一个DataGridView控件到.aspx页面中，然后绑定你需要显示的列，DataGridView使用的是模版来定义列，下面介绍一下模版列：

 

列字段类型	说明
BoundField	显示数据源中某个字段的值。这是 GridView 控件的默认列类型。
ButtonField	为 GridView 控件中的每个项显示一个命令按钮。 这使您可以创建一列自定义按钮控件，如“添加”按钮或“移除”按钮。
CheckBoxField	为 GridView 控件中的每一项显示一个复选框。 此列字段类型通常用于显示具有布尔值的字段。
CommandField	显示用来执行选择、编辑或删除操作的预定义命令按钮。
HyperLinkField	将数据源中某个字段的值显示为超链接。此列字段类型使您可以将另一个字段绑定到超链接的 URL。
ImageField	为 GridView 控件中的每一项显示一个图像。
TemplateField	根据指定的模板为 GridView 控件中的每一项显示用户定义的内容。 此列字段类型使您可以创建自定义的列字段。

 最常用的两个模版就是 BoundField 和TemplateField 。

 1     <asp:GridView ID="gvDepartList" runat="server" AutoGenerateColumns="False" 

 2         Height="108px" Width="600px"  OnRowDeleting="gvDepartList_RowDeleting" RowDataBound="gvDepartList_RowDataRound">

 3         <Columns>  

 4         <asp:TemplateField HeaderText="部门名称" >

 5             <ItemTemplate>

 6                   <asp:Label runat="server" style="text-align:center" Text='<%#  Eval("DepartName") %>'   /> 

 7             </ItemTemplate>

 8         </asp:TemplateField>

 9           

10             <asp:BoundField HeaderText="机构"   DataField="BranchId" /> 

11             <asp:BoundField HeaderText="负责人" DataField="PrincipalUser" />

12             <asp:BoundField HeaderText="联系电话" DataField="ConnectTelNo" />

13             <asp:BoundField HeaderText="移动电话" DataField="ConnectMobileTelNo"/>

14             <asp:BoundField HeaderText="传真" DataField="Faxes" />

15             <asp:TemplateField HeaderText="修改">

16                 <ItemTemplate>

17                       <asp:ImageButton ID="ImageButton1" ImageUrl="../images/edit.gif" CommandArgument='<%#Eval("DepartId") %>' CommandName="delete" runat="server" />

18                 </ItemTemplate>

19             </asp:TemplateField>

20             <asp:TemplateField HeaderText="删除">

21                 <ItemTemplate>

22                     <asp:ImageButton ImageUrl="../images/delete.gif" CommandArgument='<%#Eval("DepartId") %>' CommandName="delete" runat="server" />

23                 </ItemTemplate>

24             </asp:TemplateField>

25         </Columns> 

26     </asp:GridView> 

 

 那么我们在页面中Page_load方法中加入一段代码：

 protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

               gvDepartList.DataSource= new DepartInfoManager().GetDepartInfos(-1);

               gvDepartList.DataBind();

            }

        }

 

二：DataGridView如何添加光棒效果。

如果我们想添加一个DataGridView的光棒效果，就是每一行鼠标悬浮上去变动背景色啦。

       /// <summary>

        /// 动态注册脚本(在GridView控件呈现之前) 光棒效果

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        protected void gvUsers_RowDataBound(object sender, GridViewRowEventArgs e)

        {

            //此处判断只有在数据行在进行脚本注册

            if (e.Row.RowType == DataControlRowType.DataRow)

            {

                //光棒效果

                  e.Row.Attributes.Add("onmouseover","currentcolor=this.style.backgroundColor;this.style.backgroundColor='#6699ff'");

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



                LinkButton lnkbtnDel = e.Row.FindControl("lnkbtnDel") as LinkButton;

                lnkbtnDel.Attributes.Add("onclick", "return confirm('确定删除吗?')");

            }

        }

三、DataGridView的RowDeleting事件。

现在重点来了，怎么一行的数据呢？既然是删除，我们肯定是要根据一条数据的ID来删除了，看到页面中的倒数第二列，是一个ImageButtom控件，这个控件是放了一个删除按钮的小图标，CommandArgument是干什么的呢？CommandName又是干什么的呢？CommandArgument就是指定我们要操作的参数，CommandName就是指令这个按钮是要干什么？这里用到的是删除，我们写上Delete。在后面我会讲到udate。

<asp:TemplateField HeaderText="删除">

                <ItemTemplate>

                     <asp:ImageButton ImageUrl="../images/delete.gif" CommandArgument='<%#Eval("DepartId") %>' CommandName="delete" runat="server" />

                </ItemTemplate>

             </asp:TemplateField>

 接下来就是后台操作代码了，找到DataGridView控件的事件面板>选中RowDeleting事件>双击 。可以看到这个DataGridView绑定了一个RowDeleting事件，这个事件就是用来删除的。然后我们在这个事件写上这样的代码。 

 

/// <summary>

        /// 删除选中的行

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        protected void gvDepartList_RowDeleting(object sender, GridViewDeleteEventArgs e)

        {


　　　　　　　//既然是删除，那我们肯定要根据ID来删除了，先获取到删除按钮

            　　 ImageButton buttom = gvDepartList.Rows[e.RowIndex].FindControl("btnDelete") as ImageButton;

　　　　　　　　//前面我们在删除按钮的CommandArgument保存了ID值，现在作用来了。

 　　            string departId = buttom.CommandArgument.ToString();

            if (manage.DeleteDepart(departId))

            {

                //删除成功就重新绑定一下数据
                BindDepartInfos();//重新绑定数据

            }

            else

            {
　　　　　　　　//删除失败了提示删除失败，ajax处理数据，弹框必须要用ScriptManager提供的脚本注册方法

                 ScriptManager.RegisterClientScriptBlock(this.Page,this.GetType(),"alter", "alert('删除失败!');",true);
            }



        }

   为了更好的用户体验，我们可以不使用这个Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "<script>alert('删除成功!');</script>");
  可以选择在页面中显眼的地方放一个label控件，设计Visible=false;隐藏它，然后删除成功后，利用这个Label控件来提示用户，删除成功！ 

  还有另外一种方法绑定DataGridView的键值： gvDepartList.DataKeyNames = new string[] { "id"}，这样来获取ID进行删除操作。

四、DataGridView的更新事件.

现在来做更新功能，首现找到DataGridView控件的Updating事件，双击。前面我们已经在每一行放置了一个修改列，每一列中都是一个ImageButton的删除图标。设置其CommandName="update"，CommandArgument='<%#Eval("DepartId") %>'，然后在Updating事件

  

        /// <summary>

        /// 修改选中行的数据

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        protected void gvDepartList_RowUpdating(object sender, GridViewUpdateEventArgs e)

        {

            //先找到更新按钮，这里我起名是btnUpdate，在这里就直接可以获取id值来进行更新操作了。

            ImageButton buttom = gvDepartList.Rows[e.RowIndex].FindControl("btnUpdate") as ImageButton;

            string departId = buttom.CommandArgument.ToString();

            //然后跳到更新页面实现更新操作

            Response.Redirect("~/PersonManage/SaveDepartInfo.aspx?departId="+departId);

        }

 

 

五：使用全局脚本控制ScriptManager控件，和UpdatePanel来无刷新删除数据。

  现在我们可以看到每次删除一条数据，页面就刷的一下，更新了，也就是页面重新加载了一遍。

  由于某种需求，我们不想每次删除后，页面就重新加载，这样既浪费时间，又浪费资 源。

  现在就来使用微软提供的Ajax 组件来实现无刷新技术。

  首现需要用到ScriptManager控件(ScriptManager掌管着客户端Ajax页的多有脚本,并在页面中注册Ajax类库,用来实现页面的局部更新和对Web服务的调用)

  和UpdatePanel控件(UpdatePanel就是设置页面中异步局部更新，依赖于ScriptManager，也就是说我们要用UpdatePanel控件就必须要拖出来一个ScriptManager控件）

 

我们先来了解一下UpdatePanel控件的两种更新模式：

1、UpdateMode=Always 表示每次Ajax方式的PostBack或普通的PostBack都能引起UpdatePanel中内容的更新

2、UpdateMode=Conditional 表示有触发条件的更新。通常和ChildrenAsTriggers这个属性使用，ChildrenAsTriggers表示UpdatePanel内的子控件引起的PostBack是否引起内容更新。

具体代码，我们先拖入一个ScriptManager控件（注意：如果该页面继承的母版页同样使用了ScriptManager控件,那么在这里就要使用ScriptManagerProxy控件）

然后再放入一个UpdatePanel控件：

 <asp:ScriptManagerProxy runat="server" />

 <asp:UpdatePanel runat="server" >
       <ContentTemplate>
                 <asp:GridView ID="gvDepartList" />

　　</ContentTemplate>

　　<Triggers>

　　</Triggers>

<asp:UpdatePanel>

可以看出，UpdatePanel控件的使用非常简单，只需要把更新的内容放入UpdatePanl控件的<ContentTemplate></ContentTemplate>标签之间，在<ContentTemplate/>控件之间引起的任何回传都不会引起整个页面的刷新，而只会刷新这部分页面等内容。

那<Triggers></Triggers>标签是干什么的呢？这个就是前面说到的有触发条件的更新，

通常会在Triggers属性标签中写如这样一段代码：

<asp:AsyncPostBackTrigger ControlID="" EventName="" />

ControlID：表示哪一个控件来触发这个UpdatePanel的ContentTemplate标签中的内容发生回传

EventName：表示这个ControlID控件的哪一个事件来引发回传,比如Click,SelectedIndexChanged，等等。

那假如我想实现多个控件的某个事件都能引起这个UpdatePanel内容的回传呢,

细心可以发现触发器的标签是个复数形式，那么多个按钮都可以实现UpdatePanel的回传就可以这样写：

 　<Triggers>

　　　　<asp:AsyncPostBackTrigger ControlID="btnSearchById" EventName="Click" />

　　　　<asp:AsyncPostBackTrigger ControlID="ddlDeparts" EventName="SelectedIndexChanged" />

　　</Triggers>

 这样当我们点击btnSearchById按钮和选中ddlDeparts的项的时候就都可以实现UpdatePanel里面DataGridView内容无刷新显示了。