东莞制作企业网站公司,包头企业网站,西安网站建设winkuo,界面简洁的网站下面开始在UserManager.Web中利用easyUI构建web。 1. 先删除自带的controllers、models和views#xff08;里面的shared和web.config可以保存#xff09;下面的文件 2. 要利用easyUI#xff0c;首先去网上下载jquery-easyui-1.3.2.zip#xff0c;同时下载一份EasyUI-1.3.2.… 下面开始在UserManager.Web中利用easyUI构建web。 1. 先删除自带的controllers、models和views里面的shared和web.config可以保存下面的文件 2. 要利用easyUI首先去网上下载jquery-easyui-1.3.2.zip同时下载一份EasyUI-1.3.2.CHM帮助文档方便查阅。 这里给出下载链接分享 链接: http://pan.baidu.com/s/1c2xAGKS 密码: pkd6 解压后的easyui是这样的 3. 下面在Controllers右击添加新的控制器-HomeController.cs 这一部分可以先看前面提到的极客学院中讲解MVC的视频简单了解一下。 4. 在Views视图下创建HomeController.cs对应的视图Views先添加新建文件夹命名为Home 再在Home下新建视图 命名为Index不选择母版添加。 这时web项目已经新增了HomeController.cs和Index.aspx两个文件前者用来写后台判断逻辑后者则用来表示页面。所以打开Home-Index我们刚刚下载的easyUI也是在这里运用。 忘了介绍easyUI是一款简单功能强大的js框架在jQuery基础上发展而来的。 http://www.jeasyui.com/index.php 这里是它的官方网址里面有很多demo和教程可以学习观看和利用。 5. 把下载的easyUI解压后添加到添加到Web-Content下面我们可以复制部分要用到的文件即可。先在Content下面新建Easyui文件夹和Views新建Home操作一样重复的地方就不图示了。 把jquery-easyui-1.3.2目录下的jquery-1.8.0.min.js和jquery.easyui.min.js直接复制快捷键CtrlC复制到Content-Easyui下快捷键CtrlV同样复制locale下的easyui-lang-zh_CN.js和整个themes文件夹。 6. 添加js库到homeIndex中。因为项目Views中可能包含多个Index.aspx这里前面括号加上前缀表示属于哪个视图的index页面 按照顺序添加jquery-1.8.0.min.js、jquery.easyui.min.js、easyui-lang-zh_CN.js 然后为homeIndex添加easyui/themes/default/easyui.css和themes/icon.css的样式。 7. 使用easyui中的layout样式添加到homeIndex中。 可以先查看下载的jquery-easyui-1.3.2/demo/layout中的demo样例或者直接打开EasyUI-1.3.2.CHM注意把chm放在easyui文件夹下面否则打开不能完整显示图片查阅layout的使用。 body classeasyui-layoutdiv data-optionsregion:north,border:false styleheight:61px;background:#0660bb;img src/Content/Images/logo.png//divdiv data-optionsregion:west,split:true,title:菜单栏 stylewidth:250px;padding:10px;west content/divdiv data-optionsregion:south,border:false styleheight:20px;background:#ccc;padding:1px当前登录人JennyJiang/divdiv data-optionsregion:center,title:主面板 stylepadding:10pxhello world!/div/body将homeIndex中的body替换为上面的代码显示layout layout按照上左右下中north-west-east-south-center的顺序在使用easyui的layout时必须将body设置class“easyui-layout”否则就没有用到easyui的样式通过data-options来调整。其中center是必须添加的其他面板可以删除不显示。layout的data-options请查阅chm帮助文档学习。 8. 使用easyui的tree设置菜单栏 使用帮助文档中的第二种格式定义id为tt的ul将tree的内容以json的格式传递定义在MessController.cs中。 homeIndex中的body如下 body classeasyui-layoutdiv data-optionsregion:north,border:false styleheight:61px;background:#0660bb;img src/Content/Images/logo.png//divdiv data-optionsregion:west,split:true,title:菜单栏 stylewidth:250px;padding:10px;ul idtt/ul/divdiv data-optionsregion:south,border:false styleheight:20px;background:#ccc;padding:1px当前登录人JennyJiang/divdiv data-optionsregion:center,title:主面板 stylepadding:10pxhello world!/divscript typetext/javascript$(#tt).tree({url: /Mess/HomeMenu}); /script/body 在Controllers中新建控制器MessController.cs代码如下其中定义了tree中显示的内容即一个json的字符串返回 namespace UserManager.Web.Controllers
{public class MessController : Controller{//// GET: /Json/public ActionResult HomeMenu(){string json string.Empty;json [{id:1,text:用户列表,children:[{id:11,text:普通用户,state:closed,children:[{id:111,text:用户添加},{id:112,text:用户功能}]},{id:12,text:超级用户,state:closed,children:[{id:121,text:用户添加},{id:122,text:用户功能}]},{id:13,text:index.html},{id:14,text:about.html},{id:15,text:welcome.html}]}];return Content(json);}}
} 显示页面如下 9. 使用easyui的tab点击左边菜单栏的添加用户可以在右边主面板中显示 homeIndex中的body如下 body classeasyui-layoutdiv data-optionsregion:north,border:false styleheight:61px;background:#0660bb;img src/Content/Images/logo.png//divdiv data-optionsregion:west,split:true,title:菜单栏 stylewidth:250px;padding:10px;ul idtt/ul/divdiv data-optionsregion:south,border:false styleheight:20px;background:#ccc;padding:1px当前登录人JennyJiang/divdiv data-optionsregion:center,title:主面板 stylepadding:10pxdiv idtabs classeasyui-tabs data-optionsfit:true div titlehome stylepadding:20px;display:none; hello world!/div /div/divscript typetext/javascript$(#tt).tree({url: /Mess/HomeMenu});$(#tt).tree({onClick: function (node) {//alert(node.text); // alert node text property when clicked// add a new tab panel $(#tabs).tabs(add, {title: node.text,content: Tab Body,closable: true,}); }});/script/body 当点击左边菜单栏选项时右边窗口会显示对应名称的tab内容显示“Tab Body”。 但重复点击时仍然添加新的tab对添加新的tab代码进行改进查看easyui关于tab的帮助文档有个exits。。。改进代码如下 $(#tt).tree({onClick: function (node) {//alert(node.text); // alert node text property when clicked// add a new tab panel 这里使用exits判断tab是否已经存在if($(#tabs).tabs(exists,node.text)){$(#tabs).tabs(select,node.text);}else{$(#tabs).tabs(add, {title: node.text,content: Tab Body,closable: true,});} }}); 修改后重复单击同一菜单栏时不会再新建新的tab而是返回到已建的tab。 另外发现点击文件夹也会新建tab通过“id”筛选过滤简单地处理了。 10. 为tab创建一个新的view而不是显示简单的“Tab Body”。新的视图采用easyui的datagrid。 先在Views-Home下新建视图UserEvent.aspx这里一定要注意添加完视图后一定要返回修改HomeController.cs为其添加一个UserEvent的跳转函数。 将上面的代码中的content:xx替换为href:xx 这里可以简单先参考帮助文档里的datagrid显示。 然而每个菜单栏的选项点击后都自动跳转到同一页面有时间的话大家可以多写几个view根据node.text分别对应到相应的视图。 今天的学习先到这里下一篇来写登录注销和数据库SQLite的一些东西。 最后放一张结果图 转载于:https://www.cnblogs.com/jennyjiang-00/p/5753998.html
