码迷,mamicode.com
首页 > Web开发 > 详细

MVC5+EasyUI+EF6增删改查以及登录登出的演示

时间:2020-04-22 00:09:54      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:window   create   gen   cal   ESS   --   alert   ted   pass   

一、创建MVC项目

技术图片

 

 

 技术图片

 

 

 技术图片

 

 

 

 技术图片

二、引入EasyUI

1.进入easyui官网下载源码

技术图片

技术图片

 

 

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

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

技术图片

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

1. 通过nugut 引入EF

2.  添加实体

 public class Student
    {
        public int Id { get; set; }
        /// <summary>
        /// 学号
        /// </summary>       
        public int StuNo { get; set; }
        /// <summary>
        /// 姓名
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 密码
        /// </summary>
        public string Pwd { get; set; }
        /// <summary>
        /// 性别
        /// </summary>
        public string Sex { get; set; }
        /// <summary>
        /// 出生日期
        /// </summary>
        public DateTime? BrithDate { get; set; }
        /// <summary>
        /// 家庭地址
        /// </summary>
        public string Address { get; set; }
    }

 3.创建dbcontext

  public class EFDbContext : DbContext
    {
        public EFDbContext() : base("name=DbConn")
        {
            Database.SetInitializer<EFDbContext>(new DropCreateDatabaseIfModelChanges<EFDbContext>());
        }
public DbSet<Student> Student { get; set; } protected override void OnModelCreating(DbModelBuilder modelBuilder) { modelBuilder.Entity<Student>().HasIndex(s=>s.StuNo).IsUnique();//添加唯一性约束 modelBuilder.Entity<Student>().Property(s=>s.Name).HasMaxLength(32).IsUnicode();// modelBuilder.Entity<Student>().Property(s => s.Address).HasMaxLength(100).IsUnicode(); modelBuilder.Entity<Student>().Property(s => s.Sex).HasMaxLength(1).IsUnicode(); modelBuilder.Entity<Student>().Property(s => s.Pwd).HasMaxLength(80);// } }

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

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

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

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

    public class StudentController : Controller
    {
        // GET: Student
        public ActionResult Index()
        {
            DataInit();

        }
        public ActionResult Login()
        {

            return View();
        }

        private void DataInit()
        {
            for (int i = 1; i <= 30; i++)
            {
                Student student = new Student();
                student.Name = "张三" + i;
                student.Pwd = "123456";
                student.Sex = "";
                student.StuNo = i;
                student.BrithDate = DateTime.Now;
                student.Address = "武汉江夏";
                EFDbContext dbContext = new EFDbContext();
                dbContext.Student.Add(student);
                dbContext.SaveChanges();

            }
        }
    }

技术图片

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

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

@Model
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
    <script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
    <script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            //tabs的点击事件
            bindTabsEvent();
        });
        function bindTabsEvent() {
            $(".detail").click(function () {
                //拿到点击标题
                var title = $(this).text();
                //拿到点击的url
                var url = $(this).attr("url");
                //判断标签是否存在
                var isExt = $("#tt").tabs("exists", title);
                //如果存在则选中
                if (isExt) {
                    $("#tt").tabs("select", title);  //选中
                    return;
                }
                //不存在就添加标签
                $("#tt").tabs("add", {
                    title: title,
                    content: createTabContent(url),
                    closable:true
                });
            });
        }
        function createTabContent(url) {
            return <iframe src=" + url + " scrolling="no" frameborder="0" width="100%" height="100%"></iframe>;
        }
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:‘north‘,split:true" style="height: 50px;">
        <table style="padding: 5px" width="100%">
            <tr>
                <td valign="bottom" align="left" width="50%">
                    <font size="4">  学生演示系统
                </td>
                <td valign="bottom" align="right" width="50%">
                    <font size="3">  <strong>欢迎:</strong>@Model.Name</font>  <a href="~/Student/LogOut">登出</a>
                </td>
            </tr>
        </table>
          
