一、创建MVC项目

二、引入EasyUI

1.进入easyui官网下载源码

2. 将上述源码中需要的jquery 有选择的加到项目中来

添加Content文件夹，放入easyui代码

三、添加EF, 采用CodeFrist生成数据库表

1. 通过nugut 引入EF

2.  添加实体

  1.  public class Student
  2.     {
  3.         public int Id { get; set; }
  4.         /// <summary>
  5.         /// 学号
  6.         /// </summary>
  7.         public int StuNo { get; set; }
  8.         /// <summary>
  9.         /// 姓名
  10.         /// </summary>
  11.         public string Name { get; set; }
  12.         /// <summary>
  13.         /// 密码
  14.         /// </summary>
  15.         public string Pwd { get; set; }
  16.         /// <summary>
  17.         /// 性别
  18.         /// </summary>
  19.         public string Sex { get; set; }
  20.         /// <summary>
  21.         /// 出生日期
  22.         /// </summary>
  23.         public DateTime? BrithDate { get; set; }
  24.         /// <summary>
  25.         /// 家庭地址
  26.         /// </summary>
  27.         public string Address { get; set; }
  28.     }

3.创建dbcontext

  1.   public class EFDbContext : DbContext
  2.     {
  3.         public EFDbContext() : base("name=DbConn")
  4.         {
  5.             Database.SetInitializer<EFDbContext>(new DropCreateDatabaseIfModelChanges<EFDbContext>());
  6.         }
     
  7.         public DbSet<Student> Student { get; set; }
  8.         protected override void OnModelCreating(DbModelBuilder modelBuilder)
  9.         {
  10.             modelBuilder.Entity<Student>().HasIndex(s=>s.StuNo).IsUnique();//添加唯一性约束
  11.             modelBuilder.Entity<Student>().Property(s=>s.Name).HasMaxLength().IsUnicode();//
  12.             modelBuilder.Entity<Student>().Property(s => s.Address).HasMaxLength().IsUnicode();
  13.             modelBuilder.Entity<Student>().Property(s => s.Sex).HasMaxLength().IsUnicode();
  14.             modelBuilder.Entity<Student>().Property(s => s.Pwd).HasMaxLength();//
  15.         }
  16.     }

4. 在webconfig中添加链接字符串

  1. <connectionStrings>
  2.     <add name="DbConn" connectionString="Data Source=localhost;Initial Catalog=StudentDemo;User ID=test;Password=123456" providerName="System.Data.SqlClient" />
  3.   </connectionStrings>

四，生成数据库结构，并添加一些数据

创建StudentController、 及Index视图， 在Index上按F5运行

  1.     public class StudentController : Controller
  2.     {
  3.         // GET: Student
  4.         public ActionResult Index()
  5.         {
  6.             DataInit();
  7.  
  8.         }
  9.         public ActionResult Login()
  10.         {
  11.  
  12.             return View();
  13.         }
  14.  
  15.         private void DataInit()
  16.         {
  17.             for (int i = ; i <= ; i++)
  18.             {
  19.                 Student student = new Student();
  20.                 student.Name = "张三" + i;
  21.                 student.Pwd = "";
  22.                 student.Sex = "男";
  23.                 student.StuNo = i;
  24.                 student.BrithDate = DateTime.Now;
  25.                 student.Address = "武汉江夏";
  26.                 EFDbContext dbContext = new EFDbContext();
  27.                 dbContext.Student.Add(student);
  28.                 dbContext.SaveChanges();
  29.  
  30.             }
  31.         }
  32.     }

五、创建 EasyUI 布局页以及 导航目录

