zoukankan      html  css  js  c++  java
  • Asp.Netserver控制发展Grid实现(一个)UI转让

    使用Asp.Net办Web开发时间,控制系统提供了,目的,有时很难达到理想的。然后,有几种方法来解决,例如,使用html+js形式,在所需界面的布局的前端,然后通过ajax和其他方式获得的数据。为了实现该目标。

    但这样做,很费劲。,更加费劲。有人。会直接将该界面的代码进行拷贝。但这对后来的维护必定带来更大的问题。所以就考虑。有没有一种方式能够让布局得到重用,又便于维护的。Asp.Net的控件能够非常方便的布局,同一时候又能在后台中直接操作控件。实现相关的数据逻辑。所以就想借用asp.net的技术,来自行封装出控件。

    有的人会说。直接使用asp.net的用户自己定义控件封装,不也能够达到目的么?在一定程度上,确实是能够的。可是假设,我们须要很多其它的特性的时候。这个依旧非常难满足要求。

    特别是当我们在移动端使用一些库进行开发时,问题会更严重。

    比方在移动端使用JqueryMobile进行开发时,因为JqueryMobile是基于前端的,所以对于后端的使用会有些棘手。这样的情况。就能够考虑asp.net+jquerymobile来达成。

    (使用asp.net mvc4来结合jquerymobile的不属性该范围)

    我们通过简单的封装。来实现一个Grid控件。先看一下效果图。


    该效果图的前后面代码例如以下:

    前端代码default.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Demo._default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <S:Grid runat="server" ID="Grid_Edit">
                    <Columns>
                        <S:BoundField runat="server" ID="BoundField1" HeaderText="货号" DataField="NO" />
                        <S:BoundField runat="server" ID="BoundField2" HeaderText="类型" DataField="Type" />
                        <S:BoundField runat="server" ID="BoundField3" HeaderText="状态" DataField="Status" />
                    </Columns>
                </S:Grid>
            </div>
        </form>
    </body>
    </html>
    
    当中带S前缀的控件就是封装的Grid控件。

    后面代码default.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace Demo
    {
        public partial class _default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    InitLoad();
                }
            }
    
            private void InitLoad()
            {
                Grid_Edit.DataSource = GenerateData();
            }
    
            private DataTable GenerateData()
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("NO");
                dt.Columns.Add("Type");
                dt.Columns.Add("Status");
    
                dt.Rows.Add(new String[] { "H10001", "食品", "已售完" });
                dt.Rows.Add(new String[] { "H10002", "蔬菜", "待销售" });
                dt.Rows.Add(new String[] { "H10003", "水果", "待销售" });
                dt.Rows.Add(new String[] { "H10004", "器具", "销售中" });
    
                return dt;
            }
        }
    }
    给Grid_Edit的DataSource赋值。

    从代码中能够看到,S:Grid内部有一个Columns,在Columns中还有S:BoundField字段。在S:BoundField字段中有HeaderText和DataField属性。

    当中HeaderText就是列头。DataField就是绑定的字段,与后台代码的DataSource的字段相应。

    这样的操作方式与Asp.Net的GridView相似。

    所以我们要封装出一个Grid,至少须要做下面几件事:

    1.定义一个Grid类

    2.在Grid类中包括Columns的属性。

    3.在Columns的属性中。必须可以容纳BoundField字段。

    4.必须在编辑器中可以直接敲出<Columns>。

    详细实现,请看《Asp.Netserver控件开发的Grid实现(二)》




    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    86. Partition List
    2. Add Two Numbers
    55. Jump Game
    70. Climbing Stairs
    53. Maximum Subarray
    64. Minimum Path Sum
    122. Best Time to Buy and Sell Stock II
    以场景为中心的产品设计方法
    那些产品经理犯过最大的错
    Axure教程:如何使用动态面板?动态面板功能详解
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/4714939.html
Copyright © 2011-2022 走看看