风影ASP.NET基础教学 10 DetilsView

在许多情况下,常常需要深入一条记录进行研究,此时DetailsView控件就可以大显身手了。使用DetailsView控件可以逐一显示,分页、更新、插入或者删除其关联的数据源中的记录,但它不支持排序。因此,它常用于更新和插入数据。并通常在详细方案中使用。即使数据源是多条记录,该控件也只能显示最前面的一条记录。

默认情况下,DetailsView控件将逐行显示各个字段记录

数据绑定

使用DataSourceID

使用这个属性可以将DetailsView控件绑定到数据源控件,例如我们常用的SqlDataSource控件。当使用DataSourceID属性绑定到数据源时,DetailsView控件支持双向数据绑定。因此除了可以使该控件显示数据之外,只需要设置相关的属性,还可以使他自动支持对绑定数据的分页、插入、更新和删除操作。

<div>
    <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" DataSourceID="SqlDataSource1"></asp:DetailsView>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:con %>" runat="server" SelectCommand="Select * from Books"></asp:SqlDataSource>
</div>

这里我们发现ConnectionString属性是用的配置文件里的连接串。

image
使用DataSource

此属性允许绑定到各种对象,包括ADO.NET数据集、数据读取器以及内存中的结构(集合)。采用此方法,需要为所有附加功能(排序,更新,分页)编写相应代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Bind();
    }
}
 
private void Bind()
{
    DetailsView2.DataSource = DbHelper.Instance.GetDataTable(System.Data.CommandType.Text, "select * from books");
    DetailsView2.DataBind();
}

通过一个简单的DetailsView控件的数据绑定示例。从中可以看出,DetailsView控件显示的数据包括2部分内容,即字段名称和对应的内容并且每次只能显示一条数据。

定义字段

在DetailsView控件中,AutoGenerateRows属性的默认值设置为true,它为数据源中某个可绑定类型的每个字段自动生成了一个绑定字段的对象,有效的绑定类型包括String、DateTime、Decimal、Guid以及基本元素,按其SQL语句的字段顺序,每个字段以文本形式显示在一行中。自动生成行提供了一种显示记录中每个字段的快速简单的方式。

但要使用高级功能,就必须显示声明要包含在DetailsView控件中的行字段。若要声明行字段,首先必须将AutoGenerateRows属性的值设置为false。接着,在DetailsView控件开始和结束标记之间添加<Fields>标记。最后列出想包含在<Fields>之间的行字段。同样,Fields集合也允许编程方式管理控件的行字段。

所有字段控件都派生自DataControlField。不同的字段类型确定控件中各行为。

BoundField 以文本的形式显示内容
ButtonField 显示一个命令按钮,它允许显示一个带有自定义按钮(添加或删除)控件的行
CheckBoxField 显示一个复选框,通常显示bool类型的数据
CommandField 显示用来执行编辑、插入、删除操作的内置命令按钮
HyperLinkField 将数据源中某个字段的值显示为超链接,此行字段类型允许将另一个字段绑定到超链接的URL
ImageField 显示图片
TemplateField 定义模板

 

下面演示如何自定义字段。

<asp:DetailsView ID="DetailsView2" runat="server" Height="50px" Width="125px" AutoGenerateRows="false"> 
    <Fields>
        <asp:BoundField DataField="Id" HeaderText="编号" />
        <asp:BoundField DataField="Title" HeaderText="标题" />
        <asp:BoundField DataField="Author" HeaderText="作者" />
        <asp:BoundField DataField="PublishDate" HeaderText="发布时间" />
    </Fields>
</asp:DetailsView>

运行结果:

image

分页

在DetailsView控件中,可以以分页浏览的形式来逐条查看数据记录。如果是通过它的DataSourceID属性以数据控件SqlDataSource来绑定数据的,那么只需要将DetailsView控件的AllowPageing属性设置为true,便自动打开了分页功能。

但如果是通过它的DataSource属性与DataBind方法来获取数据进行绑定的,那么除了需要将DetailsView控件的AllowPaging属性设置为True之外,还需要处理它的PageIndexChanging事件。