根据easyui官方文档说明，编写index 布局页面

  1. @Model
  2. <!DOCTYPE html>
  3.  
  4. <html>
  5. <head>
  6.     <meta name="viewport" content="width=device-width" />
  7.     <title>Index</title>
  8.     <script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
  9.     <script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
  10.     <script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
  11.     <link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
  12.     <link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
  13.     <script type="text/javascript">
  14.         $(function () {
  15.             //tabs的点击事件
  16.             bindTabsEvent();
  17.         });
  18.         function bindTabsEvent() {
  19.             $(".detail").click(function () {
  20.                 //拿到点击标题
  21.                 var title = $(this).text();
  22.                 //拿到点击的url
  23.                 var url = $(this).attr("url");
  24.                 //判断标签是否存在
  25.                 var isExt = $("#tt").tabs("exists", title);
  26.                 //如果存在则选中
  27.                 if (isExt) {
  28.                     $("#tt").tabs("select", title);  //选中
  29.                     return;
  30.                 }
  31.                 //不存在就添加标签
  32.                 $("#tt").tabs("add", {
  33.                     title: title,
  34.                     content: createTabContent(url),
  35.                     closable:true
  36.                 });
  37.             });
  38.         }
  39.         function createTabContent(url) {
  40.             return '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>';
  41.         }
  42.     </script>
  43. </head>
  44. <body class="easyui-layout">
  45.     <div data-options="region:'north',split:true" style="height: 50px;">
  46.         <table style="padding: 5px" width="100%">
  47.             <tr>
  48.                 <td valign="bottom" align="left" width="50%">
  49.                     <font size="4">  学生演示系统
  50.                 </td>
  51.                 <td valign="bottom" align="right" width="50%">
  52.                     <font size="3">  <strong>欢迎：</strong>@Model.Name</font>  <a href="~/Student/LogOut">登出</a>
  53.                 </td>
  54.             </tr>
  55.         </table>
  56.  
  57. </div>
  58.  
  59.     <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:0px;">
  60.         <div class="easyui-accordion" style="width:auto;height:auto;">
  61.  
  62.             <div title="学生管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
  63.                 <a href="javascript:void(0)" class="detail" url="/Student/StudentTab">学生管理</a>
  64.             </div>
  65.  
  66.             @*<div title="评论管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
  67.                 <a href="javascript:void(0)" class="detail" url="/Student/Login">学生登录</a>
  68.             </div>*@
  69.  
  70.         </div>
  71.  
  72.     </div>
  73.     @*<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>*@
  74.     <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
  75.     <div data-options="region:'center',title:'Center'">
  76.         <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">
  77.             <div title="欢迎使用">
  78.                 <h1 style="font-size: 24px;">欢迎！</h1>
  79.                 <h1 style="font-size: 24px; color:red;"> Welcome ！</h1>
  80.             </div>
  81.  
  82.         </div>
  83.  
  84.     </div>
  85. </body>
  86. </html>

六、编写 datagrid列表以及增删改查的后端访问接口数据 以及 前端页面代码

