天天看点

JQuery EasyUi之界面设计——母版页以及Ajax的通用处理(三)控件赋值 后台处理逻辑 前端HTML

前面介绍过JS了,就这样个人认为还不够用。

因为JS文件是死的,无法使用服务器代码,自然不够灵活。那么通过母版页就完善了这一点。那么下面举一个例子——控件赋值。

前面说过easyui的form自带验证、提交、重置与赋值,那么如何利用这个赋值呢?千篇一律的写赋值代码总是那么的令人厌烦,尤其是元素比较多的时候,用反射嘛又怕别人诟病,那么就用JS来负责这一切吧.

那么如何做到通用呢?那母版页就是不错的选择。

下面贴出母版页完整代码:

从代码中可以看出:

页面上定义了3个全局JS变量,有注释,我就不赘述了。

setAjaxUrl函数在表单赋值加载前执行,可以实现用于更改上面的3个变量的值,或者作其他作用,建议命名为beforeFormLoad。

typeCode的值为页面名,比如“index.aspx”,提交给处理程序用于判断是哪个页面,以便返回对应的JSON数据。

那么处理程序如何返回对应的JSON数据呢?先看看大体结构:

JQuery EasyUi之界面设计——母版页以及Ajax的通用处理(三)控件赋值 后台处理逻辑 前端HTML

从上面代码可以看出:

通过Type参数,可以获取请求的页面。

通过autoLoad参数,可以判断是否是加载赋值。注意FirstOrDefault函数,是获取第一条数据,然后通过ToJson方法(自己定义的扩展方法)转换为JSON数据。

通过id参数,可以判断是否为编辑。

以上使用的是LINQ to SQL,个人认为使用LINQ to SQl开发小项目还是挺快的。关于LINQ to SQL的具体使用,就不说了。顺便送大家一段服务器分页通用代码(仅支持LINQ2SQL),如果觉得性能不行,请自己用存储过程实现,这里不考虑性能:

相比使用各种.NET Ajax框架,我还是喜欢按上面这种模式,虽然很多Ajax框架可以实现js调用C#方法,可以调用WebService,可以操作服务器控件,但是我仍然痴迷上面的模式,因为个人觉得这样精简、易控制、一目了然、没有ViewState、没有服务器控件、甚至没有Cookie和Session(需要实现接口)。。。。

刚才贴的后台处理逻辑是用户管理的编辑界面,那么前端HTML呢?如下:

值得注意的是:

这里使用的控件均为HTML控件。

请注意name属性,该属性决定提交的post参数名,同时也是form加载赋值的参数名,也就是这里的值要与后台输出的JSON要对应。

返回的JSON数据如下:

JQuery EasyUi之界面设计——母版页以及Ajax的通用处理(三)控件赋值 后台处理逻辑 前端HTML

这一篇就写到这里吧。由于最近忙,又耽误了。。。

继续阅读