最近在网站首页上想将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. Google C++单元测试框架GoogleTest---GTest的Sample1和编写单元测试的步骤

    如果你还没有搭建gtest框架,可以参考我之前的博客:http://www.cnblogs.com/jycboy/p/6001153.html.. 1.The first sample: sample ...

  2. Thread多线程(二):Runnable

        如果要让其他类使用线程就要用到runnable,其他thread就是实现了runnbale接口,其中run()方法就是对runnable接口中的run()方法的具体实现.有两个构造函数分别是: ...

  3. Git 常见的命令操作

    克隆                git clone git地址 查看分支         git branch 查看git库状态  git status 切换分支         git  che ...

  4. iOS开发之功能模块--用runtime给UIView类别拓展PressMenu工具

    这是个很有用的列别工具类,在聊天对话框添加和QQ一样的"复制.粘贴.取消"等选项,而且使用起来很方便,只要找到聊天泡泡内部的某个View,比如Label或者背景冒泡的UIImage ...

  5. Erlang/OTP 17.0-rc1 新引入的"脏调度器"浅析

    最近在做一些和 NIF 有关的事情,看到 OTP 团队发布的 17 rc1 引入了一个新的特性“脏调度器”,为的是解决 NIF 运行时间过长耗死调度器的问题.本文首先简单介绍脏调度器机制的用法,然后简 ...

  6. C++常见问题: 字符串分割函数 split

    C++标准库里面没有字符分割函数split ,这可太不方便了,我已经遇到>3次如何对字符串快速分割这个问题了.列几个常用方法以备不时之需. 方法一: 利用STL自己实现split 函数(常用,简 ...

  7. ubuntu下网络IP设置相关命令

    一.使用命令设置ubuntu的ip地址 1.修改配置文件blacklist.conf禁用IPV6: sudo vi /etc/modprobe.d/blacklist.conf 2.在文档最后添加 b ...

  8. git cherry-pick合并某个commit

    1.使用方法及其作用 git cherry-pick可以选择某一个分支中的一个或几个commit(s)来进行操作(操作的对象是commit).例如,假设我们有个稳定版本的分支,叫v2.0,另外还有个开 ...

  9. XLT格式化XML那点事(C#代码中的问题解决)(二)

    接上篇<XML通过XSL格式化的那点事(XML到自定义节点折叠显示)>,本文就如何将大的XLST分割成小文件和如何用C#将XML通过XSL生成HTML文件中的问题做下分析,避免有同样需求的 ...

  10. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...