后台

  1.         // GET: Student
  2.         public ActionResult Index()
  3.         {
  4.            // DataInit();
  5.  
  6.             int userId;
  7.             if( Session["userId"]==null || !int.TryParse(Session["userId"].ToString(),out  userId))
  8.             {
  9.                 return Redirect("~/Student/Login");
  10.             }
  11.  
  12.             EFDbContext dbContext = new EFDbContext();
  13.             var user = dbContext.Student.Find(userId);
  14.             return View(user);
  15.         }
  16.        private void DataInit()
  17.         {
  18.             for (int i = ; i <= ; i++)
  19.             {
  20.                 Student student = new Student();
  21.                 student.Name = "张三" + i;
  22.                 student.Pwd = "";
  23.                 student.Sex = "男";
  24.                 student.StuNo = i;
  25.                 student.BrithDate = DateTime.Now;
  26.                 student.Address = "武汉江夏";
  27.                 EFDbContext dbContext = new EFDbContext();
  28.                 dbContext.Student.Add(student);
  29.                 dbContext.SaveChanges();
  30.  
  31.             }
  32.         }
  33.  
  34.       public ActionResult StudentTab()
  35.         {
  36.             return View();
  37.         }
  38.         public JsonResult StudentList()
  39.         {
  40.             //要求返回的数据json对象  {total:200,rows:[{},{}]}
  41.             int pageSize = int.Parse(Request["rows"] ?? "");
  42.             int pageIndex = int.Parse(Request["page"] ?? "");
  43.             EFDbContext dbContext = new EFDbContext();
  44.             //分页数据
  45.             List<Student> studentList= dbContext.Student.OrderBy(s=>s.Id).Skip(pageSize*(pageIndex-)).Take(pageSize).ToList();
  46.             //总共多少数据
  47.             var allCount = dbContext.Student.Count();
  48.             //把totle和rows:[{},{}]一起返回
  49.             //先建立一个匿名类
  50.             var dataJson = new { total = allCount, rows = studentList };
  51.             var json = Json(dataJson, JsonRequestBehavior.AllowGet);
  52.             return json;
  53.         }
  54.  
  55.          public ActionResult AddStudent(Student data)
  56.         {
  57.             EFDbContext dbContext = new EFDbContext();
  58.             if (dbContext.Student.Where(m => m.StuNo == data.StuNo).FirstOrDefault() != null)
  59.             {
  60.                 return Content("error:学号已存在，请修改后再操作！");
  61.             }
  62.             dbContext.Student.Add(data);
  63.             dbContext.SaveChanges();
  64.             return Content("ok:新增成功");
  65.         }
  66.         public ActionResult UpdateStudent(Student data)
  67.         {
  68.             EFDbContext dbContext = new EFDbContext();
  69.  
  70.             var s = dbContext.Student.Find(data.Id);
  71.  
  72.             if (data.StuNo != s.StuNo && dbContext.Student.Where(m=>m.StuNo==data.StuNo).FirstOrDefault()!=null)
  73.             {
  74.                 return Content("error:学号已存在，请修改后再操作！");
  75.             }
  76.  
  77.             s.Name = data.Name;
  78.             s.Pwd = data.Pwd;
  79.             s.Sex = data.Sex;
  80.             s.StuNo = data.StuNo;
  81.             s.BrithDate = data.BrithDate;
  82.             dbContext.SaveChanges();
  83.             return Content("ok:修改成功");
  84.         }
  85.  
  86.         public ActionResult DeleteStudent(int id)
  87.         {
  88.             EFDbContext dbContext = new EFDbContext();
  89.             var s = dbContext.Student.Find(id);
  90.             dbContext.Student.Remove(s);
  91.  
  92.             dbContext.SaveChanges();
  93.             return Content("ok:删除成功");
  94.         }
  95.  
  96.     }

