采用了MVC的书写方式,挺棒!
项目很多地方需要上传和下载文件,显示文件名称、上传时间基本信息,同时提供了批量删除与下载功能。
为方便,做成了一个控件,采用了ajax效果。设计有点繁琐。
整体效果:
附件记录
附件列表
数据展示控件
1、封装了基本数据方法,完全是前台方法。如,get,post,delete方法。
2、提供了一个展示数据的容器(DIV)。
由于需要指定表头,及容器ID,在后台定义了两个变量_Title和_Id。
webform在ascx页面采用了类似于MVC的书写方式。<% %>
<% if (string.IsNullOrEmpty(_Id)) _Id = System.Guid.NewGuid().ToString("N"); if (string.IsNullOrEmpty(_Title)) _Title = "附件上传"+_Id; var container = System.Guid.NewGuid().ToString("N"); %>
实现了表头及Id的动态操作。
<h class="show" onclick="toggle(this,'<%= _Id %>');" id='<%= _Id %>'><%= _Title %></h> <div><% if (!ReadOnly){%> <a href="javascript:void(0)" onclick="javascript:upload()">上传</a> <a href="javascript:void(0)" onclick="javascript:del()">删除</a><%} %> <%if (Download){%> <a href="javascript:void(0)" onclick="javascript:download('<%= _Id %>')">下载</a> <%} %> </div>
<div id='<%= _Id %>'>
<div id="<%= container %>"></div>
</div>
根据权限动态生成html页面相关元素,而不是简单的掩藏。如果不是只读(ReadOnly)生成上传、删除给你按钮,有下载权限时,生成下载按钮。
如果精益求精的话可以对JavaScript脚本采用同样的实现方式,而不是将全部方法输出到客户端。
<script type="text/javascript"> //<![CDATA[
<% if (!ReadOnly){%> function add(){} function delete(){}
<%} %>
<%if (Download){%>
function download(){}
<%} %>
//]]> </script>
考虑到在一个页面多次引用控件,避免重复生成html元素,可以用向客户端注册脚本的方式实现。
<% if(!Page.ClientScript.IsStartupScriptRegistered(this.Page.GetType(),"Key")) { Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "Key", string.Empty, true); } %>
注意:
IsStartupScriptRegistered,应使用两个参数的重载。参数Type,应该使用Page.GetType(),而不是this.GetType。这样在整个页面都适用。
数据生成控件
通过Repeater控件实现。
两个控件间的桥梁是ashx。通过反射将ajax请求的数据,自动映射到控件中。
所以,在使用时,只需要引用第一个控件即可。
系统不断的调整,维护时感觉很累。为什么会发生这种情况呢?
应该补充一点,实际的展示稍微复杂一点。展示是有效果的。
如,一个DIV显示标题,点击标题可以控制显示数据的DIV的可见性。数据,也就是附件,可以上传、下载、删除。根据权限控制可见性。