【Dongle】【Web】牛腩新闻发布系统之中篇

        相对于前篇总结来说，中篇来得晚了很多，大概都一个多月过去了由于牛腩视频已经看完，并跟着敲了下来，故而在这里，我就总结一下视频后40讲的大概知识点。

        在前期框架搭建好之后，中期也就是针对每个页面设计符合本页面特色的样式了。在视频中的名称是整合各个页面。

登陆页面

        首先，添加验证控件RequiredFieldValidator，从而通过验证用户输入情况，做出相应事件回应。

        然后还从安全方便考虑，将密码进行转码，从而对密码进行一定的隐藏。例如将密码转码为MD5形式：FormsAuthentication.HashPasswordForStoringInConfigFile(pwd,"MD5")。

类别管理界面

       首先学习到的是关于从一个页面跳转到另一个界面。一种方法是咱们已经熟知的超链接形式，另一种形式则是Response.Redirect("Login.aspx")。

      这里学到的最主要的是关于Javascript框架的学习，通常asp.net设计是不能针对表实现事件处理的。而这需要借助javascript进行设计。对于这一方面，我还没有学习透入，也不能讲出个所以然来，只能提供代码交流了

$(function () {
    //相当于在页面中的body标签中加上onload事件
   $(".caname").click(function () { //给页面中有caname类的标签加上click函数 
       var objTD = $(objTD);
        //更改格式时需要保存原有内容
       var oldText = $trim($(objTD).text());
       var input = $("");//文本框的HTML
       $(objTD).html(input);//当前td的内容变为文本框
        //设置文本框的点击事件失效
       input.click(function () {
           return false;
       });
        //设置文本框的样式
       input.css("border-width", 0);//边框宽度为0
       input.height($(objTD).height());//文本框高度为当前td表格高度
       input.width($(objTD).width());//文本框高度为当前td表格宽度
       input.css("font-size", "14px"); //文本框内容字体大小
       input.css("text-align", "center");//文本居中
       input.trigger("focus").trigger("select");//全选(先触发焦点，然后全选)
 
        //文本框失去焦点时重新变为文本
       input.blur(function () {
           var newText = $(this).val();
           var input_blur = $(this);//修改后的名称
           //当老的类别名称与修改后的类别名称不同时才进行数据的提交操作
           if (oldText != newText) {
               //获取该类别名所对应的序号
               var caid = $trim(objTD.prev().text());
               //AJAX异步更改数据库
               var url = "../handler/ChangeCaName.ashx？caname=" + encodeURI(encordeURI(newText)) +"&caid=" + caid + "&t=" + newDate().getTime();//getTime()获取毫秒,防止数据缓存干扰;encordeURI防止中文转码出现问题，进行二次转码
               $.get(url, function (data) {
                    if (data =="false") {
                        //alert("类别修改失败，请检查是否类别名称重复");
                       $("#test").text("类别修改失败，请检查是否类别名称重复");
                       input_blur.trigger("focus").trigger("select");//文本框全选
                   }
                    else {
                       $("#test").text("");
                        objTD.html(newText);
                    }
               });
           }
           else {
               //前后文本一致，把文本框编程标签
               objTD.html(newText);
           }
       });
 
        //在文本框中按下键盘某键
       input.keydown(function (event) {
           var jianzi = event.keyCode;
           var input_keydown = $(this);
           switch (jianzi) {
               case 13: //按下回车键，把修改后的值提交到数据库中
                    var newText =input_keydown.val();//修改后的名称
                    //当老的类别名称与修改后的类别名称不同时才进行数据的提交操作
                    if (oldText != newText) {
                        //获取该类别名所对应的序号
                        var caid =$trim(objTD.prev().text());
                        //AJAX异步更改数据库
                        var url ="../handler/ChangeCaName.ashx？caname=" +encodeURI(encordeURI(newText)) + "&caid=" + caid +"&t=" + new Date().getTime();//getTime()获取毫秒,防止数据缓存干扰;encordeURI防止中文转码出现问题，进行二次转码
                        $.get(url, function(data) {
                            if (data =="false") {
                               $("#test").text("类别修改失败，请检查是否类别名称重复");
                               input_keydown.trigger("focus").trigger("select");//文本框全选
                            }
                            else {
                               $("#test").text("");
                               objTD.html(newText);
                            }
                        });
                    }
                    else {
                        //前后文本一致，把文本框编程标签
                        objTD.html(newText);
                    }
                    break;
               case 27://按下ESC键，取消修改，把文本框编程标签
                   $("#test").text("");
                    objTD.html(oldText);
                    break;
           }
 
        })
    });
});
 
//屏蔽回车键
$(document).keydown(function (event) {
    switch(event.keyCode) {
       case 13:
           return false;
    }
})

        其实这一部分是相当于CSS的一部分，只不过在CSS里面是不能针对事件进行处理的，故而需要其他方式进行实现。

新闻管理页

       这一部分学习AJAX控件的使用，AJAX是AJAX 是一种用于创建快速动态网页的技术。

       通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

       传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

       

       这里用到的是UpdatePanel控件，通常与ScriptManager控件联合使用，ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异步局部更新区域，它必须依赖于ScriptManager存在，因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功能。

        

           
           
                
                    
                            
                                

                        

                            
序号
                            
标题
                            
修改
                            
删除
                        
                        

                                    
<%# Eval("id") %>
                                    
<%# Eval("title") %>
                                    
修改
                                    

                                        删除
                                    
                                
                            
                        
                    
                
            

       

       其次，是关于repeater控件的ItemDataBound事件的学习，这里首先先了解repeater控件：Repeater 控件用于显示重复的项目列表，这些项目被限制在该控件。Repeater 控件可被绑定到数据库表、XML 文件或者其他项目列表。repeater控件的ItemDataBound事件在项被绑定数据后触发。

      最后是针对控件的显示和隐藏问题，例如如果希望将某个控件隐藏，则可以这样：((控件类名)e.Item.FindControl("控件名称")).Visible= false。

添加新闻页

        这一个主要是学习freeTextBox控件的使用，这个控件是设计好的，可以自行下载，然后进行引用就可以了！

还有值针对下拉列表框DropDownList的学习：

         DropDownList.DataTextField= "name";//获取文本内容的数据源字段      
         DropDownList.DataValueField= "id";//获取各列表项提供值的数据源字段

出错页

         针对系统可能存在的其他错误(不论能解决与否)，都可以进行异常处理，然后超链接到页面跳转到出错页！

 

         最后将系统发布出去就基本上可以算是一个小型的新闻发布系统啦！！！