1、列表页面的前台主要代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#pList,#photo
{
width:600px;
border:solid 1px red;
border-collapse:collapse;
display:none;
}
#pList td, #pList th,#photo td
{
border:solid 1px red;
}
#photo
{
width:600px;
}
img
{
border:0px;
}
#tbEdit
{
border:solid 1px black;
width:300px;
position:absolute;
top:300px;
left:300px;
background-color:White;
height:150px;
display:none;
}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//将序列化成json格式后日期(毫秒数)转成日期格式
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
$(function() {
getPage(1);
//确定
$("#btnOk").click(function() {
var title = $("#txtName").val();
var id = $("#txtId").val();
var url = $("#txtUrl").val();
var data = { title: title, id: id, url: url };
$.post("PhotoEdit.ashx", data, function(msg) {
if (msg == "1") {
alert("修改成功");
$("#tbEdit").hide();
} else if (msg == "0") {
alert("修改失败");
}
});
})
//取消
$("#btnCancel").click(function() {
$("#tbEdit").hide();
})
})
//获取分页数据
function getPage(pageIndex) {
//清空之前的数据
$("#content").html("");
var pageCount;
$.getJSON("PagedList.ashx?page=" + pageIndex, function(data) {
//读取json中的总页数
pageCount = data[data.length - 1].pageCount;
var table = $("<table id='pList' ></table>");
//添加表头
table.append($("<tr><th>序号</th><th>名字</th><th>照片</th><th>点击次数</th><th>支持</th><th>反对</th><th>时间</th><th>操作</th></tr>"));
for (var i = 0; i < data.length - 1; i++) {
var photo = data[i];
var tr = $("<tr></tr>");
var td = $("<td>" + (i + 1) + "</td>");
tr.append(td);
td = $("<td><a href='PhotoDetails.aspx?id=" + photo.PId + "'>" + photo.PTitle + "</a></td>");
tr.append(td);
td = $("<td><img src='images/" + photo.PUrl + "' width='150' height='100' /></td>");
tr.append(td);
td = $("<td>" + photo.PClicks + "</td>");
tr.append(td);
td = $("<td><a pid='" + photo.PId + "' href=''><img src='images/85.gif' /></a>(<span>" + photo.PUp + "</span>)</td>");
tr.append(td);
//点击支持的点击事件
td.children("a").click(function() {
var id = $(this).attr("pid");
var span = $(this).next();
//请求一般处理程序,给支持+1
$.get("Update.ashx?id=" + id + "&type=up", function(msg) {
if (msg == "1") {
//成功
//更新页面上span标签中的值
var n = parseInt(span.text()) + 1;
span.text(n);
}
else if (msg == "0") {
alert("更新失败");
}
})
return false;
})
td = $("<td><a pid='" + photo.PId + "' href=''><img src='images/86.gif' /></a>(<span>" + photo.PDown + "</span>)</td>");
tr.append(td);
//点击反对的点击事件
td.children("a").click(function() {
var id = this.pid;
//a标签后的span标签
var span = $(this).next();
//请求一般处理程序,给反对+1
$.get("Update.ashx?id=" + id + "&type=down", function(msg) {
if (msg == "1") {
//成功
//更新页面上span标签中的值
var n = parseInt(span.text()) + 1;
span.text(n);
}
else if (msg == "0") {
alert("更新失败");
}
})
return false;
})
td = $("<td>" + ChangeDateFormat(photo.PTime) + "</td>");
tr.append(td);
//删除编辑
td = $("<td><a pid='" + photo.PId + "' url='" + photo.PUrl + "' href='#'>删除</a> <a href='#' pid='" + photo.PId + "'>编辑</a></td>");
tr.append(td);
//删除
td.children("a:first").click(function() {
var id = $(this).attr("pid");
var url = $(this).attr("url");
//当前点击的a标签
var link = $(this);
$.get("PhotoDelete.ashx", "id=" + id + "&url=" + url, function(msg) {
if (msg == "1") {
//删除a标签所在的tr
//link.parent().parent().remove();
//删除成功 加载当前页码的数据
getPage(pageIndex);
} else if (msg == "0") {
alert("删除失败");
}
})
return false;
})
//编辑
td.children("a:last").click(function() {
$("#tbEdit").show("slow");
//当前a标签所在的行
var row = $(this).parent().parent();
var title = row.children("td:eq(1)").text();
var id = $(this).attr("pid");
var url = row.children("td:eq(2)").children("img").attr("src");
url = url.replace("images/", "");
//获取到表格中的图片标题和url,给文本框赋值
$("#txtName").val(title);
$("#txtUrl").val(url);
$("#txtId").val(id);
return false;
})
table.append(tr);
}
$("#content").append(table);
$("#pList").fadeIn("slow");
//生成页码条
var pre = getPre(pageIndex);
var next = getNext(pageIndex, pageCount);
$("#content").append($("<a href='javascript:getPage(1)'>首页</a>"));
$("#content").append($("<a " + pre + ">上一页</a>"));
$("#content").append($("<a " + next + ">下一页</a>"));
$("#content").append($("<a href='javascript:getPage(" + pageCount + ")'>尾页</a>"));
});
}
//上一页
function getPre(pageIndex) {
if (pageIndex > 1) {
pageIndex--;
return "href='javascript:getPage("+pageIndex+")'";
}
else {
pageIndex = 1;
return "";
}
}
//下一页
function getNext(pageIndex,pageCount) {
if (pageIndex < pageCount) {
pageIndex++;
return "href='javascript:getPage(" + pageIndex + ")'";
} else {
pageIndex = pageCount;
return "";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
header
</div>
<div id="content">
</div>
<div>
footer
</div>
<table id="tbEdit">
<tr>
<td>
标题:
</td>
<td>
<input type="text" id="txtName" />
<input type="hidden" id="txtId" />
</td>
</tr>
<tr>
<td>
图片:
</td>
<td>
<input type="text" id="txtUrl" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="btnOk" value="确定" />
<input type="button" id="btnCancel" value="取消" />
</td>
</tr>
</table>
</form>
</body>
</html>
2、PhotoEdit.ashx部分代码如下:
string str = context.Request.Form["id"];
string title = context.Request.Form["title"];
string url = context.Request.Form["url"];
int id;
if (int.TryParse(str, out id))
{
MyPhotoBlog.BLL.Photos bll = new MyPhotoBlog.BLL.Photos();
MyPhotoBlog.Model.Photos photo = bll.GetModel(id);
photo.PTitle = title;
photo.PUrl = url;
if (bll.Update(photo))
{
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
3、PagedList.ashx部分代码如下:
int pageIndex = 1; //当前页码
int pageSize = 3;// 每页几条
int pageCount;
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string s = context.Request.QueryString["page"];
if (int.TryParse(s, out pageIndex))
{
}
else
{
pageIndex = 1;
}
//输出json格式的字符串
context.Response.Write(GetPagedData());
}
string GetPagedData()
{
MyPhotoBlog.BLL.Photos bll = new MyPhotoBlog.BLL.Photos();
List<MyPhotoBlog.Model.Photos> list = bll.GetPageData(pageIndex, pageSize, out pageCount);
JavaScriptSerializer ser = new JavaScriptSerializer();
string json = ser.Serialize(list);
//移除掉]
json = json.Remove(json.Length - 1);
json = json + ",{\"pageCount\":"+pageCount+"}]";
return json;
}
3、Update.ashx部分代码如下:
string id = context.Request.QueryString["id"];
//up down
string type = context.Request.QueryString["type"];
MyPhotoBlog.BLL.Photos bll = new MyPhotoBlog.BLL.Photos();
string result = "-1";
if (type == "up")
{
if (bll.UpdateUp(int.Parse(id)))
{
result = "1";
}
else
{
result = "0";
}
}
else if(type == "down")
{
if (bll.UpdateDown(int.Parse(id)))
{
result = "1";
}
else
{
result = "0";
}
}
context.Response.Write(result);
4、PhotoDelete.ashx部分代码如下:
string str = context.Request.QueryString["id"];
string url = context.Request.QueryString["url"];
int id;
if (int.TryParse(str, out id))
{
MyPhotoBlog.BLL.Photos bll = new MyPhotoBlog.BLL.Photos();
if (bll.Delete(id))
{
//删除文件
string path = context.Server.MapPath("images/" + url);
System.IO.File.Delete(path);
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
JqueryAjax分页加载图片列表(编辑、支持、反对、删除记录同时删除文件)
最新推荐文章于 2021-08-06 04:32:35 发布