声明式数据绑定教程-GridView 模板

作者:vkvi 来源:ITPOW(原创) 日期:2008-8-10

前面介绍的 GridView 产生的列都是通过设置某些属性的值来实现的,有时候我们希望把功能做得更强大一些,这就要用到模板,此时我们一般先把 AutoGenerateColumns 属性值设为 false,也就是说不要自动产生列。

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:MySqlServer %>"
    SelectCommand="select * from cftea_docs"
    UpdateCommand="update cftea_docs set title=@title, content=@content where id=@id"
    DeleteCommand="delete from cftea_docs where id=@id">
</asp:SqlDataSource>
 
<asp:GridView ID="GridView1" runat="server"
    DataSourceId="SqlDataSource1" DataKeyNames="id"
    AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField ShowHeader="False">
            <EditItemTemplate>
                <asp:Button runat="server" CausesValidation="false"
                    CommandName="Update" Text="更新" />
                <asp:Button runat="server" CausesValidation="false"
                    CommandName="Cancel" Text="取消" />
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Button runat="server" CausesValidation="false"
                    CommandName="Edit" Text="编辑" />
                <asp:Button runat="server" CausesValidation="False"
                    CommandName="Delete" Text="删除" OnClientClick="javascript:return DeleteConfirm();" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="id">
            <ItemTemplate>
                <%# Eval("id") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="标题">
            <ItemTemplate>
                ◆<%# Eval("title") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="内容">
            <ItemTemplate>
                <%# Eval("content") %>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="_content" runat="server" TextMode="MultiLine" Text="<%# Bind('content') %>"></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
<script type="text/javascript">
<!--
function DeleteConfirm()
{
    if (confirm("你确定要删除吗?"))
    {
        return true;
    }
           
    return false;
}
-->
</script>

上述中,Text="<%# Bind('content') %>">,是不是需要把双引号和单引号对调的问题,请参见:Too many characters in character literal

请注意代码中 Columns 部分,这就是自定义的列,而一个 TemplateField 就是一个列的模板,最终的结果如下:

GridView 模板列

  • ItemTemplate 就是普通显示状态下的内容。
  • EditItemTemplate 就是编辑状态下的内容。

CommandName 与 CommandArgument

我们可以看到几个按钮有个 CommandName,其值就表示按钮的作用,除了 Update、Edit、Delete、Cancel 这些系统自带的命令外,我们也可以自定义命令,同时我们还可以利用 CommandArgument 指定命令参数。我们可以在 GridView 的 RowCommand 事件中,通过参数 GridViewCommandEventArgs e 的 CommandName、CommandArgument 来获得这些值。

删除时提示

我们可以看到删除按钮中有 OnClientClick="javascript:return DeleteConfirm();",它表示客户端点击该按钮时,将调用一个 JavaScript 函数,根据函数的返回值来确定是否继续提交,这就实现了删除时提示的功能。

Eval 与 Bind

Eval 用于输出结果,<%# Eval("字段名称")%>。

Bind 除了用于输出结果外,还用于返回结果,也就是说 Bind 的数据还可以提交给服务器,而 Eval 只是单向地向客户端输出。同时我们看到,对于 Bind 的字段,我们都为控件指定了 ID。

相关阅读

相关文章