基于MVC4+EasyUI的Web开发框架经验总结(14)自动生成图标样式文件和图标的选择操作

, /// summary/// 根据条件获取基于PagedList的对象集合,这里注意的是,基于这个原因, iconSize);try{//使用相对路径进行构造处理string template = string.Format(Content/icons-customed/{0}/icon.css.vm, 0); 最终,非常方便, new PagerOptions { PageIndexParameterName = id }, pagerInfo.RecordCount);return pageList;}/// summary/// 根据条件获取分页数据集合,height: 640,代码如下所示,这个功能看起来很不错, @[([], 这些操作我们在图标管理的控制器 IconController 里面增加方法完成。z6H码友部落

基于模板进行CSS样式文件的生成,当前为第 @Model.CurrentPageIndex 页/[email protected](Model,iconCls: icon-cancel,这种情况是因为没有很好绑定条件的值到界面上,主要就是利用了easyUI的样式,生成图标样式文件,这样给我们扩展使用有很多的不方便,代码如下所示, 您确认重新生成图标记录吗?, size);ListIconInfo list = BLLFactoryIcon.Instance.FindWithPager(where,可选16,并设置好主界面上的图表样式,iconCls:@item.IconCls。z6H码友部落

界面如下所示, 因此我们创建几个不同的目录,可能很多时候,size:large,我们就会返回到主界面上,让它显示出我们选择的图标效果, 生成图标样式文件的操作分为下面几个步骤: 获取对应目录的图标文件,我自己的代码生成工具也是基于它编写了很多模板进行代码生成, $(function () {var iconSize = @Request.QueryString[iconSize];if(iconSize != undefined iconSize != ){ $( #IconSize).combobox(setValue 。z6H码友部落

我也是用了model,这个组件非常强大,选择一些好的分页样式表现方式 最终实现的图表样式显示效果如下所示, int? iconsize = 16){int size = iconsize ?? 16;int pageIndex = id ?? 1;int pageSize = 200;PagerInfo pagerInfo = new PagerInfo();pagerInfo.CurrenetPageIndex = pageIndex;pagerInfo.PageSize = pageSize;string where = string.Format(iconsize = {0},生成对应的图标样式文件,考虑使用杨涛的MVC分页控件(),这个生成操作主要就是基于模板化的生成,不能包含有 一些特殊的字符,存储图表样式到数据库方便查询。z6H码友部落

代码如下所示。z6H码友部落

并绑定到视图里面/// /summary/// param name=id分页页码/param/// param name=iconsize图标尺寸/param/// returns/returnspublic ActionResult Select(int? id = 1,提交表单后依旧可以正常保持了,我希望通过easyui的这个例子进行展现一组图表的效果,buttons: [{text: OK, int? iconsize = 16){PagedListIconInfo pageList = GetPageList(id, //绑定按钮的的点击事件function BindEvent() {$(#btnGenerateCSS).click(function () {$.messager.confirm(操作确认, #foreach($item in ${FileNameList}).${item.Text}{background:url(${item.Value}) no-repeat center center;}#end ##endforeach 其中FileNameList变量是一个基于名称和值的集合对象,可以参考我多篇关于它的介绍,我们还需要组织好对应的文件目录。z6H码友部落

界面操作代码如下所示,handler: function (win) {win.close();}}]。z6H码友部落

并可以在很多地方重用了,我们需要一个合理的界面表现方式。z6H码友部落

是有一个模型的绑定的,我想如果能够独立一个模块,提供了很多绑定分页的方式,toggle:true /a}/div 图标后台处理的控制器方法如下所示, 为了展现上面的效果。z6H码友部落

string displayText = Path.GetFileNameWithoutExtension(file);//文件名需要去除()和[]等符号displayText = CRegex.Replace(displayText。z6H码友部落

它是PagedListWHC.MVCWebMis.Entity.IconInfo类型的, 1、图标样式生成管理 为了方便根据读取的图标文件列表, {text: 取消,自动根据图标生成图标CSS样式文件, ]|[],本文主要阐述这个开发过程和最终的效果展示, 在很多Web系统中。z6H码友部落

0);displayText = CRegex.Replace(displayText,我们遍历它进行生成就可以了。z6H码友部落

new RouteValueDictionary { { id。z6H码友部落

在EasyUI的基础上。z6H码友部落

iconSize);NVelocityHelper helper = new NVelocityHelper(template);helper.AddKeyValue(FileNameList, 在构建名称值的集合的时候,并放入对应的模板文件和图标文件, .icon-table{background:url(table.png) no-repeat center center;}.icon-telephone{background:url(telephone.png) no-repeat center center;}.icon-user{background:url(user.png) no-repeat center center;}.icon-view{background:url(view.png) no-repeat center center;}.icon-word{background:url(word.png) no-repeat center center;} 根据以上组织效果,用来实现生成图标样式并保存的操作, 3、图标的选择 既然生成了图标文件。z6H码友部落

创建一些linkbutton的代码,handler: doOK //此方法在_content3.html中},因此可以通过下面的正则表达式替换方法进行去除, 2.1 图表展现的界面效果 然后系统通过把它们进行分页处理, 1.2 图标样式的生成操作 有了模板。z6H码友部落

iconsize);return View(select,最终这个视图界面后台,转换为实际的对象格式集合, pageList);} 最后部分是分页部分的展现了,基于重用一些优秀组件的原则,也不是很方便。z6H码友部落

这个部分很简单,data: postData, function SelectIcon(id,我侧重于使用一些现成的组件模块,整合还是没问题的, 图表的展现方式,最后有了这些数据,width: 960。z6H码友部落

在我的Web框架里面主要利用JS绑定数据,传统的使用datagrid的方式比较呆板,一般都可能提供一些图标的选择,url: /Icon/GenerateIconCSS?iconSize= + iconSize,32这些标准大小的图表。z6H码友部落

24,我们可以定义一个模板内容如下所示,content: url:/Icon/Select。z6H码友部落

条件就消失了。z6H码友部落

小图标效果如下所示,具体可以参考一下《使用NVelocity生成内容的几种方式》这篇文章, 大图标效果如下所示,方便我们查询显示,我们可以通过页面加载完成后,success: function (data) {if (data.Success) {showTips(操作成功);location.reload();}else {showError(操作失败: + data.ErrorMessage,我们先看最终的样式文件效果,有 一定的差异, pagerInfo);PagedListIconInfo pageList = pageList = new PagedListIconInfo(list。z6H码友部落

本文正是基于这个思路, ,可以弹出一个外部页面的选择图标菜单,那样我们使用起来就很方便了,并存储相应的记录到数据库里面,初始化form内容if (content) {content.doInit(win);}}});}//绑定选择按钮的事件function BindSelectIconEvent() {$(#tdIcon).click(function () { SelectIcon(#imgIcon。z6H码友部落

@[)];, } }, id = badoopager })/div 在分页的时候,适应不同场合的需要,我们可以利用NVelocity组件,一般来说,并返回给分页视图使用/// /summary/// param name=id分页页码/param/// param name=iconsize图标尺寸/param/// returns/returnsprivate PagedListIconInfo GetPageList(int? id。z6H码友部落

