DataList

最新推荐文章于 2024-04-06 23:19:41 发布
最新推荐文章于 2024-04-06 23:19:41 发布
阅读量97 收藏 1
点赞数
文章标签： ui c# xhtml
原文链接：http://www.cnblogs.com/happinesshappy/p/4698513.html
版权

结构跟Repeater很相似 多出一组EditItemTemplate项

在一下例子中使用CommandName属性指向某一个事件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:DataList ID="DataList1" runat="server" OnSelectedIndexChanged="DataList1_SelectedIndexChanged" OnEditCommand="DataList1_EditCommand" OnDeleteCommand="DataList1_DeleteCommand">
            <HeaderTemplate>
                <table style="width:900px;background-color:#ffffcc"><tr>
                    <td width="25%">姓名</td>
                    <td>性别</td>
                    <td>电话</td>
                    <td>操作</td>
                </tr></table>
            </HeaderTemplate>

            <ItemTemplate>
                <table style="width:900px;background-color:#ffffcc"><tr>
                    <td width="25%">
                        <asp:Label ID="Label1" runat="server" Text='<%#Eval("code") %>'></asp:Label></td>
                    <td width="25%"><%#Eval("name") %></td>
                    <td width="25%"><%#Eval("tel") %></td>
                    <td width="25%">
                        <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit">编辑</asp:LinkButton>
                        <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete">删除</asp:LinkButton>
                        
                    </td>
                </tr></table>
            </ItemTemplate>

            <EditItemTemplate>
                <table style="width:900px;background-color:#ffffcc"><tr>
                    <td width="25%">
                        <asp:TextBox ID="txtname" runat="server" Text='<%#Eval("name") %>'></asp:TextBox></td>
                    <td width="25%">
                        <asp:TextBox ID="txtsex" runat="server" Text='<%#Eval("sex") %>'></asp:TextBox></td>
                    <td width="25%">
                        <asp:TextBox ID="txttel" runat="server" Text='<%#Eval("tel") %>'></asp:TextBox></td>
                    <td width="25%"><asp:LinkButton ID="LinkButton1" runat="server">更新</asp:LinkButton>
                        <asp:LinkButton ID="LinkButton2" runat="server">取消</asp:LinkButton></td>
                </tr></table>
            </EditItemTemplate>
            <FooterTemplate></FooterTemplate>
        </asp:DataList>
    
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataList1.DataSource = new TelBF().Select();
            DataList1.DataBind();
        }
    }


    protected void DataList1_SelectedIndexChanged(object sender, EventArgs e)
    {

    }
    protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
    {
        //选中改行的索引
        DataList1.EditItemIndex = e.Item.ItemIndex;//EditItemTemplate项默认索引为-1时隐藏该项
        //重新绑定数据
        DataList1.DataSource = new TelBF().Select();
        DataList1.DataBind();
    }
    protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
    {
        Label la = (Label)e.Item.FindControl("Label1");
        string s = la.Text;
        new TelBF().Delete(s);
        DataList1.DataSource = new TelBF().Select();
        DataList1.DataBind();
    }
}

 

转载于:https://www.cnblogs.com/happinesshappy/p/4698513.html

