asp.net中刷新和无刷新(JQuery实现)浏览图片的方法

.aspx代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="图片浏览.aspx.cs" Inherits="图片浏览" %>

<!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">

<script src="jquery-1.8.3.js" type="text/javascript"></script>

<title></title>

<script type="text/javascript">

$(document).ready(function () {

$("#lb_img").click(function () {

$("#img2").attr("src", $(this).val());

$("#Text1").val($(this).val());//在页面刷新的过程中,图片的src属性不会被保留而文本内容可以保留

});

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ListBox ID="ListBox1" runat="server" DataSourceID="AccessDataSource1"

DataTextField="img_fname" DataValueField="src"
AutoPostBack="True"

onselectedindexchanged="ListBox1_SelectedIndexChanged" Height="135px"></asp:ListBox>

<asp:AccessDataSource ID="AccessDataSource1" runat="server"

DataFile="~/mdb/EV.mdb"

SelectCommand="SELECT img_fname, img_folder + ‘/‘ + img_fname AS src FROM T_IMGMNG">

</asp:AccessDataSource>

<asp:Image ID="Image1" runat="server" Width="216px" />

<br />

<hr />

<asp:ListBox ID="lb_img" runat="server" DataSourceID="AccessDataSource1"

DataTextField="img_fname" DataValueField="src"                                        
注释:这里的AutoPostBack属性要去掉

onselectedindexchanged="ListBox1_SelectedIndexChanged" Height="124px"></asp:ListBox>

<asp:AccessDataSource ID="AccessDataSource2" runat="server"

DataFile="~/mdb/EV.mdb"

SelectCommand="SELECT img_fname, img_folder + ‘/‘ + img_fname AS src FROM T_IMGMNG">

</asp:AccessDataSource>

<img id="img2" width="240" alt="" />

<input id="Text1" type="text" runat="server" />

</div>

</form>

</body>

</html>

.aspx.cs代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class 图片浏览 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Image1.ImageUrl = ListBox1.SelectedValue;
    }
}

在页面刷新的过程中,图片的src属性不会被保留而文本内容可以保留

效果如下:

时间: 2024-08-04 13:54:32

asp.net中刷新和无刷新(JQuery实现)浏览图片的方法的相关文章

Word中截取部分内容并保存为jpg图片的方法

private void button1_Click(object sender, EventArgs e) { var appWord = new Microsoft.Office.Interop.Word.Application(); var doc = new Microsoft.Office.Interop.Word.Document(); object oMissing = System.Reflection.Missing.Value;//这个是什么东西,我始终没搞明白-_- //打

knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页

Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/ Web API数据准备: 偷个懒数据结构和数据copy自官网实例 http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api using System.Collections.Generic; using System.Lin

Asp.net MVC Vue Axios无刷新请求数据和响应数据

Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.Models { public class Region { public int Id { get; set; } public string City { get; set; } } } Controller using System; us

ASP.NET中的几种弹出框提示基本实现方法

我们在.NET程序的开发过程中,常常需要和用户进行信息交互,比如执行某项操作是否成功,"确定"还是"取消",以及选择"确定"或"取消"后是否需要跳转到某个页面等,下面是本人对常用对话框使用的小结,希望对大家有所帮助,同时也欢迎大家补充. (1) 点击页面上的按钮,弹出一个对话框提示是"确定"还是"取消"操作,我们采用在按钮中添加属性来完成: 举例如下: 复制代码代码如下: public

asp.net 中使用 pagedlist 分页并具有查询功能的实现方法

用pagedlist在项目中做分页已N次了,今天再次用实例来实现一个带查询功能的分页例子. 1.在view代码: <div class="search"> <form method="post" action="/user/index"> <input placeholder="真实姓名" name="realname" /><button class="

关于touchTouch.jquery.js浏览图片重复的问题

今天在处理图片预览的时候,需要每提交一次,执行touch里的方法,但是点击之后 ,弹出的图片总是同一个,跟踪源码才发现,每执行一次就会将html中的dom加载一个,这样前几张永远都是那几个,所以看不到后面的,于是用执行touch方法之前将dom移除,还是不行,跟踪源码原来dom没有移除,我以为remove方法有问题,百度了半天终于发现问题了,原来添加的dom被当做全局变量保存了起来,于是我将代码移到局部变量中就解决了这个问题.哈哈O(∩_∩)O哈哈~ 代码如下 移除dom的代码 $("#gall

asp.net中ScriptManager自带Ajax与jQuery事件冲突

问题引诉:最近在使用asp.net自带的无刷新提交ScriptManager时,发现一个问题,就是和我自己用jQuery写的一些事件函数和局部刷新相冲突.通过在网上收索,发现很多人都遇到这个同样的问题.最终还是找到的解决的办法,在此我想将其解决的办法分享出来供大家参考. 问题解决办法: 方法1.两者实现都能够实现页面的无刷新效果,所以可以保留其中的一种即可: 方法2.如果必须要两者混合应用,那么在用jQuery绑定事件是就要注意一些了 我们平时在jQuery中绑定事件最常用的方式有以下三种:以c

无刷新分页

无刷新分页要用到自己定义的存储过程: alter proc usp_DivMemberByPage @pageIndex int, @pageSize int, @total int output //注意:这里不要忘记output as begin select * from ( select *,row_number() over(order by uId asc) RowId from Member ) Temp where Temp.RowId between (@pageIndex-1

Jquery+css实现图片无缝滚动轮播

Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享一下 最终实现界面如下: 页面加载时,自动轮播,轮播鼠标悬停在整个banner容器的时候,两边会显示向左,向右按钮,鼠标悬停在中下方索引圆圈的上面,自动跳转到相应的图片. banner容器里面包含了图片列表img,索引圆圈 num,还有按钮两个btn <div class="banner&qu