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

最新推荐文章于 2020-11-21 20:27:29 发布
最新推荐文章于 2020-11-21 20:27:29 发布
阅读量760 收藏
点赞数
文章标签： asp server button textbox stylesheet html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WOFECH/article/details/6062222
版权

<%@ 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="关闭"  οnclick="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")%>" οnclick="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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在DataList中单击ImageButton，显示图片详细信息
My Blog's
11-20 5193
以下是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 1784
本文英文原版与代码下载：http://aspnet.4guysfromrolla.com/articles/083006-1.aspx用TreeView和DataList控件创建一个在线图片库导言：ASP.NET 2.0包含了很多的Web控件，比如TreeView。它被设计来显示具有层次结构的数据。TreeView可以绑定到一个层次结构数据源，比如XmlDataSource 或 Sit
在DataList控件中显示图片
11-27 1360
首先，必须在数据库表中，设计一个专门用来存储图片路径的字段。 其次，在站点中创建一个文件夹，例如“pic”，专门用来存放图片。 做好上面的工作后，在页面中创建一个数据源控件和DataList控件，并配置好它们，然后按下面的步骤来。 1、编辑DataList的ItemTemplate模板，在其中放入一个Image控件，然后使用智能标记绑定到“照片”字段上。 2、修改源码，如下所示。
datalist获取id传到下一个页面_VUE跨页面传值的精妙
weixin_39574869的博客
11-21 632
点击上方“哆啦A梦编程猫”，选择”置顶或者星标“你的关注，是小喵的动力背景作为后端开发者，也不得不学点前端知识。众所周知，以前开发者只要掌握HTML、CSS、JavaScript 三驾马车就能胜任一份Web前端的工作。而在技术日新月异的现在，Vue, React，Angular在代替旧的前端框架已经是大势所趋了。一、vue简介Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的...
理清asp.net页面跳转和页面传值问题
zjm1231的专栏
05-27 647
虽然这个东西很基本，但是自己有时候还是很混乱，所以今天就小小的整理了下，先给大家带来的是页面的跳转问题。以下是四种 打开新页面的方法. 1. 直接转向新页面,原页面不保留 Response.Redirect("Webform6.aspx?id=1"); 2. 直接转向新页面,原页面不保留 nServer.Transfer("Webform6.aspx?id=1",true); 3. 打开新页面,原
ASP.NET中利用DataList实现图片无缝滚动 实例分享
10-27
本实例将介绍如何利用DataList控件来实现图片的无缝滚动效果，这是一个非常实用的功能，尤其对于网站的首页或者产品展示页面，能够吸引用户的注意力并提供良好的用户体验。 DataList是ASP.NET中的一个服务器端控件...
ASP.Net 之Datalist删除功能详解附代码
10-27
在ASP.NET中，DataList控件是一个非常有用的控件，用于显示数据集合，并且支持多种交互功能，如分页、排序、编辑和删除等。在这个主题中，我们将深入探讨如何在DataList中实现删除功能，包括单条记录的删除以及支持...
asp.net使用for循环实现Datalist的分列显示功能
10-29
在给定的文件中，描述了如何使用***的for循环来实现DataList控件的分列显示功能。这一技术的应用通常是为了在网页中展示数据，特别是当数据量较大或者需要特定格式展示时。通过for循环，开发者可以控制数据的具体...
asp.net Datalist控件实现分页功能
10-29
例如，在上面提供的代码片段中，使用了Eval方法和DataBinder.Eval方法来绑定数据项的属性，并显示图片和链接。 接下来，使用SqlDataSource控件来定义数据源。SqlDataSource控件简化了与数据库交互的过程，只需指定...
关于DataList中图片上传
stoco的专栏
04-28 220
    原意是在datalist编辑模式中进行上传图片，并更新显示，使用了updatepanel-&gt;datalist-&gt;editTemplate，使用Asyncfileupload控件上传图片并在其事件中更新editTemplate中图片的imageURL,但更新成功之后无法局部刷新，图片没办法更新显示，个人认为是编辑模式中的后台事件无法引起postback所致...
ASP.NET动态网站开发培训-14.DataList控件(一）
Smile的专栏
11-03 542
第十四讲：DataList控件(一） 课程安排： 设置多栏和显示方向 在Sql Server中创建自动编号的字段 设置DataList的模板 在内部显示图片 ImageButton按钮 设置多栏和显示方向 RepeateColumns属性：【列值】 RepeateDirection属性：【排列方向】 在Sql Server中创建自动编号的字段
在Datalist中通过点击某条目录跳转页面时用URL进行传值的方法
jiefangchen的专栏
03-01 2743
//起始页前台代码                                                                                                ◎                         []                                               //起始
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值