</div>
   


    <div data-options="region:‘west‘,split:true,title:‘West‘" style="width:150px;padding:0px;">
        <div class="easyui-accordion" style="width:auto;height:auto;">
          
            <div title="学生管理" data-options="iconCls:‘icon-ok‘" style="overflow:auto;padding:10px;">
                <a href="javascript:void(0)" class="detail" url="/Student/StudentTab">学生管理</a>
            </div>

            @*<div title="评论管理" data-options="iconCls:‘icon-ok‘" style="overflow:auto;padding:10px;">
                <a href="javascript:void(0)" class="detail" url="/Student/Login">学生登录</a>
            </div>*@


        </div>

    </div>
    @*<div data-options="region:‘east‘,split:true,collapsed:true,title:‘East‘" style="width:100px;padding:10px;">east region</div>*@
    <div data-options="region:‘south‘,border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
    <div data-options="region:‘center‘,title:‘Center‘">
        <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">
            <div title="欢迎使用">
                <h1 style="font-size: 24px;">欢迎!</h1>
                <h1 style="font-size: 24px; color:red;"> Welcome !</h1>
            </div>


        </div>

    </div>
</body>
</html>

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

后台

        // GET: Student
        public ActionResult Index()
        {
           // DataInit();
           
            int userId;
            if( Session["userId"]==null || !int.TryParse(Session["userId"].ToString(),out  userId))
            {
                return Redirect("~/Student/Login");
            }
            
            EFDbContext dbContext = new EFDbContext();
            var user = dbContext.Student.Find(userId);
            return View(user);
        }
       private void DataInit()
        {
            for (int i = 1; i <= 30; i++)
            {
                Student student = new Student();
                student.Name = "张三" + i;
                student.Pwd = "123456";
                student.Sex = "";
                student.StuNo = i;
                student.BrithDate = DateTime.Now;
                student.Address = "武汉江夏";
                EFDbContext dbContext = new EFDbContext();
                dbContext.Student.Add(student);
                dbContext.SaveChanges();
               
            }
        }

      public ActionResult StudentTab()
        {
            return View();
        }
        public JsonResult StudentList()
        {
            //要求返回的数据json对象  {total:200,rows:[{},{}]}
            int pageSize = int.Parse(Request["rows"] ?? "10");
            int pageIndex = int.Parse(Request["page"] ?? "1");         
            EFDbContext dbContext = new EFDbContext();
            //分页数据
            List<Student> studentList= dbContext.Student.OrderBy(s=>s.Id).Skip(pageSize*(pageIndex-1)).Take(pageSize).ToList();
            //总共多少数据
            var allCount = dbContext.Student.Count();
            //把totle和rows:[{},{}]一起返回
            //先建立一个匿名类
            var dataJson = new { total = allCount, rows = studentList };
            var json = Json(dataJson, JsonRequestBehavior.AllowGet);
            return json;
        }
    
         public ActionResult AddStudent(Student data)
        {
            EFDbContext dbContext = new EFDbContext();
            if (dbContext.Student.Where(m => m.StuNo == data.StuNo).FirstOrDefault() != null)
            {
                return Content("error:学号已存在,请修改后再操作!");
            }
            dbContext.Student.Add(data);          
            dbContext.SaveChanges();
            return Content("ok:新增成功");
        }
        public ActionResult UpdateStudent(Student data)  
        {
            EFDbContext dbContext = new EFDbContext();
           

            var s = dbContext.Student.Find(data.Id);
           
            if (data.StuNo != s.StuNo && dbContext.Student.Where(m=>m.StuNo==data.StuNo).FirstOrDefault()!=null)
            {
                return Content("error:学号已存在,请修改后再操作!");
            }


            s.Name = data.Name;
            s.Pwd = data.Pwd;
            s.Sex = data.Sex;
            s.StuNo = data.StuNo;
            s.BrithDate = data.BrithDate;
            dbContext.SaveChanges();
            return Content("ok:修改成功");
        }

        public ActionResult DeleteStudent(int id)
        {
            EFDbContext dbContext = new EFDbContext();
            var s = dbContext.Student.Find(id);
            dbContext.Student.Remove(s);
          
            dbContext.SaveChanges();
            return Content("ok:删除成功");
        }

      
    }

