EasyUI后台管理系统学习二

上次我在学习了EasyUI后台管理系统后，主要是对后台代码的布置进行了简单的学习，突出了代码的封装和实体类的对象化编程。今天想讲讲前台部分结合后台的部分。

有点神秘，前台结合后台，让我娓娓道来。先以一个学生班级的2个对象来说。我们在做后台的时候，学生永远是属于班级的部分，所以在添加和编辑学生信息的时候，班级作为学生的父ID要被选择来规定学生所属的班级，通常我们会做一个下拉框来让编辑者选择班级，动态的从数据库中取出来班级，这样免除了自定义班级的部分（那样太累了），在结合EasyUI来做的时候我们可以这样来：

前台部分：

<select id="班级" name="班级" required="true" style="width:150px;">

<script type="text/javascript">

         $("#班级").combobox({             

　　　　　　url: "ashx/ClassInfoService.ashx",      (这个是后台一般处理程序)       

　　　　　　valueField: "ClassItemID",             

　　　　　　textField: "ClassItemName",             

　　　　　　panelHeight: "auto"         

　　});

     </script>

前台就是这样，用EasyUI就是这么简单。

后台部分也就是上面的那个一般处理程序：

public void ProcessRequest(HttpContext context)        

{            

　　context.Response.ContentType = "text/plain";            

　　List<ClassInfo> list = new List<ClassInfo>(); （这个ClassInfo是类）

　　list = ClassInfoBLL.GetClassInfos();      (这个封装了SQL语句而已，返回那个ID和Name)

　　List<ClassItem> itemList = new List<ClassItem>();            

　　string action = context.Request["action"];            

　　if (action != null)            

　　{                

　　　　if (action.Equals("search"))                    

　　　　itemList.Add(new ClassItem("", "请选择", true));            

　　}

     foreach (ClassInfo info in list)            

　　{                

　　　　itemList.Add(new ClassItem(info.Class_ID, info.Class_Name, false));            

　　}            

　　JavaScriptSerializer jss = new JavaScriptSerializer();

　　context.Response.Write(jss.Serialize(itemList));        

}

 

class ClassItem    

{        

　　public String ClassItemID { get; set; }        

　　public String ClassItemName { get; set; }        

　　public Boolean selected { get; set; }

      public ClassItem(String ClassItemID, String ClassItemName, Boolean ClassItemSelect)        

　　{            

　　　　this.ClassItemID = ClassItemID;            

　　　　this.ClassItemName = ClassItemName;            

　　　　this.selected = ClassItemSelect;        

　　}

}

好了，就是这样了，大家一定记得添加easyUI.css,easyUI.js,jquery-1.7.1.1.min.js(多个版本自己看着办),运行一下，肯定不会错的，本人在vs2010，win7，IIS7.5环境下测试通过了的。

最后还是上张图片吧，让大家有点成就感：

 

图中1,2就是从后台数据库中取出来的字段名称。

努力学习中~~~~~~