天天看点

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

在第八讲中,我们已经做到了怎么样分页。这一讲主要讲增删改查。第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下。这讲主要是,制作漂亮的工具栏,虽然easyui的datagrid已经自带可以设置工具栏,我们还是要提取出来,为以后权限控制做更好的准备。

前端代码没有逻辑结果,这也许是我写代码以来写得最轻松的,但也是最繁琐的,因为美工我不是强项,每一次调整都非常的困难,最后我把他调成了这样了:

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

看得过去的鼓掌一下。样式已经包含在附加代码中了。

大家只要加入以下HTML代码到index上就可以了

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

View Code

有能力的朋友再优化一下样式

好,我们用jquery为按钮添加事件。增、删、改、查,把导出和刷新删掉吧。没用到

在index加入以下代码js代码

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

这是jquery绑定了事件,不知道jquery怎么用的,穿越回去学习一下选择器和事件

OK代码很清楚的告诉了我们增删改要做什么了。

里面用到了easyui 的window

所以我们在Index顶部加入一个层来包含弹出window,我们把增加,修改的视图放在iframe里面,然后附加到window里面弹出

关于$.messageBox5s是我扩展easyui的message控件的结果,扩展如下

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

jquery.easyui.plus.js

创建jquery.easyui.plus.js放到scripts目录下,引入即可

编译预览一下,点击下,新增和编辑,好,有效果了

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

此时我们创建增加,和编辑的action和view

这里是SysSampleController的代码

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

SysSampleController

在创建视图之前,我们先创建一个模板页,打开views下面的Shared创建

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

_Index_LayoutEdit.cshtml

我们以后的弹出窗口全部要用到这个模版,这个模版页主要是引入了数据编辑和校验

下面创建Create视图

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

Create

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

下面的太简单了,修改和详细自己动手做起来吧。说得太明白东西就没什么意思了

给点提示,修改就把创建复制一份,保存的时候把url指到修改

详细就把保存去掉就可以了

查询,在Controller的GetList增加一个queryStr参数,在BLL判断是queryStr是否为空。不为空就用Linq写多个where,O了

继续阅读