巧用DataList 操作图片选取传值功能

最新推荐文章于 2022-04-04 21:50:00 发布
最新推荐文章于 2022-04-04 21:50:00 发布
阅读量802 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： asp server button textbox stylesheet html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WOFECH/article/details/6062222
本文介绍了一个用于眼镜搜索的网页设计，包含多种筛选条件如性别、款式等，并通过DataList展示查询结果。文章还展示了如何使用ASP.NET处理CheckBox的选中值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Design serch</title>
    <link href="../../css.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="../../Celend/popcalendar.js"></script>
   <script type="text/javascript" src="../../WebDisk_/photoJS.js"></script>
   <script type="text/javascript">
      function closese()
      {
//      alert("123");
      window.location.href="SJDefault.aspx";
      }
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 812px; height: 460px">
            <tr>
                <td style="width: 100%; height:10%">
                    架别：<asp:DropDownList ID="Drpsextype" runat="server" Width="60px">
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem>男性</asp:ListItem>
                        <asp:ListItem>女性</asp:ListItem>
                        <asp:ListItem>儿童</asp:ListItem>
                        <asp:ListItem>中性</asp:ListItem>
                    </asp:DropDownList>款式：<asp:DropDownList ID="Drpkstype" runat="server" Width="60px">
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem>时尚</asp:ListItem>
                        <asp:ListItem>传统</asp:ListItem>
                        <asp:ListItem>复古</asp:ListItem>
                        <asp:ListItem>运动</asp:ListItem>
                    </asp:DropDownList>
                     架类：<asp:DropDownList ID="Drpjltype" runat="server" Width="60px">
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem>光学</asp:ListItem>
                        <asp:ListItem>太阳</asp:ListItem>
                        <asp:ListItem>老花</asp:ListItem>
                    </asp:DropDownList>
                     材质：<asp:DropDownList ID="Drpcztype" runat="server" Width="60px">
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem>板材</asp:ListItem>
                        <asp:ListItem>金属</asp:ListItem>
                        <asp:ListItem>塑胶</asp:ListItem>
                        <asp:ListItem>TR90</asp:ListItem>
                        <asp:ListItem>钛</asp:ListItem>
                    </asp:DropDownList> &nbsp;关键字:
                    <asp:TextBox ID="Tbgjz" runat="server"></asp:TextBox>
                    &nbsp;&nbsp;<asp:Button ID="Btserch" runat="server" Text="查询" Width="41px" OnClick="Btserch_Click" /> &nbsp;<asp:Button ID="Btaddlist" runat="server" Text="加入列表" Width="60px" OnClick="Btaddlist_Click" />
                    &nbsp;
                    <input id="Button1" type="button" value="关闭"  onclick="closese()"/>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td style="width: 100%; height:90%" >
 <div style="margin:auto; padding-top:0px; width: 100%; height:100% ">
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="4" Width="99%" >
            <ItemTemplate><div style="width:160px;margin:auto;height:120px;border:1px solid gray;">
            <div>
           <img  alt="" style="margin:auto;border:none;padding:5px 5px 5px 5px;" src="<%#Eval("SmallPhoto")%>" onclick="PhotoShow.url='<%#Eval("SmallSmallPic")%>' ;PhotoShow.PhotoClick();"  />
            </div>
        </div>
        <div style="color:Gray;text-align:Center;height:20px;"><input type="checkbox" id="chkDo" runat="server" name="chk" value='<%# Eval("listid") %>' />
<%#Eval("Name") %></div>
        </ItemTemplate>
    </asp:DataList>
<div style="margin:auto;height:20px;padding:0px;text-align:right;padding:0px; width: 798px;">
<br/>
<asp:LinkButton ID="lbnPrevPage" runat="server" CommandName="prev" OnCommand="Page_OnClick " OnClientClick='setTab("one",2,2)' >上一页</asp:LinkButton>
<asp:Label ID="lbCurrentPage" runat="server" Text=""></asp:Label>
&nbsp;&nbsp;<asp:Label ID="lbTotal" runat="server" Text=""></asp:Label>
<asp:LinkButton ID="lbnNextPage" runat="server" CommandName="next" OnCommand="Page_OnClick " OnClientClick='setTab("one",2,2)' >下一页</asp:LinkButton>
&nbsp;&nbsp;跳转至第<asp:DropDownList ID="lstPage" runat="server" OnSelectedIndexChanged="lstPage_SelectedIndexChanged1" AutoPostBack="True" >
    </asp:DropDownList>页&nbsp;&nbsp;&nbsp; 
</div>
</div>
                </td>
            </tr>
        </table>
   
    </div>
    </form>
</body>
</html>

 

以上是html 代码

以下是对  CheckBox 取值。

 protected void Btaddlist_Click(object sender, EventArgs e)
    {
        string num = "";
        foreach (Control c in DataList1.Controls)
        {
            //CheckBox chk = (CheckBox)c.FindControl("chkDo");  此只能取服务器控件的值
           HtmlInputCheckBox chk = (HtmlInputCheckBox)c.FindControl("chkDo"); 此可以取回html控件的值
           if (chk.Checked)
                num += chk.Value+ ",";
        }
        Response.Write("<script>alert('" + num + "')</script>");
    }

 