a5868530
关注
datalist效果实现
KiraRabbit
11-25 461
datalist效果实现，包括模糊搜索，自动补全，下拉选项 <input style="width: 150px;height: 30px;" id="select-sdkInt-group" list="sdkIntList" placeholder="SdkInt"> <datalist id="sdkIntList" style="display: none;">...
datalist
热门推荐
qi1271199790的博客
01-16 1万+
在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。在以前，如果要实现这样的功能，必须要求开发者使用一些Javascript的技巧或相关的框架进行ajax调用，需要一定的编程工作量。但随着HTML5 的慢慢普及，开发者可以使用其中的新的DataList标记就能快速开发出十分漂亮的 AutoComplete组件的效果   一、datalist标签的使用示例  
php datalist,html datalist标签怎么用
weixin_32256861的博客
03-18 141
html datalist标签用于定义选项列表，并且规定了input元素可能的选项列表，所有主流浏览器都支持标签，除了Internet Explorer和Safari。标签是HTML5中的新标签。datalist标签是什么意思？html datalist标签怎么用？作用：定义选项列表，并且规定了input元素可能的选项列表。说明：请与 input 元素配合使用该元素，来定义 input 可能的值。...
datalist java,DataList分页
weixin_29705519的博客
03-11 201
/*CreateBy飞刀http://www.aspcn.C#/*Create By 飞刀2001-7-25 01:44Support .Net Framework Beta 2*/OleDbConnection MyConn;int PageSize,RecordCount,PageCount,CurrentPage;public void Page_Load(Object src,Ev...
DataList简介
m0_51701478的博客
01-05 1698
使用GridView 进行数据的展示时，一般用于多行数据的展示，提供了分页，编辑，排序等特性。DataList 也用于多行多列的数据展示，但差别在于，GridView的一个单元格对应于数据表中的一个单元，而DataList的一个单元格对应于数据表中的一行记录。除此之外，DataList 也不支持双向绑定（Bind绑定），分页和排序，并且需要手工编写才能实现编辑，删除和更新功能。 DataList 拥有强大的模板特性，灵活性高，在DataList控件中除了支持Repeater控件中的两个模板： 1，Selec
h5 datalist
RGSNbiubiubiu的博客
12-20 214
<input type="text" name="link" list="city_list"/> <datalist id="city_list"> <option value="before"> <option label="bt">中间</option> <option value="after">最后</option> </datalist> datalist 定义选项内容..
datalist标签使用
weixin_45620465的博客
11-10 1493
datalist标签使用案例
＜datalist＞标签
qq_48113035的博客
03-05 1362
1.
jQuery插件datalist实现很好看的input下拉列表
10-23
首先，我们需要了解datalist是什么。Datalist是HTML5中的一个表单元素，它能为输入字段提供一个自动完成的下拉列表。用户输入时，可以选择列表中提供的选项，也可以忽略它们继续输入其他内容。然而，由于旧版浏览器...
在ASP.NET 2.0中操作数据之三十一：使用DataList来一行显示多条记录
10-22
在ASP.NET 2.0中，DataList是一个非常灵活的数据绑定控件，它可以用来展示数据库或其他数据源中的信息。在默认情况下，DataList会使用一个单列多行的HTML `<table>` 来显示数据项。然而，通过设置其属性，我们可以...
jQuery中select与datalist制作下拉菜单时的区别浅析
12-29
一般我们通常使用select制作下拉菜单，但是H5之后，datalist也可以充当select的角色，而且两者还有一点小的不同。 对于select来说，select的下拉菜单是供用户选择的，用户只能选择其中的选项不能自己添加。 但是...
html5 datalist 选中option选项后的触发事件
11-21
使用input + datalist 实现自动补全功能，其中datalist中的内容是根据input输入的内容动态变换的，代码如下 <!DOCTYPE HTML> <html> <body> [removed][removed] [removed] function inputSelect(){ ...
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
09-27
HTML5新增的标签datalist实现输入中文/拼音首字母时，自动进入数据库模糊查询，并返回相应的结果，生成datalist，由于在输入框中的输入内容发生变化时，datalist会自动触发下拉框，解决方案非常好，下面通过本文给...
＜datalist＞ 标签
n17742637334的博客
04-06 499
2. 元素包含了一组元素，这些元素表示预定义可选值，在元素输入过程中，会自动响应元素的值。如上图运行效果我们看到，我们在标签中书写了选项，但是并没有和进行关联起来，还是普通的。3. 绑定的标签必须设置list 属性，属性值等于标签的id 属性值。1. 标签规定了 元素可能的选项列表。
html文本框datalist,HTML5<datalist>标签有哪些属性？HTML5<datalist>标签的具体用法（附实例）...
weixin_39793105的博客
06-03 1184
HTML5标签有哪些属性？HTML5标签的具体用法了解一下。本篇文章主要讲解了HTML5标签的具体用法和作用，还有HTML5标签的一部分属性介绍HTML5标签的定义和用法： 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。HT...
HTML5&CSS3网页制作：datalist元素.pptx
05-31
下面我们将详细探讨`<datalist>`元素的使用方法、语法格式以及实际应用。 ### 1. `<datalist>`元素的基本概念 `<datalist>`元素是HTML5新增的一个标签，它的主要作用是定义一组预设的选项，这些选项通常与一个`...
asp.net datalist 用法
01-01
设计模版： 页眉 <HeaderTemplate> </HeaderTemplate> 页脚 <FooterTemplate> </FooterTemplate> 数据记录 <ItemTemplate> </ItemTemplate> <AlternatingItemTemplate> 交替显示项 </AlternatingItemTemplate> 选中...
DataList dataList;
最新发布
10-04
在ASP.NET Web Forms中，`DataList` 是一个用于动态绑定和呈现数据的强大工具。如果你有一个名为 `DataList dataList;` 的变量，你可以这样使用它来创建和显示嵌套的数据结构： 1. **创建并配置DataList**[^1]: ```csharp // 假设你有从数据库或数据源获取的数据集合 var dataSource = GetNestedDataSource(); // 创建DataList DataList nestedDataList = new DataList(); nestedDataList.DataSource = dataSource; // 内部DataList的配置示例 foreach (var item in dataSource) { DataList innerList = new DataList(); innerList.DataTextField = "InnerField"; innerList.DataValueField = "InnerKey"; // 添加到外部DataList的ItemTemplate nestedDataList.Items.Add(new ListItem() { Text = item.OuterField, Value = item.OuterKey, Controls = { innerList } }); } // 将DataList添加到页面上 PlaceHolder.Controls.Add(nestedDataList); ``` 2. **jQuery Datalist示例**[^2]： 虽然这是关于HTML5的Datalist，但在jQuery插件的帮助下，可以在Web应用中实现相似的功能。假设你已经包含了jQuery和相应的插件，可以这样做： ```html <input type="text" id="myInput" list="options"> <datalist id="options"> <!-- 通过JavaScript填充这些选项 --> </datalist> <script> $('#myInput').datalist({ source: function(request, response) { $.ajax({ url: '/GetOptions', data: { term: request.term }, success: function(data) { response($.map(data, function(item) { return { label: item.Label, value: item.Value }; })); } }); } }); </script> ``` 这里，`/GetOptions` 是一个服务器端API，返回与用户输入匹配的选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值