参加工作后的第二个任务,增加网站的功能,用了JS，MVC,

因为我刚来公司，之前做网站的大哥辞职了，对于我这个菜鸟来说，大部分的功能实现是按着之前那大哥的原理做的。

上面的大概就是我的效果图了。

我做这个的时候遇到过很多蠢问题，因为自己的原因，所以耽误了很多的时间。

正如大家看到的，我要完成这个任务

一、从数据库中得到数据

二、将数据显示在页面上（这里还有因为登陆的用户不同，展示的效果不同，当然这个在我之前有人已经做好了）

三、当然是验证数据的正确性

第一步  因为数据库的格式如下图

1、正如大部分实习生一样，我刚开始就想着用mysql语句来得到数据库中的值，后来看了看大神写的代码 完全是用EF 来操作数据库的 （当然在这之前我不知道EF是什么），仔细研究不难发现，大神写了一个方法，我可以直接取出我想要的数据。

得到了数据，我只要去掉’|‘ 并且用数组存起来就行（这里有一个隐藏问题）

public PageManagement GetPageManagement()
        {
            var _ResidentNO = _settingService.GetValue("WebPage", "ResidentNO");
            var _strCompanyNO = _settingService.GetValue("WebPage", "CompanyNO");
            var _strResidentEmail = _settingService.GetValue("WebPage", "ResidentEmail");
            var _strResident = _ResidentNO.Value;
            var _strCompany = _strCompanyNO.Value;
            var _strEmail = _strResidentEmail.Value;
            string[] strResident = _strResident.Split('|');
            string[] strCompany = _strCompany.Split('|');
            string[] strEmailAddress = _strEmail.Split('|');
            string name = "邮箱";
            var model = new PageManagement();
            model.EmailAddress = strEmailAddress;
            model.TelN0 = strResident;
            model.CompanyNO = strCompany;
            model.Name = name;
            return model;
        }

namespace Lanxum.Domas.Model
{
    public partial class PageManagement : ValidationViewModelBase
    {
        public int ID { get; set; }


        private string _name;


        [Required(ErrorMessage = "必须写联系人", AllowEmptyStrings = false)]
        [StringLengthAttribute(30, ErrorMessage = "用户姓名最长30字符")]
        [RegularExpressionAttribute(RegularEx.Strs, ErrorMessage = "输入格式不正确,不能包换单引号和双引号")]
        [DisplayName("联系人")]
        public string Name { get; set; }


        private string[] _telNO;


        [StringLengthAttribute(50, ErrorMessage = "联系电话最长50字符")]
        [RegularExpressionAttribute(RegularEx.Chars, ErrorMessage = "输入格式不正确")]
        [DisplayName("联系电话")]
        public string[] TelN0 { get; set; }


        private string[] _companyNO;


        [StringLengthAttribute(50, ErrorMessage = "公司总部电话最长50字符")]
        [RegularExpressionAttribute(RegularEx.Chars, ErrorMessage = "输入格式不正确")]
        [DisplayName("公司总部电话")]
        public string[] CompanyNO { get; set; }


        private string[] _emailAddress;


        [Required(ErrorMessage = "必须输入电子邮件地址")]
        [StringLengthAttribute(50, ErrorMessage = "电子邮件最长50字符")]
        [RegularExpressionAttribute(RegularEx.Email, ErrorMessage = "输入格式不正确")]
        [DataType(DataType.EmailAddress)]
        [DisplayName("邮箱地址")]
        public string[] EmailAddress { get; set; }


        public bool IsDelete { get; set; }
    }
}

OK，至此第一步完成，数据已经传来了，并且通过model 传给了前台。

第二步：前台展示数据

如图所示

我只要设计好格式，然后用动态生成html的方式就可以做到上面的要求，也就是循环我从后台得到的数组

并且之前有人做过了，我更加容易做到

