ASP.NET MVC+JQueryEasyUI1.4+ADO.NET Demo
Posted DrHao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ASP.NET MVC+JQueryEasyUI1.4+ADO.NET Demo相关的知识，希望对你有一定的参考价值。
1.JQueryEasyUI使用
JQuery EasyUI中文官网：http://www.jeasyui.net/
JQuery EasyUI中文官网下载地址：http://www.jeasyui.net/download/
jQuery EasyUI 1.4 版 API 中文版: 链接：http://pan.baidu.com/s/1c1pAutE%20 密码：0mk8
JQuery EasyUI 1.4.4 百度云盘：链接：http://pan.baidu.com/s/1bnRpH3T 密码：pbe9
1.1：把jquery.easyui.min.js和easyui-lang-zh_CN.js(1.4中是在locale文件夹下) 放到Scripts文件夹下
1.2：把themes文件夹下的css和icon放到Content/themes文件夹下
1.3:对于页面引用JQuery EasyUI那个css和js文件，参考如下：
1.3.1：可以根据JQuery EasyUI Demo文件中具体引用的内容决定当前页面要引用的css和Js
1.3.2：使用chorme浏览器打开Demo/layout/basic.html,鼠标右键-->查看网页源代码
1.3.3：即可确定当前页面需要引用的css和jss
2:首先创建LoginControllers，然后添加Index视图
1 using DrHao.CMS.BLL; 2 using DrHao.CMS.Model; 3 using System; 4 using System.Collections.Generic; 5 using System.Linq; 6 using System.Web; 7 using System.Web.Mvc; 8 9 namespace DrHao.CMS.WebApp.Controllers 10 { 11 public class LoginController : Controller 12 { 13 // 14 // GET: /Login/ 15 16 public ActionResult Index() 17 { 18 return View(); 19 } 20 public ActionResult ProcessLogin() 21 { 22 string strUserName = Request["txtUserName"]; 23 string strPwd = Request["txtPwd"]; 24 UserInfoBLL userBll = new UserInfoBLL(); 25 string strLoginSuccess = "ok:登录成功,请稍等.."; 26 string strLoginFaild = "no:用户名或密码错误，请检查"; 27 UserInfo userInfo = userBll.GetUserInfo(strUserName, strPwd); 28 Session.Add("UserInfo", userInfo); 29 string strReturn = userInfo != null ? strLoginSuccess : strLoginFaild; 30 return Content(strReturn); 31 } 32 33 } 34 }
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Index</title> 11 <script src="~/Scripts/jquery-1.8.2.min.js"></script> 12 <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 13 <script> 14 function ajaxSuccess(data) { 15 //alert(data); 16 var strSplit = data.split(\':\'); 17 if (strSplit[0]==\'no\') { 18 $(\'#lbltxtMsg\').text(strSplit[1]); 19 } else if(strSplit[0]==\'ok\') { 20 //登录成功 21 $(\'#lbltxtMsg\').text(strSplit[1]); 22 window.location.href = \'/Home/Index\'; 23 } 24 else { 25 $("#lbltxtMsg").text(\'系统繁忙，请稍后再试...\'); 26 } 27 } 28 </script> 29 </head> 30 <body> 31 <div> 32 @using (Ajax.BeginForm("ProcessLogin", "Login", new AjaxOptions { HttpMethod = "post", LoadingElementId = "loading", OnSuccess = "ajaxSuccess" })) 33 { 34 <table> 35 <tr> 36 <td>用户姓名：</td> 37 <td>@Html.TextBox("txtUserName")</td> 38 </tr> 39 <tr> 40 <td>用户密码：</td> 41 <td>@Html.Password("txtPwd")</td> 42 </tr> 43 <tr> 44 <td colspan="2"> 45 <input type="submit" name="AjaxSubmit" value="登陆" /> 46 </td> 47 </tr> 48 <tr> 49 <td colspan="2"> 50 <label id="lbltxtMsg" style="color:red;"></label> 51 </td> 52 </tr> 53 </table> 54 } 55 <div id="loading" style="display:none;"> 56 <img src="~/Content/04_ico_loading2.gif" /> 57 </div> 58 </div> 59 </body> 60 </html>
使用到的ASP.NET MVC Ajax参考：Mvc4MicrosoftAjaxDemo
3:登录成功之后重定向到/Home/Index [使用JQueryEasyUI布局 参考\\demo\\layout下的full.html]
1 using DrHao.CMS.Model; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace DrHao.CMS.WebApp.Controllers 9 { 10 public class HomeController : Controller 11 { 12 // 13 // GET: /Home/ 14 15 public ActionResult Index() 16 { 17 UserInfo user = Session["UserInfo"] as UserInfo; 18 if (user == null) 19 { 20 return Redirect("/Login/Index"); 21 } 22 else 23 { 24 ViewBag.userLogin = user.UUserName; 25 return View(); 26 } 27 } 28 29 } 30 }
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Index</title> 11 <link href="~/Content/themes/default/easyui.css" rel="stylesheet" /> 12 <link href="~/Content/themes/icon.css" rel="stylesheet" /> 13 <link href="~/Content/themes/demo.css" rel="stylesheet" /> 14 <script src="~/Scripts/jquery-1.8.2.min.js"></script> 15 <script src="~/Scripts/easyui-lang-zh_CN.js"></script> 16 <script src="~/Scripts/jquery.easyui.min.js"></script> 17 <script> 18 $(function () { 19 BindClickEvent(); 20 }); 21 22 function BindClickEvent() { 23 $(".detailListLink").click(function () { 24 var strText = $(this).text(); 25 var url = $(this).attr(\'Url\'); 26 var isExist = $(\'#ttCenter\').tabs(\'exists\', strText);//判断选项卡是否存在 27 if (isExist) { 28 $(\'#ttCenter\').tabs(\'select\', strText); 29 } else { 30 $(\'#ttCenter\').tabs(\'add\', { 31 title: strText, 32 content: ShowContent(url), 33 closable: true 34 }); 35 } 36 }); 37 } 38 39 function ShowContent(url) { 40 var strHtml = \'<iframe src="\' + url + \'" scrolling="no" width="100%" height="100%" frameborder="0"></iframe>\'; 41 return strHtml; 42 } 43 44 </script> 45 </head> 46 <body class="easyui-layout"> 47 <!--页面顶部设置开始--> 48 <div data-options="region:\'north\',border:false" style="height:60px;background:#B3DFDA;padding:10px"> 49 <h1 style="text-align:center;">ASP.NET MVC4 Demo</h1> 50 </div> 51 <!--页面顶部设置结束--> 52 <!--页面左边设置开始--> 53 <div data-options="region:\'west\',split:true,title:\'West\'" style="width:200px;padding:2px;"> 54 55 <!--左边菜单栏设置开始--> 56 <div class="easyui-accordion" style="width:auto;height:200px;"> 57 <div title="新闻管理" data-options="iconCls:\'icon-ok\'" style="overflow:auto;padding:10px;"> 58 <a href="javascript:void(0)" class="detailListLink" url="/AdminNewList/Index">新闻管理</a> 59 </div> 60 <div title="评论管理" data-options="iconCls:\'icon-help\'" style="padding:10px;"> 61 <a href="Javascript:void(0)" class="detailListLink" url="/AdminCommentList/Index">评论管理</a> 62 </div> 63 </div> 64 <!--左边菜单栏设置结束--> 65 </div> 66 <!--页面左边设置结束--> 67 <!--页面中部设置开始--> 68 <div data-options="region:\'center\',title:\'Center\'" id="dvCenter"> 69 <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="ttCenter"> 70 <div title="首页" style="padding:10px;overflow:hidden;"> 71 <h1>欢迎您：@ViewBag.userLogin<br/> 72 当前时间:@DateTime.Now.ToString() 73 </h1> 74 </div> 75 76 @*<div title="首页" style="padding:10px;overflow:hidden;"> 77 <iframe src="/AdminNewList/Index" scrolling="no" width="100%" height="100%" frameborder="0"></iframe> 78 </div>*@ 79 </div> 80 81 </div> 82 <!--页面中部设置结束--> 83 <!--页面底部设置开始--> 84 <div data-options="region:\'south\',border:false" style="height:50px;background:#A9FACD;padding:10px;"> 85 <h4 style="text-align:center;">Copyright © Dr_Hao</h4> 86 </div> 87 <!--页面底部设置结束--> 88 </body> 89 90 </html>
显示效果为：
4:点击左边[新闻管理]，请求/AdminNewList/Index，返回新闻列表(使用数据库分页)
MSSql分页查询语句参考：