EasyMvc 希望实现的目标:模块化,快速简单化,满足80%的常见需求.基于.Net Core 2.0.5开发.开发环境:VS2017,运行环境支持Window/Linux. 相关链接: 演示地址:http://core.zwc.cn 演示下载:http://site.zwc.cn/easymvcdemo.zip 博客园文档(3月底完善完毕):http://www.cnblogs.com/chinasoft/p/8299016.html 看云文档(3月底完善完毕):https://www.ka…

1.EasyMvc简介 EasyMvc主要是为了丰富asp.net core mvc控件而出现的: 它提倡简单,面向对象式开发,希望能快速开发的同时,仍然保持一定的灵活性. 2.EasyMvc初相识 从演示地址:http://core.zwc.cn 可以看到如下的界面: 实现以上效果仅需以下代码: @using EasyMvc.EasyMvcControl @(Html.Q().Loginer() .UserName("admin") .Password("111111&qu…

我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Html.Q().Timer().Name("mxd").Interval(1000).ClickClientEvent("before") <script> var i = 0; function before() { i++; layer.msg("…

我们有时候经常看到如下的页面: 或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子: @{ var data=new List<TimeLineItem>() { new TimeLineItem() {Title = "", Text = "开始"}, new TimeLineItem() {Title = "2014年", Text = "新版本发布1.0"}, new TimeLin…

我们网页很多时候需要小图标来进行美化,EasyMvc默认提供了100多种常用小图标,您可以根据实际情况选择使用,请看下面的例子: @Html.Q().Ico().Type(EasyMvcHelper.IcoType.About) 显示的效果是: 似乎简单了点:) 不过,很多复杂的事物都是由简单的事物组成的哦,请看小图标与按钮结合后的效果: 代码如下: @{ var ico = Html.Q().Ico().Type(EasyMvcHelper.IcoType.Camera);} @Html.Q(…

文字块导航其实就是开发winform时候常见的 带Title的Group面板..~!@#￥..好吧,没开发过winform的同学看下图: 实现代码如下: @Html.Q().BlockField().Title("我是微导航").Text("您可以看看我可以被用在什么地方呢...") 一般用在一个页面的开始,或者用于包括一些文字,用在页面开始的时候,可能如下效果更好: 实现代码如下: @Html.Q().BlockField().Title("我是没有边框…

提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这么简单的功能,我可以直接div+css就可以实现了嘛:)为什么还要用这个控件呢? 原因是..这个的确不太好回答,但简单回答如下: 个人认为EasyMvc的初衷是模块化,快速简单化的,那意味着开发系统的时候,只要大脑里闪过我需要重点突出,就能直接想到我需要EasyMvc的提醒模块,而不是想到我需要div,css…

图片轮播导航大家一定很常见,尤其是中小型建站系统的必备神器..:) 先上图上例子,看效果如下: 实现代码如下: @{ var data = new List<PhotoPlayerItem>() { new PhotoPlayerItem() { Title = "公司产品一", Src = "http://zwc.cn/images/up_images/5.jpg", Href = "http://zwc.cn" }, new Ph…

基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<MenuItem>() { new MenuItem() {Id = "1", Text = "主页", Url = "http://zwc.cn"}, new MenuItem() {Id = "2", Text = "…

选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new TabItem() {Title = "我是Tab 1", Text = "我是Tab 1的内容"}, new TabItem() {Title = "控件说明", Text = "控件的Text一般可以简单嵌入html"} }; }…

想起刚做网页时候,看着这么大的屏幕,一直在 想该如何布局呢,后来经过Table布局,Div布局,Border布局,列式布局. 目前EasyMvc主要支持12列的列式布局(手机兼容性好).请看下面的例子: @Html.Q().StartRow() <div style="background-color: rgb(139, 235, 146)">我被包裹在StartRow与EndRow之间,我将占据12列...</div> @Html.Q().EndRow() @…

现在很多管理后台都流行全屏切割的布局,大体结构如下图所示: 大家注意到没,整个布局是五个部分组成:“东西南北中”,EasyMvc对应的实现的代码为: @(Html.Q().Layout().TextCenter("我坐镇中间...是强大的布局哦..."). TextNorth("我属于north...").TextSouth("我属于north...").TextEast("我属于east...").TextWest(&quo…

我们开发的系统,主要的一个功能就是采集界面数据,传回到服务器,比如:录入学生信息,这时候就需要表单. EasyMvc提供了如下界面控件,如下图所示:(控件+布局) EasyMvc实现了基于模型的绑定,model有数值的时候会自动绑定到控件上,具体代码如下: @{ var data = new Person { UserName = "admin", Password = "111111", Sex = "男", Like = new List&l…

表单与表格是信息化系统里很常见的控件,EasyMvc提供了简单的数据绑定方式(基于Json),看下面的示例:  准备的接口地址代码如下:(该接口适用以下所有例子) public IActionResult TableData(int page, int limit, string field = "", string sort = "") { for (var i = 0; i < 1000; i++) { var item = new Person { Us…

本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); var rd = new Random(); data.Add(new LineItem() { Name = "第一节车厢人数", Value = rd.Next(50) }); data.Add(new LineItem() { Name = "第二节车厢人数",…

休息片刻后,继续开工... 这次我们继续学习引言导航,引言导航主要用于知识点的开始,起到知识点导航的作用.直接例子: 实现代码如下: @Html.Q().BlockRef().Title("我一般作为引言提醒使用") ..似乎代码不够高深,不够复杂..:)但这不正是我们需要实现的么:) EasyMvc也提供了两种风格的引言导航,请见下面的例子: 实现的代码也是很简单,如下所示: @Html.Q().BlockRef().Title("我一般作为引言提醒使用") @H…

按钮是我们最常用的控件之一了,先看下我们提供的按钮风格: 不同颜色的: 实现代码: @Html.Q().Button().Text("Danger").ColorDanger() @Html.Q().Button().Text("Default").ColorDefault() @Html.Q().Button().Text("Normal").ColorNormal() @Html.Q().Button().Text("Warm&qu…

折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data = new List<CollapsibleItem>() { new CollapsibleItem() {Title = "标题一", Text = "内容一"}, new CollapsibleItem() {Title = "标题二&qu…

进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value(50) 效果如下: 怎么样,还是很简单吧:) 那么可不可以炫些呢?其实是可以的,请看下例: 代码如下: @Html.Q().Progress().Value(50).ColorWarm() @Html.Q().Progress().Value(50).ColorDanger() @Html.Q().…

栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<NavigatorItem>() { new NavigatorItem(){Text = "管理中心"}, new NavigatorItem(){Text = "文章管理"}, new NavigatorItem(){Text = "文章编辑"…

网页开发的时候,会经常向用户显示一些信息,比如执行结果,注意事项等,下面展示一种最简单的信息提示: 代码如下: @Html.Q().Msg().Text("初始化信息").AutoShow() 如果我们想客户端控制是否显示,应该如何做呢?请参看如下代码: @Html.Q().Msg().Id("m").Text("我是信息框").AutoShow() @Html.Q().Button().Text("显示").ClickCli…

上一节我们说到的信息框比较简单,如果我们想简单实现用户用户交互,比如常用的锁屏界面,应该如何实现呢?首先看效果: 当用户输入"mxd",后,界面显示如下: 以上效果的实现代码为: @Html.Q().Dialog().Text("请输入一些数据").AutoShow(true).YesCallBack("yesCallBack").AsPrompt() <script> function yesCallBack(data) { lay…

前面两节介绍了信息框与对话框,实际开发中如果我们遇到更复杂的要求,比如要求在弹出框里显示另外的网址,如下所示: 实现代码如下: @Html.Q().Popup().Text("我可以嵌套网页").ContentOrUrl("http://zwc.cn").AutoShow().AsFrame() 当然了,弹出框还是支持事件回调的,并且更高级,如下例所示: 并且我们仍然可以对这些自定义按钮绑定事件,如下所示: @Html.Q().Popup().Id("p&…

DotNetBrowser 希望实现的目标:桌面软件可以完美运行Html5,内置支持MVC与WebSocket的微型服务器. 基于.Net 4.0开发.开发环境:VS2017,运行环境支持Window xp以及以上系统. 博客园文档:http://www.cnblogs.com/chinasoft/p/8379662.html 类库以及演示源码下载:https://pan.baidu.com/s/1pMLK7Dh   密码:985g 目录: DotnetBrowser入门教程-入门 Dotnet…

十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件.比如index.scss转换成index.css 安装成功后,package.json文件变化如下: 接着,安装extract-text-webpack-plugin,让webpack可以输出css格式的文件 npm install --save-…

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }…

一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install -g webpack 如果公司网络是设置代理的,要设置下代理地址 npm config set proxy http://***/ 三.建立项目文件夹 我在本机的E盘上,建了一个名称为demo的文件夹 四.初始化package.json 1.cmd控制台进入E盘下的demo文件夹 2.输入 npm…

阮一峰文章:Content Security Policy 入门教程…

本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查…

请大家去这个地址下载:file:///D:/UE4%20Doc/虚幻4新手引导入门教程.pdf…