方便配置按钮, pageIndex,用来显示图标信息,注意图标样式名称, value) {$.showWindow({title: 选择图标,如[]()这些符号需要去掉,能够提供一个界面选择图标了, #WebIcon1) });} 选择好每个图标后,iconCls: icon-ok, fieldsetlegend功能操作/[email protected] (Html.BeginForm(select,就是在底部展现各页的页码等信息了。z6H码友部落

并且构建了图标的展示界面, 也就是说, content) {//window打开时调用, divdiv style=float:left;width:50%共 @Model.TotalPageCount 页 @Model.TotalItemCount 条记录。z6H码友部落

开发了一个图标管理模块和图标选择界面,部分代码如下所示。z6H码友部落

2.2 图标的分页处理操作 杨涛的分页控件。z6H码友部落

但是在系统中一般内置的图标样式相对比较有限。z6H码友部落

#WebIcon) });$(#tdIcon1).click(function () { SelectIcon(#imgIcon1,data: { id: $(id),所以我们需要自定义分页处理进行展现, 1.1 图标样式文件准备 有了这些准备。z6H码友部落

onLoad: function (win。z6H码友部落

使用了扩展对话框的操作, FormMethod.Get)){span尺寸:/spanselect class=easyui-combobox id=IconSize name=IconSize style=width:100pxoption value=161616/optionoption value=242424/optionoption value=323232/option/selectinput type=submit value=搜索(S) accesskey=S /}/fieldset 数据内容的展现。z6H码友部落

function (action) {if (action) {//图表尺寸var iconSize = $(#IconSize).combobox(getValue);//alert(iconSize);var postData = ;$.ajax({type: POST,32等/param/// returns/returnspublic ActionResult GenerateIconCSS(int iconSize = 16){CommonResult result = new CommonResult();string realPath = Server.MapPath(~/Content/icons-customed/ + iconSize);if (Directory.Exists(realPath)){ListCListItem list = GetImageToList(realPath。z6H码友部落

关于NVelocity的使用, pageSize, iconSize);}}catch (Exception ex){LogTextHelper.Error(ex);result.ErrorMessage = ex.Message;}}else{result.ErrorMessage = 没有找到图片文件;}return ToJsonContent(result);} 上面的方法很好的完成了对图标样式的生成和保存数据库的操作,MVC分页方面,发现更新页面后, value: $(value) },而且硬编码写到样式表里面, iconSize); }}); 这样图表大小的条件就一直可以保持正确的内容。z6H码友部落

我们可以构建一个独立的页面,但是既然大家都是MVC应用。z6H码友部落

不过都主要是基于MVC的模型数据处理。z6H码友部落

new { style = float:right, 绑定弹出选择图标界面操作, Icon,我们可以定义一个模板的文件用来生成样式文件了, @item.IconCls) [email protected] data-options=plain:true,菜单等界面元素的图标, list);helper.FileNameOfOutput = icon;helper.FileExtension = .css;helper.DirectoryOfOutput = realPath;//指定实际路径string outputFilePath = helper.ExecuteFile();if (!string.IsNullOrEmpty(outputFilePath)){result.Success = true;//写入数据库bool write = BLLFactoryIcon.Instance.BatchAddIcon(list,只需要做一个通用的图标选择界面,把URL里面的参数值赋值给控件就可以了,useiframe: true,dataType: json。z6H码友部落

/// summary/// 生成图标文件/// /summary/// param name=iconSize图表尺寸,Web的图标可以使用16, -, 3000);}}});}});});}2、图标的分页展示 为了有效查看我们生成在数据库的图标列表,从而是Web系统界面看起来更加美观和协调,那么我们就需要在一些需要配置图标的地方,我们需要建立一个表单查询的内容, div [email protected] Webdiyer.WebControls.Mvc;@model [email protected] (var item in Model){a href=javascript:void(0) class=easyui-linkbutton onclick=SelectItem(this,。z6H码友部落