使用asp.net后台更新焦点图(已实现)
前段时间在做个新闻类网站(练习用的),首页有个焦点图需要在后台进行管理,由于楼主是菜菜,在一些提供asp.net模板下载的网站上,也下载许多,但是水平达不到,看不所以然。然后又看了些asp.net cms 又是看不所以然,实在没办法,就自己瞎写了个。居然能用,废话不多说了,直接上思路和源码。(本人是菜菜,在这发帖还是希望大牛们给点指导,比如使用public变量了。。。)
思路是:
1,数据库,新建一个表有id,url(图片存在本地的地址),title,content,等。
2,后台界面有个上传控件,上传图片到本地。提取上传后的图片url路径等。
3,前台焦点图使用的 jquery,图片的src用<#%address[]>绑定。。。
数据库就不说了,直接贴下后台的代码:
这是 上传图片的代码:
protected void Button1_Click(object sender, EventArgs e)
{
//利用FIleUpload控件的postedFIle属性的SaveAs方法进行保存,
//保存的路径应该是服务器端的绝对路径
//一般情况下,上传一个文件时要考虑到服务器上是否有同名文件,
//如果有往往会覆盖,除非有特殊需要。
//解决方法是用日期和时间自动重命名,保证不会和已有文件重名。
if (FileUpload1.HasFile)
{
//利用文件的ContentType属性是否是指定的图片类型
string strType = FileUpload1.PostedFile.ContentType;
if (strType == "image/bmp"|| strType == "image/jpg" ||strType== "image/jpeg"|| strType == "image/pjpeg" || strType == "image/gif" || strType == "image/png")
{
//用日期和时间自动重命名,保证不会和已有文件重名。
string strFileName = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() +
DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() +
DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString();
this.FileUpload1.SaveAs(Server.MapPath("images/" + strFileName + ".jpg"));
//上传成功后,页面Image控件显示上传的图片
Image1.ImageUrl = "images/" + strFileName + ".jpg";
}
else
Response.Write("<script>alert('照片格式不对,请重新上传')</script>");
}
}
然后,这是提交到数据库的代码:
protected void btnOK_Click(object sender, EventArgs e)
{
//取image控件的text值
string ImageUrl = Image1.ImageUrl.ToString();
//ckeditor1是前台添加的ckeditor控件的id
string strContent = ckeditor1.Text;
//Texttitle是前台的textBox的id
string title = Texttitle.Text;
//Textauthor是前台的textBox的id
string author = Textauthor.Text;
string sql = "insert into test(ImageUrl,title,author,content) values ('" +ImageUrl+ "','" +title + "','" + author + "','" + strContent + "');";
//执行数据编辑操作
if (DbManager.ExecuteNonQuery(sql)>0)
{
//DbManget是自定义的类,具体功能增删改查,大家都知道
defaulttxt();
Response.Write("<script>alert('插入成功')</script>");
}
else
Response.Write("<script>alert('插入失败')</scipt>");
}
//defaulttxt()方法是在上传成功后情况指定的控件值清空
private void defaulttxt()
{
ckeditor1.Text = "";
Texttitle.Text = "";
Image1.ImageUrl = "";
}
**********************************************************************************
然后看前台焦点图的实现吧
(再次说下吧,焦点图是jquey)
先看html代码:(看到我用的<%# xxx%>方式绑定数据,我也实在没办法。。莫喷)
<div id="hotpic">
<div id="NewsPic">
<a target="_blank" style="visibility: visible; display: block;" href="show.aspx?id=<%#ImgUrl[0]%>">
<img width="368px" height="184px" src="<%#Images[0] %>" class="Picture" alt="" title="<%# Title[0] %>" />
</a>
<a style="visibility: hidden; display: none;" target="_blank" href="show.aspx?id=<%#ImgUrl[1]%>">
<img class="Picture" src="<%#Images[1] %>" style="width: 368px; height: 184px;" alt="" title="<%# Title[1] %>" />
</a>
<a style="visibility: hidden; display: none;" target="_blank" href="show.aspx?id=<%#ImgUrl[2]%>">
<img class="Picture" src="<%#Images[2] %>" style="width: 368px; height: 184px;" alt="" title="<%# Title[2] %>" />
</a>
<a style="visibility: hidden; display: none;" target="_blank" href="show.aspx?id=<%#ImgUrl[3]%>">
<img class="Picture" src="<%#Images[3] %>" style="width: 368px; height: 184px;" alt="#" title="<%# Title[3] %>" />
</a>
<a style="visibility: hidden; display: none;" target="_blank" href="show.aspx?id=<%#ImgUrl[4]%>">
<img width="368px" height="184px" src="<%#Images[4] %>" class="Picture" alt="#" title="<%# Title[4] %>" />
</a>
<a style="visibility: hidden; display: none;" target="_blank" href="show.aspx?id=<%#ImgUrl[5]%>">
<img width="368px" height="184px" src="<%#Images[5] %>" class="Picture" alt="#" title="<%# Title[5] %>" />
</a>
<a style="visibility: hidden; display: none;" target="_blank" href="show.aspx?id=<%#ImgUrl[6]%>">
<img class="Picture" src="<%#Images[6] %>" style="width: 368px; height: 184px;" alt="#" title="<%# Title[6] %>" />
</a>
<div class="Nav">
<span class="Normal">7</span>
<span class="Normal">6</span>
<span class="Normal">5</span>
<span class="Normal">4</span>
<span class="Normal">3</span>
<span class="Normal">2</span>
<span class="Cur">1</span>
</div>
</div>
<div id="NewsPicTxt" style="width: 370px; overflow: hidden">
</div>
</div>
<script type="text/javascript">
$('#hotpic').liteNav(3000);
</script>
***************************************************************************
最看这个页面的c#代码吧:
public partial class _Default : System.Web.UI.Page
{
//
public string[] Images;
public int[] ImgUrl;
public string[] Title;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindV();
}
DataBind();
}
protected void BindV()
{
Images = new string[7];
ImgUrl = new int[7];
Title = new string[7];
//把上传的图片名字提交到数据
string sql = "select top (7) id ,ImageUrl, title from test order by id desc";
SqlConnection conn = new SqlConnection(DbManager.ConnectionString);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader sdr = cmd.ExecuteReader();
//执行数据编辑操作
int i=0;
while (sdr.Read())
{
//提取Images的地址
Images[i] = Convert.ToString(sdr["ImageUrl"]);
//提取image的id值,用来连接到查看详细的信息的变量show.aspx?id=..
ImgUrl[i] = Convert.ToInt32(sdr["id"]);
//提取title值
Title[i] = Convert.ToString(sdr["title"]);
i++;
}
sdr.Close();
cmd.Dispose();
conn.Close();
}
}
好吧,如何你看到这了,你是不是看到public变量定义的几个数据 感觉很别扭,我也是,但是也别的方法,但是还好,能用的,大牛们给点意见啊
这是下载地址jiaodaintu.zip
--------------------编程问答-------------------- 1. 一点设计的概念都没有,没有用到OO,应该设计ORM关系数据库映射,
2. 从结构上看,应该是在练习,一般用三层结构Model,BLL,DAL,如果说现在流行的做法,直接使用EDM.
3. 前台html的设计,没看到一个table,不知道你的页面如何?数据绑定最好用table+repeater --------------------编程问答-------------------- 多谢指点,额。。。那个设计概念嘛,这只是个练习 后台更新前台的图片而已,所以没搞那么多,前台只放了个焦点图。
我想知道 能不能有别的方法 去更新前台图片,或者不像我 在后台定义几个public变量 在前台绑定,总感觉不太好,但是没有别的方法
补充:.NET技术 , C#