<asp:DetailsView ID="DetailsView2" runat="server" Height="50px" Width="125px" AutoGenerateRows="false" OnPageIndexChanging="DetailsView2_PageIndexChanging" AllowPaging="true"> 
    <Fields>
        <asp:BoundField DataField="Id" HeaderText="编号" />
        <asp:BoundField DataField="Title" HeaderText="标题" />
        <asp:BoundField DataField="Author" HeaderText="作者" />
        <asp:BoundField DataField="PublishDate" HeaderText="发布时间" />
    </Fields>
    <PagerSettings  Mode="NextPreviousFirstLast" NextPageText="下一页" PreviousPageText="上一页" FirstPageText="首页" LastPageText="末页" PageButtonCount="1" Position="Bottom"/>
</asp:DetailsView>

事件

public partial class DetilsViewDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind();
        }
    }
 
    private void Bind()
    {
        DetailsView2.DataSource = DbHelper.Instance.GetDataTable(System.Data.CommandType.Text, "select * from books");
        DetailsView2.DataBind();
    }
 
    protected void DetailsView2_PageIndexChanging(object sender, DetailsViewPageEventArgs e)
    {
        DetailsView2.PageIndex = e.NewPageIndex;
        Bind();
    }
 
}

image

 

添加、修改和删除

上面已经说过了当使用DataSourceID属性绑定到数据源时,DetailsView控件支持双向绑定。因此,除了可以使该控件显示数据以外,只需要设置相关的属性还可以使他自动支持绑定数据的分页,插入,更新和删除操作。即通过将DetailsView控件的AutoGenerateEditButton、AutoGenerateInsertButton、AutoGenerateDeleteButton设置一个或者多个true,可以启动DetailsView控件的内置编辑功能。DetailsView控件将自动添加此功能,使用户能够编辑或删除当前绑定的记录以及插入新的记录。

但如果是通过DataSource和DataBind方法来获取数据的话,这个功能就不能用了,但是可以通过添加处理事件来完成编辑功能,如删除事件ItemDeleting、修改事件ItemUpdating等。

 

DetailsView常用事件
ItemCommand 当单击DetailsView控件中的按钮时发生
ItemCreated 当创建了所有DetailViewRow对象之后发生。此事件通常用于在显示记录前修改该记录的值。
ItemDeleted 在单击删除按钮时,但在数据源删除该记录之后发生。通常用于检查删除操作的结果。
ItemDeleting 在单击删除按钮时,但在数据源删除该记录之前发生。通常用于取消删除操作。
ItemInserted  
ItemInserting  
ItemUpdated  
ItemUpdating  
ModeChanged 用于改变模式之后(编辑、插入、只读)发生。
ModeChanging  
PageIndexChanged  
PageIndexChanging  

 

下面将通过一个具体的示例,来显示如何使用事件处理程序完成DetailsView控件的添加、修改和删除功能。首先,需要在DetailsView控件中添加相关的事件。

