一个自定义栏的编辑代码:(------- 更改 上传图片为自定义背景图片 -------)

这是在后台控制器里面的相关代码:

     [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;  800px; text-align: center;">
                    <div style="height: 50px;">
                       </div>

                        <div style="height: 50px;">
                            <table  style=" 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>  &nbsp;&nbsp;&nbsp;&nbsp;   </td><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </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=" 54px; height: 24px; border: 0px; background-image: url(/images/index/img_37.gif);"
                                            id="btnUpfile5" />&nbsp;&nbsp;&nbsp;
                                        @Html.ValidationMessageFor(m => m.FBannerBg, "", new { @id = "uploading5" })
                                        <span> 支持jpg、gif、png或bmp格式</span>
                                    </td>
                                </tr>
                                 <tr><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </td><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </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>  &nbsp;&nbsp;&nbsp;&nbsp;   </td><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </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; 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;  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=" 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=" 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>&nbsp;&nbsp;<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=" 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>&nbsp;&nbsp;<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>
有些梦想是遥不可及的,除非你坚持!
原文地址:https://www.cnblogs.com/softmans/p/3213822.html