WOFECH
关注
(HTML+CSS)表单属性学习
hjp9906的博客
08-03 2102
表单的构成与创建 一个完整的表单通常由表单元素、提示信息和表单域3个部分构成。 在HTML5中，form标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下。 form action="url 地址" method="提交 方式" name="表单名称"> 各种表单控件 </form 表单属性 表单拥有多个属性，通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能。 action属性 在表单收集到
N 种仅仅使用 HTML/CSS 实现各类进度条的方式
m0_63864518的博客
11-04 1902
本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式，通过本文，你可能可以学会： 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 <progress> 创建进度条 HTML 实现进度条的局限性 使用 CSS 百分比、渐变创建普通进度条及其动画 使用 CSS 创建圆环形进度条 使用 CSS 创建球形进度条 使用 CSS 创建 3D 进度条 进度条，是我们日常界面中使用的非常多的一种，下面我们来看看。到今天，我们可以如何
在DataList中单击ImageButton，显示图片详细信息
My Blog's
11-20 5243
以下是HTML代码：...@ Page Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true"    CodeFile="ListPhoto.aspx.cs" Inherits="ListPhoto" Title="List Photo" %>asp:Content ID="Content1" C
用TreeView和DataList控件创建一个在线图片库
heker2007的专栏
11-19 1822
本文英文原版与代码下载：http://aspnet.4guysfromrolla.com/articles/083006-1.aspx用TreeView和DataList控件创建一个在线图片库导言：ASP.NET 2.0包含了很多的Web控件，比如TreeView。它被设计来显示具有层次结构的数据。TreeView可以绑定到一个层次结构数据源，比如XmlDataSource 或 Sit
在DataList控件中显示图片
11-27 1415
首先，必须在数据库表中，设计一个专门用来存储图片路径的字段。 其次，在站点中创建一个文件夹，例如“pic”，专门用来存放图片。 做好上面的工作后，在页面中创建一个数据源控件和DataList控件，并配置好它们，然后按下面的步骤来。 1、编辑DataList的ItemTemplate模板，在其中放入一个Image控件，然后使用智能标记绑定到“照片”字段上。 2、修改源码，如下所示。
datalist获取id传到下一个页面_VUE跨页面传值的精妙
weixin_39574869的博客
11-21 684
点击上方“哆啦A梦编程猫”，选择”置顶或者星标“你的关注，是小喵的动力背景作为后端开发者，也不得不学点前端知识。众所周知，以前开发者只要掌握HTML、CSS、JavaScript 三驾马车就能胜任一份Web前端的工作。而在技术日新月异的现在，Vue, React，Angular在代替旧的前端框架已经是大势所趋了。一、vue简介Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的...
理清asp.net页面跳转和页面传值问题
zjm1231的专栏
05-27 702
虽然这个东西很基本，但是自己有时候还是很混乱，所以今天就小小的整理了下，先给大家带来的是页面的跳转问题。以下是四种 打开新页面的方法. 1. 直接转向新页面,原页面不保留 Response.Redirect("Webform6.aspx?id=1"); 2. 直接转向新页面,原页面不保留 nServer.Transfer("Webform6.aspx?id=1",true); 3. 打开新页面,原
Java、Android背包问题（二）——动态规划
https://github.com/W4ited
12-06 377
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
VB速查大全(数据库、表格及报表编程) ★ VB错误处理，ado常见错误，VB数据类型等，网上有很多教程是错的，强烈建议看此文
ecz00的专栏
05-19 8706
VB异常处理 (很重要) ado常见错误 ado游标及锁定介绍 免费报表控件 免费表格控件 vb数据类型(很多程序出问题出在这个，一定要看，VB msdn说的不太对) VB可用的AES加密sqlite_odbc 及 cairo_sqlite (VBRichClient自带的非odbc连接) 有vbRichClient代替winsock、实现vb多线程及远程调用activeX等
js 代码规范
不可云
04-04 3951
1、变量声明 （1）使用let或const替换var声明变量。 （2）变量声明前，需要考虑该变量是常量还是一个可变化的，选用合适的方式声明。 原因：var没有块作用域的概念，存在变量声明提升，并可以跨块级作用访问。 // bad var a = 1; // good let b = 1; const c = 1; （3）字符串属性值必须通过单引号括起来，不能用双引号；如果字符串属性值太长，注意换行，用注意需要通过+连接。 // bad let a = "a"; // good let a = 'a';
关于DataList中图片上传
stoco的专栏
04-28 263
    原意是在datalist编辑模式中进行上传图片，并更新显示，使用了updatepanel-&gt;datalist-&gt;editTemplate，使用Asyncfileupload控件上传图片并在其事件中更新editTemplate中图片的imageURL,但更新成功之后无法局部刷新，图片没办法更新显示，个人认为是编辑模式中的后台事件无法引起postback所致...
ASP.NET动态网站开发培训-14.DataList控件(一）
Smile的专栏
11-03 609
第十四讲：DataList控件(一） 课程安排： 设置多栏和显示方向 在Sql Server中创建自动编号的字段 设置DataList的模板 在内部显示图片 ImageButton按钮 设置多栏和显示方向 RepeateColumns属性：【列值】 RepeateDirection属性：【排列方向】 在Sql Server中创建自动编号的字段
在Datalist中通过点击某条目录跳转页面时用URL进行传值的方法
jiefangchen的专栏
03-01 2821
//起始页前台代码                                                                                                ◎                         []                                               //起始
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值