前端

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>StudentList</title>
  7.     <script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
  8.     <script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
  9.     <script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
  10.     <link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
  11.     <link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
  12.     <script type="text/javascript">
  13.         $(function () {
  14.             //初始化表格
  15.             initTable();
  16.             //设置详细框为不可见
  17.             $("#detailDiv").css("display", "none");
  18.              //设置添加编辑框为不可见
  19.             $("#addDiv").css("display","none");
  20.             //设置输入框为禁用
  21.            // $("#Id").textbox('textbox').attr('readonly', true);
  22.            // $("#Name").textbox('textbox').attr('readonly', true);
  23.            // $("#BrithDate").textbox('textbox').attr('readonly', true);
  24.  
  25.          });
  26.  
  27.        //初始化表格
  28.         function initTable() {
  29.             $("#tt").datagrid({
  30.                 //指向一个地址，当表格加载完成后自动请求该地址
  31.                 //自动向后台发送    rows 当前页多少条数据        page：当前页
  32.                 //要求返回的数据json对象  {total:200,rows:[{},{}]}
  33.                 url: '/Student/StudentList',
  34.                 title: "学生管理",
  35.                 fitColumns: true,
  36.                 height: $(window).height()-10,
  37.                 idField: 'Id',      //后台返回数据中的主键列。一定注意大小写。
  38.                 loadMsg: "正在加载学生信息........",
  39.                 pagination: true,      //启用分页
  40.                 singleSelect: true,      //只允许选中一行
  41.                 pageSize: 10,        //一页默认多少条
  42.                 pageNumber: 1,        //默认页
  43.                 rownumbers: true,//行号
  44.                 pageList: [10, 20, 30],      //允许一页多少条数据
  45.                 queryParams: {},          //异步请求可以额外传递的数据
  46.                 columns: [[
  47.                 { field: 'ck', checkbox: true, align: 'left', width: 10 },   // 设置cheakbox    formatter: ChangeDateFormat
  48.                 { field: 'Id', title: '序号', width: 20 },
  49.                 { field: 'StuNo', title: '学号', width: 20 },
  50.                 { field: 'Name', title: '姓名', width: 20 },
  51.                 { field: 'Pwd', title: '密码', width: 20 },
  52.                 { field: 'Sex', title: '性别', width: 20 },
  53.                 { field: 'BrithDate', title: '出生日期', width: 30, formatter: ChangeDateFormat },
  54.                 { field: 'Address', title: '家庭地址', width: 20 },
  55.                 {
  56.                      field: 'operate', title: '操作', align: 'center', width: 30,
  57.                      formatter: function (value, row, index) {
  58.                          var str = "";
  59.                          str += '<a href="#" name="update" id="update" class="easyui-linkbutton" onclick="updateStudent(' + row.Id + ')" ></a>';
  60.                          str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
  61.                          str += '<a href="#" name="delete" id="delete" class="easyui-linkbutton" onclick="deleteStudent(' + row.Id + ')" ></a>';
  62.                          return str;
  63.                      }
  64.                  }
  65.  
  66.                 ]],
  67.  
  68.                 onLoadSuccess: function (data) {
  69.                     $("a[name='update']").linkbutton({ text: '编辑', plain: true, iconCls: 'icon-edit' });
  70.                     $("a[name='delete']").linkbutton({ text: '删除', plain: true, iconCls: 'icon-cancel' });
  71.  
  72.                 },
  73.  
  74.                 toolbar: [{
  75.                     id: 'btnAdd',
  76.                     text: '添加',
  77.                     iconCls: 'icon-add',
  78.                     handler: function () {
  79.                         addBtnClick();    //添加学生
  80.                     }
  81.                 }],
  82.             });
  83.         }
  84.         function ChangeDateFormat(cellval) {
  85.             var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
  86.             var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  87.             var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  88.             return date.getFullYear() + "-" + month + "-" + currentDate;
  89.         }
  90.  
  91.         function ChangeDateFormat2(cellval) {
  92.             var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
  93.             var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  94.             var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  95.             return month + "/" + currentDate + "/" + date.getFullYear();
  96.         }
  97.          //添加学生确定按钮
  98.         function addBtnClick() {
  99.             $("#addDiv").css("display", "block");
  100.             $("#id_show_not").css("display", "none");
  101.             $("#addDiv").dialog({
  102.                 title: "添加学生",
  103.                 modal: true,
  104.                 width: 350,
  105.                 height: 320,
  106.                 open:function(){
  107.                 },
  108.                 buttons: [{
  109.                     text: "确定",
  110.                     iconCls: "icon-ok",
  111.                     handler: function () {
  112.  
  113.                         if ($("#stuNo").val().length == 0) {
  114.                             $.messager.alert("字段提示", "学号不能为空", "info");
  115.                             return;
  116.                         }
  117.                         if ($("#name").val().length == 0) {
  118.                             $.messager.alert("字段提示", "姓名不能为空", "info");
  119.                             return;
  120.                         }
  121.                         if ($("#pwd").val().length == 0) {
  122.                             $.messager.alert("字段提示", "密码不能为空", "info");
  123.                             return;
  124.                         }
  125.  
  126.                         if ($("#brithDate").val().length == 0) {
  127.                             $.messager.alert("字段提示", "出生日期不能为空", "info");
  128.                             return;
  129.                         }
  130.  
  131.                         var postData = {
  132.                             stuNO : $("#stuNo").val(),
  133.                             name : $("#name").val(),
  134.                             pwd :$("#pwd").val(),
  135.                             sex: $('input[name="sex"]:checked').val(),
  136.                             brithDate:$("#brithDate").val(),
  137.                             address: $("#address").val()
  138.                         }
  139.  
  140.                         $.post("/Student/AddStudent", { data: postData }, function (data) {
  141.                             var serverData = data.split(':');
  142.                             if (serverData[0] == "ok") {
  143.                                 $.messager.alert("提示", "新增成功", "info");
  144.                                 $("#addDiv").dialog("close");   //关闭窗口
  145.                                 $('#tt').datagrid('reload');  //刷新单表
  146.                             }
  147.                             else if (serverData[0] == "error") {
  148.                                 $.messager.alert("提示", serverData[1], "info");
  149.                                 $("#addDiv").dialog("close");   //关闭窗口
  150.                                 $('#tt').datagrid('reload');  //刷新单表
  151.                             }
  152.                             else {
  153.                                 $.messager.alert("提示", "新增失败", "info");
  154.                                 $("#addDiv").dialog("close");   //关闭窗口
  155.                                 $('#tt').datagrid('reload');  //刷新单表
  156.                             }
  157.                         });                      
  158.  
  159.                     }
  160.                 }, {
  161.                     text: "取消",
  162.                     iconCls: "icon-cancel",
  163.                     handler: function () {
  164.                         $("#addDiv").dialog("close");
  165.                     }
  166.                 }]
  167.             });
  168.         }
  169.  
  170.          //修改学生确定按钮
  171.         function updateStudent(index) {
  172.             var row = $('#tt').datagrid('getSelected');
  173.             $("#id").textbox("setValue", row.Id);
  174.             $("#stuNo").textbox("setValue", row.StuNo);
  175.             $("#name").textbox("setValue", row.Name);
  176.             $("#pwd").textbox("setValue", row.Pwd);
  177.             $(":radio[name='sex'][value='" + row.Sex + "']").prop("checked", "checked");
  178.             $("#brithDate").datebox("setValue", ChangeDateFormat2(row.BrithDate));
  179.             $("#address").textbox("setValue", row.Address);
  180.  
  181.             var a= $("#id").val();
  182.             $("#addDiv").css("display", "block");
  183.             $("#id_show_not").css("display", "none");
  184.             $("#addDiv").dialog({
  185.                 title: "修改学生",
  186.                 modal: true,
  187.                 width: 350,
  188.                 height: 320,
  189.                 open: function () {
  190.  
  191.                 },
  192.  
  193.                 buttons: [{
  194.                     text: "确定",
  195.                     iconCls: "icon-ok",
  196.                     handler: function () {
  197.                         if ($("#stuNo").val().length == 0) {
  198.                             $.messager.alert("字段提示", "学号不能为空", "info");
  199.                             return;
  200.                         }
  201.                         if ($("#name").val().length == 0) {
  202.                             $.messager.alert("字段提示", "姓名不能为空", "info");
  203.                             return;
  204.                         }
  205.                         if ($("#pwd").val().length == 0) {
  206.                             $.messager.alert("字段提示", "密码不能为空", "info");
  207.                             return;
  208.                         }
  209.  
  210.                         if ($("#brithDate").val().length == 0) {
  211.                             $.messager.alert("字段提示", "出生日期不能为空", "info");
  212.                             return;
  213.                         }
  214.  
  215.                         var postData = {
  216.                             id:$("#id").val(),
  217.                             stuNO: $("#stuNo").val(),
  218.                             name: $("#name").val(),
  219.                             pwd: $("#pwd").val(),
  220.                             sex: $('input[name="sex"]:checked').val(),
  221.                             brithDate: $("#brithDate").val(),
  222.                             address: $("#address").val()
  223.                         }
  224.  
  225.                         $.post("/Student/UpdateStudent", { data: postData }, function (dataaa) {
  226.  
  227.                             var serverData = dataaa.split(':');
  228.  
  229.                             if (serverData[0] == "ok") {
  230.                                 $.messager.alert("提示", "修改成功", "info");
  231.                                 $("#addDiv").dialog("close");   //关闭窗口
  232.                                 $('#tt').datagrid('reload');  //刷新单表
  233.                             }
  234.                             else if (serverData[0] == "error") {
  235.                                 $.messager.alert("提示", serverData[1], "info");
  236.                                 $("#addDiv").dialog("close");   //关闭窗口
  237.                                 $('#tt').datagrid('reload');  //刷新单表
  238.                             }
  239.                             else {
  240.                                 $.messager.alert("提示", "修改失败", "info");
  241.                                 $("#addDiv").dialog("close");   //关闭窗口
  242.                                 $('#tt').datagrid('reload');  //刷新单表
  243.                             }
  244.                         });
  245.                     }
  246.                 }, {
  247.                     text: "取消",
  248.                     iconCls: "icon-cancel",
  249.                     handler: function () {
  250.                         $("#addDiv").dialog("close");
  251.                     }
  252.                 }]
  253.             });
  254.         }
  255.  
  256.          //删除学生
  257.         function deleteStudent(index) {
  258.             $.messager.confirm("提示", "确定要删除吗?", function (r) {
  259.                 if (r) {
  260.                     $.post("/Student/DeleteStudent", { id: index }, function (data) {
  261.                         if (data.substring(0, 2) == "ok") {
  262.                             //刷新表格
  263.                             $('#tt').datagrid('reload');
  264.                             $.messager.alert("提示", "删除成功", "info");
  265.                         }
  266.                         else {
  267.                             $.messager.alert("提示","删除失败","info");
  268.                         }
  269.                     });
  270.                 }
  271.             });
  272.         }
  273.     </script>
  274. </head>
  275. <body>
  276.  
  277.     <div>
  278.         <table id="tt"></table>
  279.     </div>
  280.     <!---------------------添加和编辑域开始-------------------------->
  281.     <div id="addDiv">
  282.         <form id="addForm">
  283.             <table>
  284.                 <tr id="id_show_not">
  285.                     <td>Id:</td>
  286.                     <td><input class="easyui-textbox" style="width:250px;height:32px" id="id" name="id" /></td>
  287.                 </tr>
  288.                 <tr>
  289.                     <td>学号:</td>
  290.                     <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="stuNo" name="stuNo" /></td>
  291.                 </tr>
  292.                 <tr>
  293.                     <td>姓名:</td>
  294.                     <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="name" name="name" /></td>
  295.                 </tr>
  296.                 <tr>
  297.                     <td>密码:</td>
  298.                     <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="pwd" name="pwd" /></td>
  299.                 </tr>
  300.                 <tr>
  301.                     <td>性别：</td>
  302.                     <td>
  303.                         <input type="radio" class="sex" name="sex" value="男" checked="checked" />男
  304.                         <input type="radio" class="sex" name="sex" value="女" />女
  305.                     </td>
  306.                 </tr>
  307.                 <tr>
  308.                     <td>出生日期:</td>
  309.                     <td><input class="easyui-datebox " style=" width:250px; height :32px ;" id="brithDate" name="brithDate" data-option="required:true,showSeconds:false" /></td>
  310.                 </tr>
  311.                 <tr>
  312.                     <td>家庭地址:</td>
  313.                     <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="address" name="address" /></td>
  314.                 </tr>
  315.  
  316.             </table>
  317.         </form>
  318.     </div>
  319.     <!---------------------添加和编辑域结束-------------------------->
  320. </body>
  321. </html>

