一个自定义栏的编辑代码：（------- 更改 上传图片为自定义背景图片 -------）
这是在后台控制器里面的相关代码：
[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>
有些梦想是遥不可及的，除非你坚持！
浙公网安备 33010602011771号