<form method="post">
    <div class="c2 fr" id="main">
        <!--工具栏-->
   <div class="m2" role="region">
    <div class="b">
    <span action="AddPageManagement"><a>服务热线</a></span>
    </div>
   </div>
   <!--工具栏-->
        <!--表格-->
        <div class="m4" role="region">
            @{  
            <div style="overflow-x:auto;overflow-y:hidden;position:relative;">
                <div class="h extraWidth" id="divHead" style="width:802px;">
                    <div class="hr1 clearfix">
                        <span class="extraWidth" style="width:300px">联系人</span>
                        <span class="extraWidth" style="width:300px;">联系方式</span>
   <span class="s2" style="width:194px;">操作</span> 
                    </div>
                </div>
                <div class="b extraWidth" id="divData1" style="width:803px;">
                    <table id="deptList1" cellspacing="0" cellspading="0" style="table-layout:fixed;">
                    <tbody>
                        <tr>
                            <td width="300px">
                                驻场人员
                            </td>
                            <td name="t_TelNO" width="301px";>
                                @foreach (var item in Model.TelN0)
                                {
                                    @item<br/>
                                }
                            </td>
                           <td width="194px" class="s2">
                                <a action="EditTelNO" href="javascript:;" οnclick="editTelNO(this)">编辑</a>
                           </td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <div class="b extraWidth" id="divData2" style="width:803px;">
                    <table id="deptList2" cellspacing="0" cellspading="0" style="table-layout:fixed;">
                        <tbody>
                            <tr>
                                <td width="300px">公司总部</td>
                                <td name="t_CompanyEmail" width="301px">
                                    @foreach (var item in Model.CompanyNO)
                                    {
                                        @item<br />
                                    }
                                </td>
                                <td width="194px" class="s2">
                                    <a action="EditCompany" href="javascript:;" οnclick="editCompany(this)">编辑</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="b extraWidth" id="divData3" style="width:803px;">
                    <table id="deptList3" cellspacing="0" cellspading="0" style="table-layout:fixed;">
                        <tbody>
                            <tr>
                                <td width="300px">邮箱</td>
                                <td name="t_CompanyEmail" width="301px">
                                    @foreach (var item in Model.EmailAddress)
                                    {
                                        @item<br />
                                    }
                                </td>
                                <td width="194px" class="s2">
                                    <a action="EditEmail" href="javascript:;" οnclick="editEmail(this)">编辑</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
                }
        </div>
        <!--表格-->
        <!--分页-->
        <div class="fy0">
            <div id="fy">
            </div>
        </div>
        <!--分页-->
    </div>
</form>

补充一点（为什么这个页面管理和服务热线我没设置会出来，因为这是在数据库中操作的，当初我找这个问题也找了好久，后来再数据库中才看到了这个大神的办法）

如此前台页面也就做成了，当然当你打开这个页面的时候，并不是下面的这个样子，而是在（“我的菜单” ）下面

再者我发现之前那人写代码每个html页面都有一句类似于下面的    

$(function () {
        $.clickLeftMenu(2, 84, 85)
    })

因为在设计页面管理与服务热线的时候，我特意比较了他说写的几个数字的关系，因为我很快得出了答案，并且将$.clickLeftMenu（）中间的数字换好。

重新打开页面，果然成了。

接着就来做编辑页面了。（首先我得设计好编辑页面的格式）

然后用 JS跳转页面，当按下“编辑的时候”

function editTelNO(_this) {
        var eventObj = $(_this);
        var diaObj = $.fox.dialog({
            title: "编辑驻场人员联系方式",
            width: 600,
            uri: "/PageManagement/TelNOEdit",
            modelValidation: false,

beforeSubmit: function () {

                var check = $("#Eimg_strEmailAddress").attr('src');
                if (check == "/content/e.png") {
                    return false;
                }
                else {
                    return true;
                }
            },
            afterSubmit: function (data) {
                data = eval('(' + data + ')');
                if (data.ret) {
                    diaObj.dialog("close");
                    $.showTopPrompt('保存成功');
                    window.location.href= "/PageManagement/Index";
                } else {
                    $.showTopPrompt(data.msg,10000);
                }
                eventObj = null;
            }
        });
    }

刚开始我还是跟之前Index页面一样写，数据得到了，什么都完成了。

但是当做数据验证的时候，就发现问题了，照理我这样做可行（我可以在后台验证数据），但是之前做的人明显是前台验证，而且要考虑到缓存等各种问题，在前台能做的就不要去后台做，然后我就改呗，用Validator数据验证到时候发现，我传值的方式有问题，无法用lamda表达式，思考后才想到

@model Lanxum.Domas.Model.PageManagement

没有引用PageManagement类

然后引用了之后，重新生成，运行试一试，还是不行。出了错误，理解后发现 @Html.ValidationMessageFor(model => model.Name)  不能 用于数组，只能用于字符串。我愁的啊，各种试，各种百度，都找不到解决办法。问了老大，老大说自己想，不能乱改。眼看就要交差了。于是我就自己用JS 写了个验证数据的方法，并且设计了一样的样式