七、添加页面登录登出接口数据 以及前端页面代码

后端

  1.         public ActionResult Login()
  2.         {
  3.  
  4.             return View();
  5.         }
  6.  
  7.         /// <summary>
  8.         /// 生成验证码
  9.         /// </summary>
  10.         /// <returns></returns>
  11.         public ActionResult ValidateCode()
  12.         {
  13.             ValidateCode validateCode = new ValidateCode();
  14.             string code = validateCode.CreateValidateCode();//生成的验证码4个长度
  15.             Session["validateCode"] = code;
  16.             byte[] buffer = validateCode.CreateValidateGraphic(code);//创建验证码图片
  17.             return File(buffer, "image/jpeg");//返回图片
  18.         }
  19.         public ActionResult CheckLogin()
  20.         {
  21.             //拿到session的值
  22.             string Vcode = Session["validateCode"].ToString();
  23.             string requestCode = Request["txtVcode"].ToString();
  24.             string userName = Request["txtName"].ToString();
  25.             string userPwd = Request["txtPwd"].ToString();
  26.             if (!requestCode.Equals(Vcode, StringComparison.CurrentCultureIgnoreCase))
  27.             {
  28.                 return Content("no:验证码错误!!");
  29.             }
  30.  
  31.             EFDbContext dbContext = new EFDbContext();
  32.             var student = dbContext.Student.Where(s => s.Name == userName && s.Pwd == userPwd).FirstOrDefault();
  33.  
  34.             if (student!= null)
  35.             {
  36.                 //清空validateCode
  37.                 Session["validateCode"] = null;
  38.                 Session["userId"] = student.Id;
  39.                 return Content("ok:登录成功");
  40.             }
  41.             else
  42.             {
  43.                 return Content("no:用户名或者密码错误");
  44.             }
  45.         }   
  46.  
  47.         public ActionResult LogOut()
  48.         {
  49.             Session["userId"] = null;
  50.             return Redirect("~/Student/Login");
  51.         }
  52.     }

