一个自定义栏的编辑代码:(------- 更改 上传图片为自定义背景图片 -------)
这是在后台控制器里面的相关代码:
[SupportFilter] public ActionResult UserBanner() { return View(CurrentUser); } [HttpPost] [SupportFilter] public ActionResult UserBanner(UserInfo model) { //using (bll) //{ // CurrentUser.FSpaceName = model.FSpaceName; // CurrentUser.FBannerBg = model.FBannerBg; // if (bll.Edit(CurrentUser)) // { // ViewBag.ReturnResult = "True"; // return View(CurrentUser); // } // else // { // return View(model); // } //} using (bll) { // string user_img = CurrentUser.FUserImgBig; // string user_simg = CurrentUser.FUserImgSmall; // string smallimg = getsmallimgname(model.FUserImgBig); string bannerbg = CurrentUser.FBannerBg; string spacename = model.FSpaceName; // CurrentUser.FUserImgBig = model.FUserImgBig; // CurrentUser.FUserImgSmall = smallimg; CurrentUser.FBannerBg = model.FBannerBg; CurrentUser.FSpaceName = model.FSpaceName; //if (bll.Edit(CurrentUser)) //{ // if (user_img != null && System.IO.File.Exists(Server.MapPath(user_img)) && user_img != model.FUserImgBig) // { // System.IO.File.Delete(Server.MapPath(user_img)); // } // if (user_simg != null && System.IO.File.Exists(Server.MapPath(user_simg)) && user_simg != smallimg) // { // System.IO.File.Delete(Server.MapPath(user_simg)); // } // ViewBag.ReturnResult = "True"; // return View(CurrentUser); //} //else //{ // return View(model); //} if (bll.Edit(CurrentUser)) { //bannerbg:背景图片对象 ; spacename:空间名称文字 ;CurrentUser :当前用户
if (bannerbg != null && System.IO.File.Exists(Server.MapPath(bannerbg)) && bannerbg != model.FBannerBg) { System.IO.File.Delete(Server.MapPath(bannerbg)); } if (spacename != null && System.IO.File.Exists(Server.MapPath(spacename)) && spacename != model.FSpaceName) { // bll.Create(model); System.IO.File.Delete(Server.MapPath(spacename)); //System.IO.File.Create(Server.MapPath(spacename)); } ViewBag.ReturnResult = "True"; return View(CurrentUser); } else { return View(model); } } }
前台相关代码:
<form action="" method="post" name = "form1" id ="form1"> @Html.HiddenFor(m => Model.FId) <input type="hidden" id="hid_menuitem" value="menuspace_album" /> <div class= "bgc" style="height: 900px; margin-top: 10px;text-align:center"> <div style="float:left; width: 800px; text-align: center;"> <div style="height: 50px;"> </div> <div style="height: 50px;"> <table style="width: 60%;margin:auto"> <tr class="imgbg"><!--- ---> <td> <b> 编辑空间名称:</b> </td> <td> @*<input type="text" name="SpaceName" value="" id="SpaceName" style="font-family: Verdana,Arial; font-size: 10pt;" class="wd2" />*@ @Html.TextBoxFor(m => Model.FSpaceName, new { @class = "input_bg"}) </td> </tr> <tr><td> </td><td> </td></tr> <tr class="imgbg_top"> <td> <b> 编辑上传背景图片:</b> </td> <td> @Html.Hidden("txtWorksImage5") <!-- FBannerBg FUserImgBig --> @Html.HiddenFor(m => Model.FBannerBg, new { @class = "input_bg", ReadOnly = "readonly", @id = "FUserImgBig" }) <input type="button" style="width: 54px; height: 24px; border: 0px; background-image: url(/images/index/img_37.gif);" id="btnUpfile5" /> @Html.ValidationMessageFor(m => m.FBannerBg, "", new { @id = "uploading5" }) <span> 支持jpg、gif、png或bmp格式</span> </td> </tr> <tr><td> </td><td> </td></tr> <tr> <td> <b>背景预览效果:</b> </td> <td> <img id="img_scan" width="250" height="50" style="border: 0" alt="请选择合适可背景图片,最佳为:980*400像素" src="/images/index/select88.jpg"/> <!--添加后的预览图片框--> </td> </tr> <tr><td> </td><td> </td></tr> <tr> <td> <input name="Submit" type="submit" class="btn_style" value="保存" style="height: 24px" /> <span id="saveMsg" style="color: Green; margin-left: 10px"></span> </td> <td> </td> </tr> </table> </div> @* <div style="height: 100px;"> @{ if (File.Exists(Server.MapPath(Model.FUserImgSmall))) { <img src="@Model.FUserImgSmall" width="100" height="100" style=" border:1px solid gray;" /> } else { <img src="/images/uploadimg_default.jpg" width="100" height="100" style="border: 1px solid gray;" /> } } </div>*@ <div style="height: 350px;"> </div> </div> @* <div style="float:left; width:1px; height:500px; margin-left:10px; margin-right:10px"> <img src="/images/menu_line.gif" alt="" height="500px" width="1px"/> </div>*@ @* <div style="float: left; width: 300px;"> <div style="height: 20px;"> 设置新头像</div> <div> 1、使用真实照片,展示真我风采<br /> 2、支持jpg、gif、png或bmp格式 </div> <div style="margin-top: 10px;"> @Html.Hidden("txtWorksImage5") @Html.HiddenFor(m => Model.FUserImgBig, new { @class = "input_bg", ReadOnly = "readonly" }) <input type="button" style="width: 54px; height: 24px; border: 0px; background-image: url(/images/index/img_36.gif);" id="btnUpfile5" /> @Html.ValidationMessageFor(m => m.FUserImgBig, "", new { @id = "uploading5" }) </div> <div style="margin-top: 10px; vertical-align: middle;"> <img id="img_scan" width="100" height="100" style="border: 0" /> </div> <div style="margin-top: 15px;"> </div> <div style="vertical-align: middle;"> <input name="Submit" type="submit" class="btn_style" value="保存" style="height: 24px" /> <span id="saveMsg" style="color: Green; margin-left: 10px"></span> </div> </div>*@ </div> </form>
与之相关代码:
var vAlertMsg = '文件格式不正确,请选择 jpg|jpeg|gif|png|zip 格式的文件!'; function createUploader(obj) { var upload1 = new AjaxUpload('#btnUpfile' + obj, { action: '/Handler/userimg_upload.ashx', responseType: 'json', autoSubmit: true, onSubmit: function (file, ext) { if (obj == 1 || obj == 2) { if (!(ext && /^(jpg|jpeg|gif|png|bmp)$/ig.test(ext))) { alert("文件格式不正确,请选择 jpg|jpeg|gif|png 格式的文件!", '系统提示'); return false; } } else if (obj == 5) { if (!(ext && /^(jpg|jpeg|gif|png)$/ig.test(ext))) { alert("文件格式不正确,请选择 jpg|jpeg|gif|png 格式的文件!", '系统提示'); return false; } } else if (obj == 4) { if (!(ext && /^(pdf)$/ig.test(ext))) { alert("文件格式不正确,请选择 pdf 格式的文件!", '系统提示'); return false; } $("#tr_SetUp").show(); } else { if (!(ext && /^(jpg|jpeg|gif|png|zip)$/ig.test(ext))) { alert(vAlertMsg, '系统提示'); return false; } } $('#uploading' + obj).html('<img src="http://images.cnblogs.com/index/ajax-loader.gif" />文件上传中,请稍后!'); }, onComplete: function (file, json) { //var data = eval("(" + json + ")"); //alert(json['FilePath']); var err = json['Msg']; var file1; if (err != null && err != '') { $('#uploading' + obj).html('<span>*</span>上传失败'); } else { file1 = json['FilePath']; //alert(file1); $('input[id$="txtWorksImage' + obj + '"]').val(file1); //$('input[id$="_WorksImage' + obj + '"]').val(file1).attr('disabled', 'true'); $('#uploading' + obj).html('<span>*</span>上传成功'); if (obj == 1) { $('input[id$="FImageSrc"]').val(file1); } else if (obj == 2) { $('input[id$="FIcon"]').val(file1); } else if (obj == 3) { $('input[id$="GBigPic"]').val(file1); } else if (obj == 4) { $('input[id$="S_FPath"]').val(file1); } else if (obj == 5) { $('input[id="FUserImgBig"]').val(file1); $('#img_scan').attr("src",file1); } } } }); }
与之相关的模板页相关代码:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Scripts.Render("~/Farm/jquery") @Scripts.Render("~/Farm/jqueryval") @Styles.Render("~/newcss/Zone") @Styles.Render("~/css/page") @Styles.Render("~/PersonalSpace/Style") @Scripts.Render("~/PersonalSpace/jqueryui") @Styles.Render("~/css/jqueryui") </head> <body> <!--引用头部 --> @RenderPage("../parts/Head.cshtml") @using (UserInfoBLL bll = new UserInfoBLL()) { string userId = LoginBLL.GetCurrentUserFid(); UserInfo userInfo = bll.Fetch(userId); var bgUrl = userInfo.FBannerBg; var bgName = userInfo.FSpaceName; if (bgName == null) { bgName = userInfo.FName + "的空间"; } else {
//在非默认状态下,更改空间名称(实现自定义空间名称)
bgName = userInfo.FSpaceName; } if (bgUrl == null) {
//默认状态下的空间背景图片
bgUrl = "url(/images/personalSpace/980personBanner.jpg)"; } else {
//动态更改背景图片
bgUrl = "url(" + bgUrl + ")"; //bgUrl ="url(" + (string.IsNullOrEmpty(Model.FBannerBg) ? ImageConfig.ErrorImagePath : Model.FBannerBg) + ")"; //WTH 修改! //bgUrl = "@(string.IsNullOrEmpty(Model.FBannerBg) ? ImageConfig.ErrorImagePath : Model.FBannerBg)"; //WTH 修改! } <script type="text/javascript"> $(function () { $("#personalBg").css("background-image", '@bgUrl'); $("#userSpaceName").html('@bgName'); }); </script> <div class="two_bg"> <!--中间内容区域 --> <div id="personal_content"> <div class="personal_ad" id="personalBg"> <span id="userSpaceName" style="margin-left: 10px; font-size: 22px; color: White; margin-top: 50px; float: left;"></span> <div id="weather"> <span class="weather_font" id="weather_one_d" style="color:#FFFFFF">00-00℃</span> <span id="weather_one_txt" style="color:#FFFFFF"> 加载中...</span><img id="weather_one_img" src="" style="width: 35px; margin-left: 10px" /> <br /> <img width="27" height="15" src="/images/today_icon.png" /> <span class="weather_bottom_font" style="color:#FFFFFF"><span id="weatherDate">2013年1月1号</span> <span id="weatherWeek">星期一</span></span> </div> </div> <div class="clear"> </div> <!--引用菜单 --> @RenderPage("../parts/Menu.cshtml") <div> <div> @RenderBody() </div> </div> </div> <!--引用尾部 --> @RenderPage("../parts/Foot.cshtml") </div> } <script type="text/javascript"> $(function () { //加载完成后,更新天气 //请求天气数据 101200101是武汉市的天气代码 $.getJSON('/Home/Home/ReturnJsonWeather/101200101', null, function (data) { var d = data.weatherinfo; if (d != null) { $('#weatherDate').text(d['date_y']); //日期 $('#weatherWeek').text(d['week']); //星期 //今日天气 $('#weather_one_img').attr('src', '/images/WeatherPng/' + d['img1'] + '.png'); //天气图片 $('#weather_one_txt').text(d['weather1']); //天气信息 $('#weather_one_d').text(d['temp1']); //温度 } }); }); </script> </body> </html>
值得参考的js文件书写格式方法:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Scripts.Render("~/Farm/jquery") @Scripts.Render("~/Farm/jqueryval") @Styles.Render("~/newcss/Zone") @Styles.Render("~/css/page") @Styles.Render("~/PersonalSpace/Style") @Scripts.Render("~/PersonalSpace/jqueryui") @Styles.Render("~/css/jqueryui") </head> <body> <!--引用头部 --> @RenderPage("../parts/Head.cshtml") @using (UserInfoBLL bll = new UserInfoBLL()) { string userId = LoginBLL.GetCurrentUserFid(); UserInfo userInfo = bll.Fetch(userId); var bgUrl = userInfo.FBannerBg; var bgName = userInfo.FSpaceName; if (bgName == null) { bgName = userInfo.FName + "的空间"; } else { bgName = userInfo.FSpaceName; } if (bgUrl == null) { bgUrl = "url(/images/personalSpace/980personBanner.jpg)"; } else { bgUrl = "url(" + bgUrl + ")"; //bgUrl ="url(" + (string.IsNullOrEmpty(Model.FBannerBg) ? ImageConfig.ErrorImagePath : Model.FBannerBg) + ")"; //WTH 修改! //bgUrl = "@(string.IsNullOrEmpty(Model.FBannerBg) ? ImageConfig.ErrorImagePath : Model.FBannerBg)"; //WTH 修改! } <script type="text/javascript"> $(function () { $("#personalBg").css("background-image", '@bgUrl'); $("#userSpaceName").html('@bgName'); }); </script> <div class="two_bg"> <!--中间内容区域 --> <div id="personal_content"> <div class="personal_ad" id="personalBg"> <span id="userSpaceName" style="margin-left: 10px; font-size: 22px; color: White; margin-top: 50px; float: left;"></span> <div id="weather"> <span class="weather_font" id="weather_one_d" style="color:#FFFFFF">00-00℃</span> <span id="weather_one_txt" style="color:#FFFFFF"> 加载中...</span><img id="weather_one_img" src="" style="width: 35px; margin-left: 10px" /> <br /> <img width="27" height="15" src="/images/today_icon.png" /> <span class="weather_bottom_font" style="color:#FFFFFF"><span id="weatherDate">2013年1月1号</span> <span id="weatherWeek">星期一</span></span> </div> </div> <div class="clear"> </div> <!--引用菜单 --> @RenderPage("../parts/Menu.cshtml") <div> <div> @RenderBody() </div> </div> </div> <!--引用尾部 --> @RenderPage("../parts/Foot.cshtml") </div> } <script type="text/javascript"> $(function () { //加载完成后,更新天气 //请求天气数据 101200101是武汉市的天气代码 $.getJSON('/Home/Home/ReturnJsonWeather/101200101', null, function (data) { var d = data.weatherinfo; if (d != null) { $('#weatherDate').text(d['date_y']); //日期 $('#weatherWeek').text(d['week']); //星期 //今日天气 $('#weather_one_img').attr('src', '/images/WeatherPng/' + d['img1'] + '.png'); //天气图片 $('#weather_one_txt').text(d['weather1']); //天气信息 $('#weather_one_d').text(d['temp1']); //温度 } }); }); </script> </body> </html>
有些梦想是遥不可及的,除非你坚持!