zoukankan      html  css  js  c++  java
  • 开发更加灵活的自定义控件

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

  • 相关阅读:
    小程序跳转 H5 时 cookie 值处理问题
    小程序 <web-view></web-view> 中使用 form 表单提交
    React Router 4.x 开发,这些雷区我们都帮你踩过了
    【译】使用 Flutter 实现跨平台移动端开发
    js中的 Date对象 在 IOS 手机中的兼容性问题
    thinkPHP中M()和D()的区别
    thinkphp的select和find的区别
    ThinkPHP3.1快速入门教程
    打开MSSQL 2008 R2的时候,展开数据库都显示以下的错误提示: 值不能为空。参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explorer)
    原型模式(Prototype Pattern)
  • 原文地址:https://www.cnblogs.com/lucika/p/4552011.html
Copyright © 2011-2022 走看看