最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果。遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Content/”以及“./Content/”之类的,但实际操作并没能实现新上传的图片路径加载到css代码中。首页部分css代码贴出:

 /*--banner--*/
         .banner {
             background:url(../images/banner-1.jpg) no-repeat 0px 0px;
             background-size: cover;
             -webkit-background-size: cover;
             -o-background-size: cover;
             -ms-background-size: cover;
             -moz-background-size: cover;
             min-height: 600px;
         }

  首页部分html贴出:

 <div class="banner">
     <div class="container">
         <h2>Humanity ,Love ,Devotion</h2>
         <h2></h2>
         <p></p>
         <a href="#service">快速获取我们提供的服务</a>
     </div>
 </div>

  之前思路是,将上传的图片路径获取后,保存在mysql数据库中,然后写一个分页,在分页里将路径读出来,这时候将css里background:url(../images/banner-1.jpg) no-repeat 0px 0px;换成了一个字段赋值;

  关于实现字段赋值实现是这样的:

 @using TheOne.Models
 @using TheOne.MySqlAccess
 @{
     SystemServiceAccess ssAccess = new SystemServiceAccess();
     String BannerPicUrl = ssAccess.GetBannerPic();
 }

  BannerPicUrl被加在 background:url(../@BannerPicUrl) no-repeat 0px 0px;

折腾许久的相对路径,没能达到效果,于是我想出另一种实现思路,能不能将css保留原样,而只要将css引入的图片在文件系统里进行更换、重命名。庆幸的是,asp.net 拥有强大的文件操作功能!于是我开始重新开始写实现功能代码。

  这是核心功能,里面有几点需要说明:

  [HttpPost]
         public ActionResult AddBannerPic(HttpPostedFileBase file)
         {
             //上传文章封面图片
             try
             {
                 )
                 {
                     //文件路径后要加后缀.jpg
                     string DeletePath =System.IO.Path.Combine(Server.MapPath( "~/Content/FrontEnd/images"),"Banner-1.jpg");
                     try
                     {
                         System.IO.File.Delete(DeletePath);//删除指定文件目录下的图片
                     }
                     catch (Exception f)
                     {

                         throw f;
                     }

                     //重命名上传的图片名称
                     string NewBannerPicName = "Banner-1.jpg";//指定新文件名
                     string Path = System.IO.Path.Combine(Server.MapPath("~/Content/FrontEnd/images"), NewBannerPicName);//更新前端Content文件夹下的目录Banner-1图片
                     file.SaveAs(Path);//存入新路径
                 }
             }
             catch (Exception e)
             {
                 throw e;

             return View("Index");
         }
  1. 写出上传页面,并在控制器中的action对文件进行操作,这里用到的上传方法比较老套,没有采用ajax,用的微软提供的方法——HttpPostedFileBase,这里需要说明的是,上传组件<input/>需要注意几点:<input name="file" id="file" type="file" class="file" />    name和id需要注明为file
  2. string DeletePath =System.IO.Path.Combine(Server.MapPath( "~/Content/FrontEnd/images"),"Banner-1.jpg");//这里已经写死了,其中Server.MapPath()这个非常实用,可以获取服务器目录的相对路径,保障了应用程序发布时的方便性。
  3. 这里要引入using System.IO;
  4. 当图片以二进制上传进入到action时,我们先将已存在的Banner-1.jpg删除,然后,重命名上传的文件名,并保存在旧目录中

  这样我刷新首页时,就能看到我刚上传的图片,这样的实现,没有使用数据库存储,也没有更改css相对路径,只需要使用到文件操作(System.IO)。

项目演示地址:http://www.libertas.ren/