前端

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>StudentList</title>
    <script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
    <script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
    <script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            //初始化表格
            initTable();
            //设置详细框为不可见
            $("#detailDiv").css("display", "none");
             //设置添加编辑框为不可见
            $("#addDiv").css("display","none");
            //设置输入框为禁用
           // $("#Id").textbox(‘textbox‘).attr(‘readonly‘, true);
           // $("#Name").textbox(‘textbox‘).attr(‘readonly‘, true);
           // $("#BrithDate").textbox(‘textbox‘).attr(‘readonly‘, true);
           
         });

       //初始化表格
        function initTable() {
            $("#tt").datagrid({
                //指向一个地址,当表格加载完成后自动请求该地址
                //自动向后台发送    rows 当前页多少条数据        page:当前页
                //要求返回的数据json对象  {total:200,rows:[{},{}]}
                url: /Student/StudentList,
                title: "学生管理",
                fitColumns: true,
                height: $(window).height()-10,
                idField: Id,      //后台返回数据中的主键列。一定注意大小写。
                loadMsg: "正在加载学生信息........",
                pagination: true,      //启用分页
                singleSelect: true,      //只允许选中一行
                pageSize: 10,        //一页默认多少条
                pageNumber: 1,        //默认页
                rownumbers: true,//行号
                pageList: [10, 20, 30],      //允许一页多少条数据
                queryParams: {},          //异步请求可以额外传递的数据
                columns: [[
                { field: ck, checkbox: true, align: left, width: 10 },   // 设置cheakbox    formatter: ChangeDateFormat
                { field: Id, title: 序号, width: 20 },
                { field: StuNo, title: 学号, width: 20 },
                { field: Name, title: 姓名, width: 20 },
                { field: Pwd, title: 密码, width: 20 },
                { field: Sex, title: 性别, width: 20 },
                { field: BrithDate, title: 出生日期, width: 30, formatter: ChangeDateFormat },
                { field: Address, title: 家庭地址, width: 20 },
                {
                     field: operate, title: 操作, align: center, width: 30,
                     formatter: function (value, row, index) {
                         var str = "";                       
                         str += <a href="#" name="update" id="update" class="easyui-linkbutton" onclick="updateStudent( + row.Id + )" ></a>;
                         str += &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,
                         str += <a href="#" name="delete" id="delete" class="easyui-linkbutton" onclick="deleteStudent( + row.Id + )" ></a>;
                         return str;
                     }
                 }
                
                ]],

                onLoadSuccess: function (data) {                 
                    $("a[name=‘update‘]").linkbutton({ text: 编辑, plain: true, iconCls: icon-edit });
                    $("a[name=‘delete‘]").linkbutton({ text: 删除, plain: true, iconCls: icon-cancel });
                  
                },

                toolbar: [{
                    id: btnAdd,
                    text: 添加,
                    iconCls: icon-add,
                    handler: function () {
                        addBtnClick();    //添加学生
                    }
                }],
            });
        }
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }

        function ChangeDateFormat2(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return month + "/" + currentDate + "/" + date.getFullYear();
        }
         //添加学生确定按钮
        function addBtnClick() {
            $("#addDiv").css("display", "block");
            $("#id_show_not").css("display", "none");
            $("#addDiv").dialog({
                title: "添加学生",
                modal: true,
                width: 350,
                height: 320,
                open:function(){
                },
                buttons: [{
                    text: "确定",
                    iconCls: "icon-ok",
                    handler: function () {
                        
                        if ($("#stuNo").val().length == 0) {
                            $.messager.alert("字段提示", "学号不能为空", "info");
                            return;
                        }
                        if ($("#name").val().length == 0) {
                            $.messager.alert("字段提示", "姓名不能为空", "info");
                            return;
                        }
                        if ($("#pwd").val().length == 0) {
                            $.messager.alert("字段提示", "密码不能为空", "info");
                            return;
                        }
                      
                        if ($("#brithDate").val().length == 0) {
                            $.messager.alert("字段提示", "出生日期不能为空", "info");
                            return;
                        }
                       

                        var postData = {
                            stuNO : $("#stuNo").val(),
                            name : $("#name").val(),
                            pwd :$("#pwd").val(),
                            sex: $(input[name="sex"]:checked).val(),
                            brithDate:$("#brithDate").val(),
                            address: $("#address").val()
                        }
                       
                        
                        $.post("/Student/AddStudent", { data: postData }, function (data) {
                            var serverData = data.split(:);
                            if (serverData[0] == "ok") {
                                $.messager.alert("提示", "新增成功", "info");
                                $("#addDiv").dialog("close");   //关闭窗口
                                $(#tt).datagrid(reload);  //刷新单表
                            }
                            else if (serverData[0] == "error") {
                                $.messager.alert("提示", serverData[1], "info");
                                $("#addDiv").dialog("close");   //关闭窗口
                                $(#tt).datagrid(reload);  //刷新单表
                            }
                            else {
                                $.messager.alert("提示", "新增失败", "info");
                                $("#addDiv").dialog("close");   //关闭窗口
                                $(#tt).datagrid(reload);  //刷新单表
                            }
                        });                      
             
                    }
                }, {
                    text: "取消",
                    iconCls: "icon-cancel",
                    handler: function () {
                        $("#addDiv").dialog("close");
                    }
                }]
            });
        }

   

         //修改学生确定按钮
        function updateStudent(index) {
            var row = $(#tt).datagrid(getSelected);
            $("#id").textbox("setValue", row.Id);
            $("#stuNo").textbox("setValue", row.StuNo);
            $("#name").textbox("setValue", row.Name);
            $("#pwd").textbox("setValue", row.Pwd);           
            $(":radio[name=‘sex‘][value=‘" + row.Sex + "‘]").prop("checked", "checked");
            $("#brithDate").datebox("setValue", ChangeDateFormat2(row.BrithDate));
            $("#address").textbox("setValue", row.Address);
           

            var a= $("#id").val();
            $("#addDiv").css("display", "block");
            $("#id_show_not").css("display", "none");
            $("#addDiv").dialog({
                title: "修改学生",
                modal: true,
                width: 350,
                height: 320,
                open: function () {
                             
                },
                
                buttons: [{
                    text: "确定",
                    iconCls: "icon-ok",
                    handler: function () {
                        if ($("#stuNo").val().length == 0) {
                            $.messager.alert("字段提示", "学号不能为空", "info");
                            return;
                        }
                        if ($("#name").val().length == 0) {
                            $.messager.alert("字段提示", "姓名不能为空", "info");
                            return;
                        }
                        if ($("#pwd").val().length == 0) {
                            $.messager.alert("字段提示", "密码不能为空", "info");
                            return;
                        }

                        if ($("#brithDate").val().length == 0) {
                            $.messager.alert("字段提示", "出生日期不能为空", "info");
                            return;
                        }


                        var postData = {
                            id:$("#id").val(),
                            stuNO: $("#stuNo").val(),
                            name: $("#name").val(),
                            pwd: $("#pwd").val(),
                            sex: $(input[name="sex"]:checked).val(),
                            brithDate: $("#brithDate").val(),
                            address: $("#address").val()
                        }


                        $.post("/Student/UpdateStudent", { data: postData }, function (dataaa) {

                            var serverData = dataaa.split(:);

                            if (serverData[0] == "ok") {
                                $.messager.alert("提示", "修改成功", "info");
                                $("#addDiv").dialog("close");   //关闭窗口
                                $(#tt).datagrid(reload);  //刷新单表
                            }
                            else if (serverData[0] == "error") {
                                $.messager.alert("提示", serverData[1], "info");
                                $("#addDiv").dialog("close");   //关闭窗口
                                $(#tt).datagrid(reload);  //刷新单表
                            }
                            else {
                                $.messager.alert("提示", "修改失败", "info");
                                $("#addDiv").dialog("close");   //关闭窗口
                                $(#tt).datagrid(reload);  //刷新单表
                            }
                        });
                    }
                }, {
                    text: "取消",
                    iconCls: "icon-cancel",
                    handler: function () {
                        $("#addDiv").dialog("close");
                    }
                }]
            });
        }

     

         //删除学生
        function deleteStudent(index) {
            $.messager.confirm("提示", "确定要删除吗?", function (r) {
                if (r) {
                    $.post("/Student/DeleteStudent", { id: index }, function (data) {
                        if (data.substring(0, 2) == "ok") {
                            //刷新表格
                            $(#tt).datagrid(reload);
                            $.messager.alert("提示", "删除成功", "info");
                        }
                        else {
                            $.messager.alert("提示","删除失败","info");
                        }
                    });
                }
            });
        }
    </script>
</head>
<body>
   


    <div>
        <table id="tt"></table>
    </div>
    <!---------------------添加和编辑域开始-------------------------->
    <div id="addDiv">
        <form id="addForm">
            <table>
                <tr id="id_show_not">
                    <td>Id:</td>
                    <td><input class="easyui-textbox" style="width:250px;height:32px" id="id" name="id" /></td>
                </tr>
                <tr>
                    <td>学号:</td>
                    <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="stuNo" name="stuNo" /></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="name" name="name" /></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="pwd" name="pwd" /></td>
                </tr>              
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" class="sex" name="sex" value="男" checked="checked" /><input type="radio" class="sex" name="sex" value="女" /></td>
                </tr>
                <tr>
                    <td>出生日期:</td>
                    <td><input class="easyui-datebox " style=" width:250px; height :32px ;" id="brithDate" name="brithDate" data-option="required:true,showSeconds:false" /></td>
                </tr>
                <tr>
                    <td>家庭地址:</td>
                    <td><input class="easyui-textbox" style="width: 250px; height: 32px" id="address" name="address" /></td>
                </tr>
               
            </table>
        </form>
    </div>
    <!---------------------添加和编辑域结束-------------------------->
</body>
</html>

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

后端

      
        public ActionResult Login()
        {
           
            return View();
        }

       
        /// <summary>
        /// 生成验证码
        /// </summary>
        /// <returns></returns>
        public ActionResult ValidateCode()
        {
            ValidateCode validateCode = new ValidateCode();
            string code = validateCode.CreateValidateCode(4);//生成的验证码4个长度
            Session["validateCode"] = code;
            byte[] buffer = validateCode.CreateValidateGraphic(code);//创建验证码图片
            return File(buffer, "image/jpeg");//返回图片
        }
        public ActionResult CheckLogin()
        {
            //拿到session的值
            string Vcode = Session["validateCode"].ToString();         
            string requestCode = Request["txtVcode"].ToString();
            string userName = Request["txtName"].ToString();
            string userPwd = Request["txtPwd"].ToString();
            if (!requestCode.Equals(Vcode, StringComparison.CurrentCultureIgnoreCase))
            {
                return Content("no:验证码错误!!");
            }
         
            EFDbContext dbContext = new EFDbContext();
            var student = dbContext.Student.Where(s => s.Name == userName && s.Pwd == userPwd).FirstOrDefault();

            if (student!= null)
            {
                //清空validateCode
                Session["validateCode"] = null;
                Session["userId"] = student.Id;
                return Content("ok:登录成功");
            }
            else
            {
                return Content("no:用户名或者密码错误");
            }
        }   
      
        public ActionResult LogOut()
        {
            Session["userId"] = null; 
            return Redirect("~/Student/Login");
        }
    }

前台

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>登录</title>
    <script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
    <script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
    <script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {

            initWin();  //初始化登录窗体
            changeCheckCode();  //切换验证码
            cheakLogin();  //验证登录
        });
        //验证登录
        function cheakLogin() {
            $("#btnOk").click(function () {

                if ($("#txtName").val() == "") {
                    $("#spanName").text("必填");
                }
                else {
                    $("#spanName").text("");
                }
                if ($("#txtPwd").val() == "") {
                    $("#spanPwd").text("必填");
                }
                else {
                    $("#spanPwd").text("");
                }
                if ($("#txtVcode").val() == "") {
                    $("#spanVcode").text("必填");
                }
                else {
                    $("#spanVcode").text("");
                }
                if ($("#txtName").val() != "" && $("#txtPwd").val() != "" && $("#txtVcode").val() != "") {
                    //先把表单序列化为json对象
                    var jsonForm = $("#loginForm").serializeArray();
                    //把数据异步提交到后台
                    $.ajax({
                        type: "post",
                        url: "/Student/CheckLogin",
                        data: jsonForm,
                        success: function (data) {
                            var serverData = data.split(:);
                            if (serverData[0] == "ok") {
                                window.location.href = "/Student/Index";
                            }
                            else if (serverData[0] == "no") {
                                $("#spanCheak").text(serverData[1]);
                              
                            }
                            else {
                                $("#spanCheak").text("异常错误");
                              
                            }
                        }

                    });
                }
            });
        }
        //初始化登录窗体
        function initWin() {
            $("#win").window({
                title: "登录",
                width: 400,
                height: 300,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                closable: false,
                modal: true,
                resizable: false,
            });

        }
        //切换验证码
        function changeCheckCode() {
            $("#changeVcode").click(function () {
                $("#image").attr("src", $("#image").attr("src") + 1);
            });
        }
    </script>
</head>
<body>

    <div id="win" class="easyui-window">
        <div>
            <div style="height:20px"></div>
            <form id="loginForm">

                <table>
                    <tr>
                        <td style="width:20px"></td>
                        <td>用户名:</td>
                        <td><input type="text" class="easyui-textbox" id="txtName" name="txtName" /></td>
                        <td><span id="spanName" style="color:red"></span></td>
                    </tr>
                    <tr style="height:10px"></tr>

                    <tr>
                        <td style="width:20px"></td>
                        <td>密  码:</td>
                        <td><input type="password" class="easyui-textbox" id="txtPwd" name="txtPwd"></td>
                        <td><span id="spanPwd" style="color:red"></span></td>
                    </tr>
                    <tr style="height:10px"></tr>
                    <tr>
                        <td style="width:20px"></td>
                        <td>验证码:</td>
                        <td><input type="text" class="easyui-textbox" id="txtVcode" name="txtVcode" /></td>
                        <td><span id="spanVcode" style="color:red"></span></td>
                    </tr>

                    <tr style="height:10px"></tr>

                    <tr>
                        <td style="width:20px"></td>
                        <td><img id="image" src="/Student/ValidateCode/?id=1" style="float: left; height: 24px;" /></td>
                        <td><a href="javascript:void(0)" id="changeVcode">看不清,换一张</a></td>
                    </tr>

                </table>
            </form>
        </div>
        <div style="height:10px"></div>
        <div data-options="region:‘south‘,border:false" style="text-align:center;padding:5px 0 0;">
            <a class="easyui-linkbutton" data-options="iconCls:‘icon-ok‘" href="javascript:void(0)" id="btnOk" style="width:80px">登录</a>
            <span id="spanCheak" style="color:red"></span>
        </div>


</body>
</html>

八、页面效果展示

技术图片

 

 

 技术图片

 

 

 技术图片

 

 

 技术图片技术图片

 

 

 技术图片技术图片

 

 技术图片技术图片

 

 技术图片

 

MVC5+EasyUI+EF6增删改查以及登录登出的演示

标签:window   create   gen   cal   ESS   --   alert   ted   pass   

原文地址:https://www.cnblogs.com/for-easy-fast/p/12748727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!