ASP.NET使用GridView控件、DetailsView控件

青旅半醒 2021-09-17 12:20 478阅读 0赞

ASP.NET使用GridView控件绑定列表信息、DetailsView控件绑定详细信息。

**1、 使用GridView完成用户列表的显示**

使用GridView完成用户列表的绑定、分页、数据修改、数据删除、光棒效果。

**1.1 创建UserList.aspx文件**

<asp:GridView ID="gvUser" runat="server" AutoGenerateColumns="False" DataKeyNames="UserId" AllowPaging="True" PageSize="10" 
        OnRowDataBound="gvUser_RowDataBound" 
        OnPageIndexChanging="gvUser_PageIndexChanging" 
        onrowcancelingedit="gvUser_RowCancelingEdit" 
        onrowediting="gvUser_RowEditing" onrowupdating="gvUser_RowUpdating" 
        onrowdeleting="gvUser_RowDeleting">
        <PagerSettings FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" 
            PreviousPageText="上一页" />
        <Columns>
            <asp:BoundField HeaderText="编号" DataField="UserId" ReadOnly="true"/>
            <asp:TemplateField HeaderText="用户名">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("UserName") %>' ></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("UserName") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="创建时间">
                <ItemTemplate>
                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("CreateTime","{0:yyyy-MM-dd}") %>' ></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("CreateTime","{0:yyyy-MM-dd}") %>' ></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:CommandField HeaderText="修改"  ShowEditButton="True" />
            <asp:CommandField HeaderText="删除"  ShowDeleteButton="True" />
            <asp:HyperLinkField HeaderText="详细" Text="查看" DataNavigateUrlFields="UserId" DataNavigateUrlFormatString="/Manager/UserDetail.aspx?UserId={0}" />
        </Columns>
    </asp:GridView>

**1.2 编写后台代码（UserList.aspx.cs）**

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            FillData();
        }
    }
    
    /// <summary>
    /// 绑定数据
    /// </summary>
    protected void FillData()
    {
        gvUser.DataSource = userInfoDAL.GetUserList();
        gvUser.DataBind();
    }
    
    /// <summary>
    /// 翻页事件
    /// </summary>
    protected void gvUser_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        gvUser.PageIndex = e.NewPageIndex;
        FillData();
    }
    
    /// <summary>
    /// 光棒效果
    /// </summary>
    protected void gvUser_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;");
        }
    }
    
    /// <summary>
    /// 切换到行修改
    /// </summary>
    protected void gvUser_RowEditing(object sender, GridViewEditEventArgs e)
    {
        gvUser.EditIndex = e.NewEditIndex;
        FillData();
    }
    
    /// <summary>
    /// 取消行修改
    /// </summary>
    protected void gvUser_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        gvUser.EditIndex = -1;
        FillData();
    }
    
    /// <summary>
    /// 提交修改
    /// </summary>
    protected void gvUser_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        UserInfo user = new UserInfo();
        user.UserId = (int)gvUser.DataKeys[e.RowIndex].Value;    //用户编号作为主索引，是在GridView的DataKeyNames="UserId"设置的
        user.UserName = ((TextBox)gvUser.Rows[e.RowIndex].Cells[1].FindControl("TextBox2")).Text;
        userInfoDAL.UpdateUserInfo(user);
        gvUser.EditIndex = -1;
        FillData();
    }
    
    /// <summary>
    /// 执行删除
    /// </summary>
    protected void gvUser_RowDeleting(object sender, GridViewDeleteEventArgs e)
    {
        int userId = (int)gvUser.DataKeys[e.RowIndex].Value;    //员工编号作为主索引，是在GridView的DataKeyNames="UserId"设置的
        Response.Write("执行删除编号：" + userId + "的用户");
    }

**2、使用DetailsView用户信息详细**

使用DetailsView用户信息详细、修改、新增。

**2.1 创建UserDetail.aspx文件**

<asp:DetailsView ID="dvUser" runat="server" Height="50px" Width="125px" 
        AutoGenerateRows="False" DataKeyNames="UserId" 
        OnItemCommand="dvUser_ItemCommand" OnModeChanging="dvUser_ModeChanging" 
        OnItemUpdating="dvUser_ItemUpdating" oniteminserting="dvUser_ItemInserting" >
        <Fields>
            <asp:BoundField DataField="UserId" HeaderText="用户编号" ReadOnly="True" InsertVisible="false" />
            <asp:TemplateField HeaderText="用户名">
                <ItemTemplate>
                    <asp:Label ID="lblLoginId" runat="server" Text='<%# Bind("UserName") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("UserName") %>'></asp:TextBox>   
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:CommandField ShowEditButton="True" />
            <asp:CommandField ShowInsertButton="True" />
            <asp:ButtonField CommandName="out" DataTextFormatString="UserList.aspx" Text="返回" />
        </Fields>
    </asp:DetailsView>

**2.2 编写后台代码（UserDetail.aspx.cs）**

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            FillData();
        }
    }
    
    //绑定数据
    private void FillData()
    {
        int userId = Convert.ToInt32(Request.QueryString["UserId"]);
        dvUser.DataSource = userInfoDAL.GetUserById(userId);
        dvUser.DataBind();
    }
    
    //这是使用ButtonFile按键，所以要通过e.CommandName判断一下按下了那个按钮
    protected void dvUser_ItemCommand(object sender, DetailsViewCommandEventArgs e)
    {
        if (e.CommandName == "out")
        {
            Response.Redirect("UserList.aspx");
        }
    }
    
    //点击“CommandFild”相关按钮时，改变dvUser的模式
    protected void dvUser_ModeChanging(object sender, DetailsViewModeEventArgs e)
    {
        //当我们点击“编辑”时，e.NewMode就会返回Edit给ChangeMode()方法,这时dvUser就会切换到编辑界面
        dvUser.ChangeMode(e.NewMode);
        FillData();
    }
    
    //在编辑界面时，点击“更新”就会执行以下代码
    protected void dvUser_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
    {
        UserInfo user = new UserInfo();
        user.UserId = (int)dvUser.DataKey.Value;    //用户编号作为主索引，是在DetailsView的DataKeyNames="UserId"设置的
        user.UserName = ((TextBox)dvUser.FindControl("TextBox2")).Text;
        int result = userInfoDAL.UpdateUserInfo(user);
        if (result != 0)
        {
            Response.Write("<script>alert('更新成功')</script>");
        }
        else
        {
            Response.Write("<script>alert('更新失败')</script>");
        }
        dvUser.ChangeMode(DetailsViewMode.ReadOnly);
        FillData();
    }
    
    //执行新增
    protected void dvUser_ItemInserting(object sender, DetailsViewInsertEventArgs e)
    {
        string name = ((TextBox)dvUser.FindControl("TextBox2")).Text;
        Response.Write("执行新增用户名：" + name);
        dvUser.ChangeMode(DetailsViewMode.ReadOnly);
        FillData();
    }