<asp:DetailsView ID="DetailsView2" runat="server" Height="50px" Width="125px" AutoGenerateRows="false" OnPageIndexChanging="DetailsView2_PageIndexChanging" AllowPaging="true" DataKeyNames="Id" OnModeChanging="DetailsView2_ModeChanging" OnItemDeleting="DetailsView2_ItemDeleting" OnItemUpdating="DetailsView2_ItemUpdating" OnItemInserting="DetailsView2_ItemInserting"> 
    <Fields>
        <asp:TemplateField HeaderText="编号">
            <ItemTemplate>
                <%#Eval("Id") %>
            </ItemTemplate>
            <InsertItemTemplate>
                自动生成的编号
            </InsertItemTemplate>
            <EditItemTemplate>
                <%#Eval("Id") %> 
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="标题">
            <ItemTemplate>
                <%#Eval("Title") %>
            </ItemTemplate>
            <InsertItemTemplate> 
                <asp:TextBox ID="txt_insert_title" runat="server"  />
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txt_edit_title" runat="server" Text='<%#Eval("Title") %>' />
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="作者">
            <ItemTemplate>
                <%#Eval("Author") %>
            </ItemTemplate>
            <InsertItemTemplate> 
                <asp:TextBox ID="txt_insert_author" runat="server"  />
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txt_edit_author" runat="server" Text='<%#Eval("Author") %>' />
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="时间">
            <ItemTemplate>
                <%#Eval("PublishDate") %>
            </ItemTemplate>
            <InsertItemTemplate> 
                <asp:TextBox ID="txt_insert_publishdate" runat="server"  />
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txt_edit_publishdate" runat="server" Text='<%#Eval("PublishDate") %>' />
            </EditItemTemplate>
        </asp:TemplateField>
         
        <asp:TemplateField HeaderText="价格">
            <ItemTemplate>
                <%#Eval("UnitPrice") %>
            </ItemTemplate>
            <InsertItemTemplate> 
                <asp:TextBox ID="txt_insert_price" runat="server"  />
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txt_edit_price" runat="server" Text='<%#Eval("UnitPrice") %>' />
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="类型">
            <ItemTemplate>
                <%#Eval("CategoryId") %>
            </ItemTemplate>
            <InsertItemTemplate> 
                <asp:TextBox ID="txt_insert_price" runat="server"  />
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txt_edit_price" runat="server" Text='<%#Eval("CategoryId") %>' />
            </EditItemTemplate>
        </asp:TemplateField>
        
        <asp:TemplateField HeaderText="操作">
            <ItemTemplate>
                <asp:Button ID="btnEdit" runat="server" Text="编辑" CausesValidation="false" CommandName="Edit" />
                <asp:Button ID="btnNew" runat="server" Text="新建" CausesValidation="false" CommandName="New" />
                <asp:Button ID="btnDelete" runat="server" Text="删除" CausesValidation="false" CommandName="Delete" />
            </ItemTemplate>
            <InsertItemTemplate> 
                 <asp:Button ID="btnInsert" runat="server" Text="插入" CausesValidation="true" CommandName="Insert" />
                <asp:Button ID="benCancel" runat="server" Text="取消" CausesValidation="false" CommandName="Cancel" />
            </InsertItemTemplate>
            <EditItemTemplate>
                 <asp:Button ID="btnUpdate" runat="server" Text="更新" CausesValidation="true" CommandName="Update" />
                <asp:Button ID="btnCancel" runat="server" Text="取消" CausesValidation="false" CommandName="Cancel" />
            </EditItemTemplate>
        </asp:TemplateField>
        
    </Fields>
    <PagerSettings  Mode="NextPreviousFirstLast" NextPageText="下一页" PreviousPageText="上一页" FirstPageText="首页" LastPageText="末页" PageButtonCount="1" Position="Bottom"/>
</asp:DetailsView>

后置代码:

public partial class DetilsViewDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind();
        }
    }
 
    private void Bind()
    {
        DetailsView2.DataSource = DbHelper.Instance.GetDataTable(System.Data.CommandType.Text, "select * from books");
        DetailsView2.DataBind();
    }
 
    protected void DetailsView2_PageIndexChanging(object sender, DetailsViewPageEventArgs e)
    {
        DetailsView2.PageIndex = e.NewPageIndex;
        Bind();
    }
 
    protected void DetailsView2_ModeChanging(object sender, DetailsViewModeEventArgs e)
    {
        DetailsView2.ChangeMode(e.NewMode);
        Bind();
    }
 
    protected void DetailsView2_ItemDeleting(object sender, DetailsViewDeleteEventArgs e)
    {
        DbHelper.Instance.ExecuteNonQuery(System.Data.CommandType.Text, "delete from books where id="+Convert.ToInt32(DetailsView2.DataKey.Value));
        Bind();
    }
 
    protected void DetailsView2_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
    {
         
    }
 
    protected void DetailsView2_ItemInserting(object sender, DetailsViewInsertEventArgs e)
    {
        
    }
 
}

样式定义

除此之外还提供了丰富的样式属性。可以为控件的不同部分的样式来自定义外观

AlternatingRowStyle   交替行样式 通常和行样式一起使用

RowStyle                  行样式

EmptyDataRowStyle  没有记录的时候的样式。

HeaderStyle

EditRowStyle            处于编辑模式的行样式

CommandRowStyle  内置命令按钮的行样式设置。

InsertRowStyle         处于插入模式的样式设置

PagerStyle              分页导航样式

FieldHeaderStyle    标题列的样式

posted on 2012-08-29 13:18  任生风影  阅读(1819)  评论(4编辑  收藏  举报

导航