前台

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>登录</title>
  7.     <script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
  8.     <script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
  9.     <script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
  10.     <link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
  11.     <link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
  12.     <script type="text/javascript">
  13.         $(function () {
  14.  
  15.             initWin();  //初始化登录窗体
  16.             changeCheckCode();  //切换验证码
  17.             cheakLogin();  //验证登录
  18.         });
  19.         //验证登录
  20.         function cheakLogin() {
  21.             $("#btnOk").click(function () {
  22.  
  23.                 if ($("#txtName").val() == "") {
  24.                     $("#spanName").text("必填");
  25.                 }
  26.                 else {
  27.                     $("#spanName").text("");
  28.                 }
  29.                 if ($("#txtPwd").val() == "") {
  30.                     $("#spanPwd").text("必填");
  31.                 }
  32.                 else {
  33.                     $("#spanPwd").text("");
  34.                 }
  35.                 if ($("#txtVcode").val() == "") {
  36.                     $("#spanVcode").text("必填");
  37.                 }
  38.                 else {
  39.                     $("#spanVcode").text("");
  40.                 }
  41.                 if ($("#txtName").val() != "" && $("#txtPwd").val() != "" && $("#txtVcode").val() != "") {
  42.                     //先把表单序列化为json对象
  43.                     var jsonForm = $("#loginForm").serializeArray();
  44.                     //把数据异步提交到后台
  45.                     $.ajax({
  46.                         type: "post",
  47.                         url: "/Student/CheckLogin",
  48.                         data: jsonForm,
  49.                         success: function (data) {
  50.                             var serverData = data.split(':');
  51.                             if (serverData[0] == "ok") {
  52.                                 window.location.href = "/Student/Index";
  53.                             }
  54.                             else if (serverData[0] == "no") {
  55.                                 $("#spanCheak").text(serverData[1]);
  56.  
  57.                             }
  58.                             else {
  59.                                 $("#spanCheak").text("异常错误");
  60.  
  61.                             }
  62.                         }
  63.  
  64.                     });
  65.                 }
  66.             });
  67.         }
  68.         //初始化登录窗体
  69.         function initWin() {
  70.             $("#win").window({
  71.                 title: "登录",
  72.                 width: 400,
  73.                 height: 300,
  74.                 collapsible: false,
  75.                 minimizable: false,
  76.                 maximizable: false,
  77.                 closable: false,
  78.                 modal: true,
  79.                 resizable: false,
  80.             });
  81.  
  82.         }
  83.         //切换验证码
  84.         function changeCheckCode() {
  85.             $("#changeVcode").click(function () {
  86.                 $("#image").attr("src", $("#image").attr("src") + 1);
  87.             });
  88.         }
  89.     </script>
  90. </head>
  91. <body>
  92.  
  93.     <div id="win" class="easyui-window">
  94.         <div>
  95.             <div style="height:20px"></div>
  96.             <form id="loginForm">
  97.  
  98.                 <table>
  99.                     <tr>
  100.                         <td style="width:20px"></td>
  101.                         <td>用户名:</td>
  102.                         <td><input type="text" class="easyui-textbox" id="txtName" name="txtName" /></td>
  103.                         <td><span id="spanName" style="color:red"></span></td>
  104.                     </tr>
  105.                     <tr style="height:10px"></tr>
  106.  
  107.                     <tr>
  108.                         <td style="width:20px"></td>
  109.                         <td>密  码:</td>
  110.                         <td><input type="password" class="easyui-textbox" id="txtPwd" name="txtPwd"></td>
  111.                         <td><span id="spanPwd" style="color:red"></span></td>
  112.                     </tr>
  113.                     <tr style="height:10px"></tr>
  114.                     <tr>
  115.                         <td style="width:20px"></td>
  116.                         <td>验证码:</td>
  117.                         <td><input type="text" class="easyui-textbox" id="txtVcode" name="txtVcode" /></td>
  118.                         <td><span id="spanVcode" style="color:red"></span></td>
  119.                     </tr>
  120.  
  121.                     <tr style="height:10px"></tr>
  122.  
  123.                     <tr>
  124.                         <td style="width:20px"></td>
  125.                         <td><img id="image" src="/Student/ValidateCode/?id=1" style="float: left; height: 24px;" /></td>
  126.                         <td><a href="javascript:void(0)" id="changeVcode">看不清，换一张</a></td>
  127.                     </tr>
  128.  
  129.                 </table>
  130.             </form>
  131.         </div>
  132.         <div style="height:10px"></div>
  133.         <div data-options="region:'south',border:false" style="text-align:center;padding:5px 0 0;">
  134.             <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" id="btnOk" style="width:80px">登录</a>
  135.             <span id="spanCheak" style="color:red"></span>
  136.         </div>
  137.  
  138. </body>
  139. </html>