代码如下

@model Lanxum.Domas.Model.PageManagement
@{
    ViewBag.Title = "TelNOEdit";
    Layout = "~/Views/Shared/_PartLayout.cshtml";
}
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Scripts/loopj/styles/token-input-facebook.css")">
@using(Html.BeginForm())
{
    @*<form action="/account/login" method="post"></form>*@
    @Html.ValidationSummary(true)
    <table>
        @{  
            <tr>
                <th>
                    联系人：
                </th>
                <td>
                    <input id="srtTelNOName" name="srtTelNOName" type="text" value="驻场人员" disabled="disabled"/>
                </td>
                
            </tr>
            <tr>
                <th>
                    联系方式：
                </th>
            </tr>
            for (int i = 0; i < Model.TelN0.Length; i++)
            {
                <tr>
                    <th>
                    </th>
                    <td id="astrTelNO">
                        <input style="width:164.5px;height:16px;" οnfοcus="enter(this)" οnblur="leave(this)" id="strTelNO" name="strTelNO" type="text" value="@Model.TelN0[i]"/>
                    </td>
                    <td>
                        <span>
                            <a href="#" οnclick="deleteTelNO(this)">删除</a>
                        </span>
                    </td>  
                </tr>
                <tr>


                </tr>  
            }
            <tbody id="addData">
                
            </tbody>
            <tr>
                <th>
                </th>
                <td>
                    <input type="text" value="" disabled="disabled"/>
                </td>
                <td>
                    <input type="button" value="添加" οnclick="addTelNO()"/>
                </td>
            </tr>

function deleteTelNO(_this) {
        var eventObj = $(_this);
        eventObj.parent().parent().prev().children("input").val("");
        eventObj.parent().parent().parent().html("");
        //$("#strTelNO").val("");
        //$("#astrTelNO").css("display", "none");
    }
    function addTelNO() {
        var oldData = $("#addData").html();
        var strHtml = '<tr><td style="width:100px"></td><td><input οnfοcus="enter(this)" οnblur="leave(this)" name=strAddTelNO type="text"/></td><td><span><a href="#" οnclick="deleteTelNO(this)">删除</a></span></td></tr><tr></tr>';
        //$("#addData").html(oldData+strHtml);
        $("#addData").append(strHtml);

 function enter(_this) {
        var eventObj = $(_this);
        var telNO = eventObj.val();
        var strHtml = "";
        var strNewHtml = "";
        var findHtml = "";
        if (telNO!=""||null) {
            var telNOstr = /^0{0,1}(13[0-9]|15[3-9]|15[0-2]|18[0-9])[0-9]{8}$/;
            var telNOstr2 = /^0\d{2,3}-?\d{7,8}$/;
            isok = telNOstr.test(telNO);
            isok2 = telNOstr2.test(telNO);
            if (isok==true||isok2==true) {
                strHtml = '<div class="input-validation-error-img"><img id="img_strEmailAddress" src="/content/r.png"></div>';
                newStrHtml = '<img id="img_strEmailAddress" src="/content/r.png">';
                findHtml = eventObj.next().length;
                if (findHtml == 0) {
                    eventObj.parent().append(strHtml);
                }
                else {
                    eventObj.next().html(newStrHtml);
                }
            }
            else {
                strHtml = '<div class="input-validation-error-img"><img id="Eimg_strEmailAddress" src="/content/e.png"></div>';
                strNewHtml = '<th></th><td><input class="class1" style="color: rgb(59, 59, 59);background-color: rgb(247, 243, 177);width:125px; height:10px" type="text" value="电话格式不正确"/><span class="class1"><span class="class2" style="left: 1px; border-bottom-color: rgb(247, 243, 177);"></span></span></td>';
                newStrHtml = '<img id="Eimg_strEmailAddress" src="/content/e.png">';
                findHtml = eventObj.next().length;
                if (findHtml == 0) {
                    eventObj.parent().append(strHtml);
                    eventObj.parent().parent().next().append(strNewHtml);
                }
                else {
                    eventObj.next().html(newStrHtml);
                    eventObj.parent().parent().next().html(strNewHtml);
                }
            }
        }
        else {
            strHtml = '<div class="input-validation-error-img"><img id="Eimg_strEmailAddress" src="/content/e.png"></div>';
            strNewHtml = '<th></th><td><input class="class1" style="color: rgb(59, 59, 59);background-color: rgb(247, 243, 177);width:125px; height:10px" type="text" value="联系电话不能为空"/><span class="class1"><span class="class2" style="left: 1px; border-bottom-color: rgb(247, 243, 177);"></span></span></td>';
            newStrHtml = '<img id="Eimg_strEmailAddress" src="/content/e.png">';
            findHtml = eventObj.next().length;
            if (findHtml == 0) {
                eventObj.parent().append(strHtml);
                eventObj.parent().parent().next().append(strNewHtml);
            }
            else {
                eventObj.next().html(newStrHtml);
                eventObj.parent().parent().next().html(strNewHtml);


            }
        }
    }
    function leave(_this) {
        var eventObj = $(_this);
        var telNO = eventObj.val();
        var strHtml = "";
        var strNewHtml = "";
        var findHtml = "";
        if (telNO != "" || null) {
            var telNOstr = /^0{0,1}(13[0-9]|15[3-9]|15[0-2]|18[0-9])[0-9]{8}$/;
            var telNOstr2 = /^0\d{2,3}-?\d{7,8}$/;
            isok = telNOstr.test(telNO);
            isok2 = telNOstr2.test(telNO);
            if (isok==true||isok2==true) {
                strHtml = '<div class="input-validation-error-img"><img id="img_strEmailAddress" src="/content/r.png"></div>';
                newStrHtml = '<img id="img_strEmailAddress" src="/content/r.png">';
                findHtml = eventObj.next().length;
                if (findHtml == 0) {
                    eventObj.parent().append(strHtml);
                }
                else {
                    eventObj.next().html(newStrHtml);
                }
                eventObj.parent().parent().next().html("");
            }
            else {
                strHtml = '<div class="input-validation-error-img"><img id="Eimg_strEmailAddress" src="/content/e.png"></div>';
                strNewHtml = '<th></th><td><input class="class1" style="color: rgb(59, 59, 59);background-color: rgb(247, 243, 177);width:125px; height:10px" type="text" value="电话格式不正确"/><span class="class1"><span class="class2" style="left: 1px; border-bottom-color: rgb(247, 243, 177);"></span></span></td>';
                newStrHtml = '<img id="Eimg_strEmailAddress" src="/content/e.png">';
                findHtml = eventObj.next().length;
                if (findHtml == 0) {
                    eventObj.parent().append(strHtml);
                }
                else {
                    eventObj.next().html(newStrHtml);
                }
                eventObj.parent().parent().next().html("");
            }
        }
        else {
            strHtml = '<div class="input-validation-error-img"><img id="Eimg_strEmailAddress" src="/content/e.png"></div>';
            strNewHtml = '<th></th><td><input class="class1" style="color: rgb(59, 59, 59);background-color: rgb(247, 243, 177);width:125px; height:10px" type="text" value="联系电话不能为空"/><span class="class1"><span class="class2" style="left: 1px; border-bottom-color: rgb(247, 243, 177);"></span></span></td>';
            newStrHtml = '<img id="Eimg_strEmailAddress" src="/content/e.png">';
            findHtml = eventObj.next().length;
            if (findHtml == 0) {
                eventObj.parent().append(strHtml);
            }
            else {
                eventObj.next().html(newStrHtml);
            }
            eventObj.parent().parent().next().html("");
        }
    }
</script>
<style type="text/css">
    .class1 {
        position: absolute;
        margin: -13px 0;    
        padding: 0px 6px;
        z-index:99;
        _width:160px;
        text-align:center;
        border: 1px solid #7992B0;
        background-color: #8F8F8F;
        color:#FFFFFF;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        box-shadow:         5px 5px 10px rgba(0, 0, 0, 0.6);
        -moz-box-shadow:    5px 5px 10px rgba(0, 0, 0, 0.6);
        -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
    }
    .class2 {
        position: absolute;
        top: -10px;
        left: 20px;
        margin: 0;
        border-top: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #8F8F8F;
        padding: 0;
        width: 0;
        height: 0;     /* ie6 height fix */
        font-size: 0;
        line-height: 0;      /* ie6 transparent fix */
        _border-right-color: pink;
        _border-left-color: pink;
        _filter: chroma(color=pink);
        z-index:99;
    }
</style>

这样一来就做到了，但是我不建议这样做，这样是不是太复杂了，而且代码维护性小，因而我还在想别的办法。

接下来 最后就做 删除 添加 还有提交表单之前对数据进行处理

代码如下：

function deleteTelNO(_this) {
        var eventObj = $(_this);
        eventObj.parent().parent().prev().children("input").val("");
        eventObj.parent().parent().parent().html("");
        //$("#strTelNO").val("");
        //$("#astrTelNO").css("display", "none");
    }
    function addTelNO() {
        var oldData = $("#addData").html();
        var strHtml = '<tr><td style="width:100px"></td><td><input οnfοcus="enter(this)" οnblur="leave(this)" name=strAddTelNO type="text"/></td><td><span><a href="#" οnclick="deleteTelNO(this)">删除</a></span></td></tr><tr></tr>';
        //$("#addData").html(oldData+strHtml);
        $("#addData").append(strHtml);


    }

通过上面的代码可以知道，我按保存的时候，提交给后台的是数组，而且还是2个数组，一个是从数据库得到的（或者我修改了），一个是添加的，因此我后台要有2个数组来接收

当然我要将这2个数组进行处理（包括判断是否为空），并且合并成一个，以字符串的形式存入数据库。

代码如下：

 [HttpPost]
        public ActionResult TelNOEdit(string[] strTelNO, string srtTelNOName, string[] strAddTelNO)
        {
            if (!ModelState.IsValid) return Content("{ret:false,msg:'验证未通过,请检查输入'}");
            //if (string.IsNullOrEmpty(srtTelNOName))
            //{
            //    return Content("{ret:false,msg:'联系人不能为空'}");
            //}
            var _strTelNO = "";
            string str = "";
            strTelNO = DeleteArr(str, strTelNO);
            if (strAddTelNO != null)
            {
                strAddTelNO = DeleteArr(str, strAddTelNO);
                strTelNO = CombineArr(strAddTelNO, strTelNO);
            }
            for (int i = 0; i < strTelNO.Length; i++)
            {
                //if (string.IsNullOrEmpty(strTelNO[i]))
                //{
                //    string str = strTelNO[i];
                //    strTelNO = DeleteArr(str, strTelNO);
                //}
                if (strTelNO.Length==1)
                {
                    _strTelNO = strTelNO[i];
                }
                else
                {
                    
                    if (i==strTelNO.Length-1)
                    {
                        _strTelNO = _strTelNO + strTelNO[i];
                        break;
                    }
                    _strTelNO = _strTelNO + strTelNO[i] + '|';
                }
            }
            try
            {
                var _strResident = _strTelNO;
                var _ResidentNO = _settingService.GetValue("WebPage", "ResidentNO");
                _ResidentNO.Value = _strResident;
                _settingService.SetValue(_ResidentNO);
                return Content("{ret:true,msg:'ok'}");
            }
            catch (Exception ex)
            {
                return Content("{ret:false,msg:'" + ex.Message + "'}");
            }
        }

   /// <summary>
        /// 删除空字符串
        /// </summary>
        /// <param name="str"></param>
        /// <param name="arr"></param>
        /// <returns></returns>
        public static string[] DeleteArr(string str, string[] arr)
        {
            List<string> list = new List<string>();
            foreach (string i in arr)
            {
                list.Add(i);
            }
            for (int i = 0; i < arr.Length; i++)
            {
                list.Remove(str);
            }
            arr = new string[list.Count];
            for (int j = 0; j < list.Count; j++)
            {
                arr[j] = list[j];
            }
            return arr;
        }
        /// <summary>
        /// 合并数组
        /// </summary>
        /// <param name="str"></param>
        /// <param name="arr"></param>
        /// <returns></returns>
        public static string[] CombineArr(string[] str, string[] arr)
        {
            List<string> list = new List<string>();
            foreach (string i in arr)
            {
                list.Add(i);
            }
            foreach (string i in str)
            {
                list.Add(i);
            }
            arr = new string[list.Count];
            for (int j = 0; j < list.Count; j++)
            {
                arr[j] = list[j];
            }
            return arr; 
        }

至此为该网站添加的功能都完成！（其中有很多小错误，都是因为自己练的太少导致）

而且在做数据验证这一块，如果刚一开始就安装Validator要求的那种，传字符串，会少很多麻烦，不过我相信应该有类似的解决办法，只是我不知道而已！

第一次写博客，没经验。