关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案的更多相关文章

  1. 阿里云 Windows Server 2012 r2 部署asp.net mvc网站 平坑之旅

    做了多年的Web开发工作,网站部署也不在话下,可每次部署却并不是十分顺利,将本次在阿里云服务器上部署asp.net mvc网站遇到的问题记录如下. 平台是阿里云ECS,操作系统是 Windows Se ...

  2. 【转载】Asp.Net MVC网站提交富文本HTML标签内容抛出异常

    今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...

  3. 【转载】 Asp.Net MVC网站提交富文本HTML标签内容抛出异常

    今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...

  4. 关于linux asp.net MVC网站中 httpHandlers配置无效的处理方法

    近期有Jexus用户反映,在Linux ASP.NET MVC网站的Web.config中添加 httpHandlers 配置用于处理自定义类型,但是在运行中并没有产生预期的效果,服务器返回了404( ...

  5. ASP.NET MVC 网站开发总结(三) ——图片截图上传

    本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> < ...

  6. Asp.net MVC网站的基本结构

    Asp.net MVC网站的基本结构:Controller->IBLL(定义业务接口)->BLL->DA(调用Utility)->数据库 ,其中A->B表示A调用B 1. ...

  7. 总结一下ASP.NET MVC 网站的部署问题

    总结一下ASP.NET MVC 网站的部署问题 近日,准备把MVC建了一个新的测试站点部署到IIS上面,结果没想到出现了一系列的问题和错误,准备记录一下. 第一个问题,就是如何将MVC的站点部署到II ...

  8. 用网站(WebSite而不是WebProject)项目构建ASP.NET MVC网站

    从ASP.NET MVC第一个版本开始到现在,创建ASP.NET MVC项目的官方方法只有一个,“文件”->“新建”->“项目”,然后选择ASP.NET MVC X Web应用程序. 这种 ...

  9. 学习ASP.NET MVC(七)——我的第一个ASP.NET MVC 查询页面

    在本篇文章中,我将添加一个新的查询页面(SearchIndex),可以按书籍的种类或名称来进行查询.这个新页面的网址是http://localhost:36878/Book/ SearchIndex. ...

随机推荐

  1. 浅析:点击父控件时,子控件中的textview自动进入选中状态

    原因:父控件属性android:clickable="true",而textview之类的自控件默认不可点击,没有独立的点击监听,这样选中父控件时,textview之类的子控件也进 ...

  2. 操作系统开发系列—1.HelloWorld ●

    org 07c00h ;伪指令,告诉编译器程序会被加载到7c00处 mov ax, cs mov ds, ax mov es, ax call DispStr ;调用显示字符串例程 jmp $ ;无限 ...

  3. border 外边框

    语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...

  4. SYMBDSNAP_SDK[3943]: Failed to open device: /dev/symbdsnapctl, errno: 2

    在Linux的日志/var/log/message里面看到下面错误信息: Oct 26 09:48:42 xxxxxxx SYMBDSNAP_SDK[3943]: Failed to open dev ...

  5. 小心SQL SERVER 2014新特性——基数评估引起一些性能问题

    在前阵子写的一篇博文"SQL SERVER 2014 下IF EXITS 居然引起执行计划变更的案例分享"里介绍了数据库从SQL SERVER 2005升级到 SQL SERVER ...

  6. SQL Server Column Store Indeses

    SQL Server Column Store Indeses SQL Server Column Store Indeses 1. 概述 2. 索引存储 2.1 列式索引存储 2.2 数据编码和压缩 ...

  7. iptables中文介绍 、基本使用操作命令(转)

    iptables 命令介绍   原文链接http://www.cnblogs.com/wangkangluo1/archive/2012/04/19/2457072.html iptables防火墙可 ...

  8. GIT/node使用

    一. 为不同域名的库自动保存不同的用户名和密码 比如 公司的库是 http://source.sohu.com,另一个是 http://www.github.com,命令行中分别两个命令就搞定了 gi ...

  9. 如何在Oracle中复制表结构和表数据

    1. 复制表结构及其数据: create table table_name_new as select * from table_name_old 2. 只复制表结构: create table ta ...

  10. 【WPF高级】Cue or Hint or Watermark or Placehoder in Controls(为控件添加提示,水印,占位符)

      通过Style实现对Texbox添加水印 <Style x:Key="placeHolder" TargetType="{x:Type TextBox}&quo ...