八、页面效果展示

MVC5+EasyUI+EF6增删改查的演示的更多相关文章

  1. golang学习之beego框架配合easyui实现增删改查及图片上传

    golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...

  2. MVC与EasyUI结合增删改查

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查   在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的 ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）-MVC与EasyUI结合增删改查

    系列目录 文章于2016-12-17日重写 在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下. 这讲主要是,制作漂亮的工具栏,虽 ...

  5. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)

    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...

  6. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  7. easyui datagrid 增删改查示例

    查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...

  8. easyui实现增删改查

    陈旧的开发模式 美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色. 前后端分离: 前端 ...

  9. asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL

    效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...

随机推荐

  1. java-Deque

    2020-03-07 13:42:05 双端队列与通常的Queue的区别仅仅在于多了双端队列可以在队首队尾进行插入或者删除操作. 队尾添加:offerLast 队尾删除:pollLast 队尾查询:p ...

  2. 动态规划-Minimum Insertion Steps to Make a String Palindrome

    2020-01-05 11:52:40 问题描述: 问题求解: 好像多次碰到类似的lcs的变种题了,都是套上了回文的壳.这里再次记录一下. 其实本质就是裸的lcs,就出结果了. public int ...

  3. 【深度学习】perceptron（感知机）

    目录 1.感知机的描述 2.感知机解决简单逻辑电路,与门的问题. 2.多层感应机,解决异或门 个人学习笔记,有兴趣的朋友可参考. 1.感知机的描述 感知机(perceptron)由美国学者Frank ...

  4. Visdom 介绍 | 一

    用于创建,组织和共享实时丰富数据可视化的灵活工具.支持Python. 概述 概念 设置 用法 API 待办事项 贡献 概述 Visdom旨在促进(远程)数据的可视化,重点是支持科学实验. 为你自己和你 ...

  5. 模块 collections 高级数据类型

    collections模块 原文来自cnblog 的 Eva-J Eva-J 介绍了collections模块的常用方法,和演示实例 在 Python cookbook 的第一章中还有一些 更加好玩的 ...

  6. Codeforces题解集 1.0

    记录 Codeforces 2019年12月19日到 2020年2月12日 的部分比赛题 Educational Codeforces Round 82 (Rated for Div. 2) D Fi ...

  7. 1+X Web前端开发（中级）理论考试样题（附答案）

    传送门 教育部:职业教育将启动"1+X"证书制度改革 职业教育改革1+X证书制度试点启动 1+X成绩/证书查询入口 一.单选题(每小题2分,共30小题,共 60 分) 1.在Boo ...

  8. IDEA运行报错 Error:java: 错误: 不支持发行版本 xx

    解决方案 修改项目配置,进入Project Setting,截图可参考下面的截图 1.修改全局设置 修改Project->Project Language Level->选择版本比当前jd ...

  9. #VScodd集成Git Bash 命令行 #怎么把Git Bash集成到VScode

    配置 Step1. File-Preferences-Setting Step2. 搜索"terminal>integrated>shell A" Step3. 找到t ...

  10. App 性能测试分享

    在本文内,主要以Android性能测试为主进行分析 一.性能测试包含 1.启动时间测试   测试场景包括 - - - 首次安装启动时间.冷启动.热启动测试 2.页面响应时间:   用户从点击一个控件, ...