开发更加灵活的自定义控件

采用了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的可见性。数据,也就是附件,可以上传、下载、删除。根据权限控制可见性。

原文地址:https://www.cnblogs.com/lucika/p/4552011.html