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

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();
}