zoukankan      html  css  js  c++  java
  • Extjs、ASP.net前后台Grid分页 数据库多表交互(转)

    1 建立ASP.net Web应用程序

    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

    2 在App_Data文件夹内建立数据库db_test

    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客     Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

    建立2张表,通过use_id的外键找出‘这个学生的成绩’

     

    3 插入一些数据,数据可以自定义

    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客   Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

     

    4 解决方案右键,建立类库Model(此类库为数据库中的表抽象出一个类模型)

    若:前台要显示学生的use_id、use_name 、use_sex、 use_address、 sco_subject、 sco_score。

    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

    即建立一个show_score.cs


    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客代码


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    namespace Model
    {
    public class show_score
    {
    private int _use_id;
    public int use_id //字段user_id
    {
    get { return _use_id; }
    set { _use_id = value; }
    }
    private string _use_name;
    public string use_name //字段use_name
    {
    get { return _use_name; }
    set { _use_name = value; }
    }
    private string _use_sex;
    public string use_sex //字段use_sex
    {
    get { return _use_sex; }
    set { _use_sex = value; }
    }
    private string _use_address;
    public string use_address //字段use_address
    {
    get { return _use_address; }
    set { _use_address = value; }
    }
    private string _sco_subject;
    public string sco_subject //字段sco_subject
    {
    get { return _sco_subject; }
    set { _sco_subject = value; }
    }
    private int _sco_score;
    public int sco_score
    {
    get { return _sco_score; }
    set { _sco_score = value; }
    }
    }
    }

     

    5 建立一个公用的服务库类Service

    Service中建立DBHelper.cs和show_score_Service.cs

    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

    DBHelper.cs


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Data.SqlClient;//数据库连接的命名空间
    using System.Data;//DataSet的命名空间
    namespace Service
    {
    public class DBHelper
    {
    private static SqlConnection connection;//创建connection连接对象
    public static SqlConnection Conneciton
    {
    get//get 关键字在属性或索引器中定义访问器方法,以检索该属性或该索引器元素的值。
    {
    string temp_connectionstring = @"Data Source=.\SQLEXPRESS;AttachDbFilename=E:\Asp.net\Extjs、ASP.net前后台数据交互\Extjs、ASP.net前后台数据交互\App_Data\db_test.mdf;Integrated Security=True;User Instance=True";
    if (connection == null)
    {
    connection = new SqlConnection(temp_connectionstring);
    connection.Open();
    }
    //System.Data.ConnectionState描述与数据源的连接的当前状态。
    //Broken 与数据源的连接中断。只有在连接打开之后才可能发生这种情况。可以关闭处于这种状态的连接,然后重新打开。(该值是为此产品的未来版本保留的。)
    //Closed 连接处于关闭状态。
    //Connecting 连接对象正在与数据源连接。(该值是为此产品的未来版本保留的。)
    //Executing 连接对象正在执行命令。(该值是为此产品的未来版本保留的。)
    //Fetching 连接对象正在检索数据。(该值是为此产品的未来版本保留的。)
    //Open 连接处于打开状态。
    else if (connection.State == System.Data.ConnectionState.Closed)
    {
    connection.Open();
    }
    else if (connection.State == System.Data.ConnectionState.Broken)
    {
    connection.Close();
    connection.Open();
    }
    return connection;
    }
    }
    //ExecuteNonQuery,对连接执行 Transact-SQL 语句并返回受影响的行数。
    public static int ExecuteCommand(string temp_sql)
    {
    SqlCommand temp_cmd = new SqlCommand(temp_sql, Conneciton);
    int temp_result = temp_cmd.ExecuteNonQuery();
    return temp_result;
    }
    //执行查询,并返回查询所返回的结果集中第一行的第一列。忽略其他列或行。
    public static int GetScalar(string temp_sql)
    {
    SqlCommand temp_cmd = new SqlCommand(temp_sql, Conneciton);
    int temp_result = Convert.ToInt32(temp_cmd.ExecuteScalar());
    return temp_result;
    }
    //提供一种从 SQL Server 数据库读取行的只进流的方式。
    public static SqlDataReader GetReader(string temp_sql)
    {
    SqlCommand temp_cmd = new SqlCommand(temp_sql, Conneciton);
    SqlDataReader temp_reader = temp_cmd.ExecuteReader();
    return temp_reader;
    }
    //获取表的记录集
    public static DataTable GetDataSet(string temp_sql)
    {
    DataSet temp_ds = new DataSet();
    SqlCommand temp_cmd = new SqlCommand(temp_sql, Conneciton);
    SqlDataAdapter temp_da = new SqlDataAdapter(temp_cmd);
    temp_da.Fill(temp_ds);
    return temp_ds.Tables[0];
    }
    }
    }

     

    show_score_Service.cs


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Model;//添加完程序引用集后,添加命名空间
    using System.Data.SqlClient;
    namespace Service
    {
    public class show_score_Service
    {
    public List<show_score> GetAllUser()
    {
    string temp_str = "select A.use_id,use_name," +
    "use_sex,use_address,sco_subject,sco_score from tb_user A,tb_score B A.use_id=B.use_id";
    List<show_score> temp_list = new List<show_score>();
    temp_list = GetBySql(temp_str, null);
    if (temp_list.Count > 0) { return temp_list; }
    else { return null; }
    }
    private static List<show_score> GetBySql(string temp_sql, SqlParameter[] temp_values)
    {
    using (SqlDataReader temp_reader = DBHelper.GetReader(temp_sql))
    {
    List<show_score> temp_list = new List<show_score>();
    show_score temp_user = null;
    while (temp_reader.Read())
    {
    temp_user = new show_score();
    temp_user.use_id = int.Parse(temp_reader["use_id"].ToString());
    temp_user.use_name = temp_reader["use_name"].ToString();
    temp_user.use_sex = temp_reader["use_sex"].ToString();
    temp_user.use_address = temp_reader["use_address"].ToString();
    temp_user.sco_subject = temp_reader["sco_subject"].ToString();
    temp_user.sco_score = int.Parse(temp_reader["sco_score"].ToString());
    temp_list.Add(temp_user);
    }
    temp_reader.Close();
    return temp_list;
    }
    }
    }
    }

     

    6 建立show_grid.aspx,添加 服务库类Service和类模型Model 的引用和命名空间

     show_grid.aspx


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Show_grid.aspx.cs" Inherits="ExtJs_vs2008_ASP.net数据交互.Show_grid" %>

    show_grid.aspx.cs

     


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Model;//添加命名空间
    using Service;
    using System.Data.SqlClient;
    using System.Web.Script.Serialization;//Json序列化
    using System.Text;
    namespace ExtJs_vs2008_ASP.net数据交互
    {
    public partial class Show_grid : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    string temp_json = "";
    string temp_type = Request.QueryString["parm"].ToString();
    if(temp_type=="List")
    {
    temp_json = doList();
    Response.Write(temp_json);
    }
    }
    private string doList()
    {
    show_score_Service temp_ser = new show_score_Service();
    List<show_score> temp_list = temp_ser.GetAllUser();
    JavaScriptSerializer java = new JavaScriptSerializer();
    StringBuilder temp_sb = new StringBuilder();
    java.Serialize(temp_list, temp_sb);
    string temp_json = temp_sb.ToString();
    return temp_json;
    }
    }
    }

     

     

    7 需要引入的目录文件

    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

    a.需要分页,我习惯用PagingMemoryProxy.js(可从ExtJs文件夹内搜索得到)分页,引入解决方案中

    b.将ExtJs文件引入解决方案中

    c.编辑一个my_datagrid.js文件

     


    Ext.onReady(function() {
    store = new Ext.data.JsonStore({
    data: [],
    fields: [
    { name: 'use_id' },
    { name: 'use_name' },
    { name: 'use_sex' },
    { name: 'use_address' },
    { name: 'sco_subject' },
    { name: 'sco_score' }
    ]
    });
    Ext.Ajax.request({ //读取后台传递于前台数据
    url: 'Show_grid.aspx?parm=List',
    method: 'get',
    success: function(response, opts) {
    var obj = Ext.decode(response.responseText); //obj 储存响应的数据
    store.proxy = new Ext.data.PagingMemoryProxy(obj), //PagingMemoryProxy() 一次性读取数据
    store.load({ params: { start: 0, limit: 4} }); //按4 条记录分布
    },
    failure: function() { Ext.Msg.alert("failure"); }
    });
    var grid = new Ext.grid.GridPanel({
    frame: true,
    title:'学生各科成绩表',
    stripeRows: true, //斑马线
    store: store,
    id: 'grid',
    applyTo: 'grid',
    trackMouseOver: true,
    height: 300,
    500,
    loadMask: {msg:'正在加载数据,请稍侯……'},
    viewConfig: {
    forceFit: true
    },
    columns: [
    new Ext.grid.RowNumberer(), //行号
    {header: '<font size=2>用户帐户</font>', dataIndex: 'use_id', sortable: true },
    { header: '<font size=2>用户姓名</font>', dataIndex: 'use_name', sortable: true },
    { header: '<font size=2>用户性别</font>', dataIndex: 'use_sex', sortable: true },
    { header: '<font size=2>用户地址</font>', dataIndex: 'use_address', sortable: true },
    { header: '<font size=2>考试科目</font>', dataIndex: 'sco_subject', sortable: true },
    { header: '<font size=2>考试分数</font>', dataIndex: 'sco_score', sortable: true }
    ],
    bbar: new Ext.PagingToolbar({//分页
    pageSize:4,
    store: store,
    displayInfo: true, //非要为true,不然不会显示下面的分页按钮
    displayMsg: '<font size=2>第 {0} 条到 {1} 条,一共 {2} 条记录</font>',
    emptyMsg: "没有记录"
    })
    })
    })

     

     

     

    8 前台Default.aspx的编写


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Extjs_ASP.net前后台数据交互._Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <link rel="Stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css" />
    <script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ExtJs/ext-all.js"></script>
    <script src="PagingMemoryProxy.js" type="text/javascript"></script>
    <script src="my_datagrid.js" type="text/javascript"></script>
    <title>ExtJs与ASP.net前后台交互</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div id="grid"></div>
    </form>
    </body>
    </html>

     

     

    9 运行效果

    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

    ===========================================================================

    ===========================================================================

     Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

     

    10 总结

    a.构造出要显示的类模型

    b.添加引用、命名空间、库类

      学习上一些类使用的中文帮助:http://msdn.microsoft.com/zh-cn/library

      英文:http://msdn.microsoft.com/en-us/library

    c.List的泛型类

      表示可通过索引访问的对象的强类型列表。提供用于对列表进行搜索、排序和操作的方法。

      命名空间:System.Collections.Generic
      程序集:mscorlib(在 mscorlib.dll 中)

      [SerializableAttribute] public class List<T> : IList<T>, ICollection<T>, IEnumerable<T>, IList, ICollection, IEnumerable

    d.JavaScriptSerializer类

      JavaScriptSerializer 类由异步通信层内部使用,用于序列化和反序列化在浏览器和 Web 服务器之间传递的数据。您无法访问序列化程序的此实例。但是,此类公开了公共 API。因此,当您希望在托管代码中使用 JavaScript 对象符号 (JSON) 时可以使用此类。

     

    11 备注

      读者看后可能会觉得我写得复杂了一些,实际操作的话,可以化简很多。主要还是阐述了以下图的道理

                Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客

      主要代码2段片段: 

     

     

     


    Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客Extjs、ASP.net前后台Grid分页 数据库多表交互 - youzhangcai - 游仉才的博客代码


    using (SqlDataReader temp_reader = DBHelper.GetReader(temp_sql))
    {
    List<show_score> temp_list = new List<show_score>();
    show_score temp_user = null;
    while (temp_reader.Read())
    {
    temp_user = new show_score();
    temp_user.use_id = int.Parse(temp_reader["use_id"].ToString());
    temp_user.use_name = temp_reader["use_name"].ToString();
    temp_user.use_sex = temp_reader["use_sex"].ToString();
    temp_user.use_address = temp_reader["use_address"].ToString();
    temp_user.sco_subject = temp_reader["sco_subject"].ToString();
    temp_user.sco_score = int.Parse(temp_reader["sco_score"].ToString());
    temp_list.Add(temp_user);
    }
    temp_reader.Close();
    return temp_list;
    }

     


    JavaScriptSerializer java = new JavaScriptSerializer();
    StringBuilder temp_sb = new StringBuilder();
    java.Serialize(temp_list, temp_sb);
  • 相关阅读:
    Balance的数学思想构造辅助函数
    1663. Smallest String With A Given Numeric Value (M)
    1680. Concatenation of Consecutive Binary Numbers (M)
    1631. Path With Minimum Effort (M)
    1437. Check If All 1's Are at Least Length K Places Away (E)
    1329. Sort the Matrix Diagonally (M)
    1657. Determine if Two Strings Are Close (M)
    1673. Find the Most Competitive Subsequence (M)
    1641. Count Sorted Vowel Strings (M)
    1679. Max Number of K-Sum Pairs (M)
  • 原文地址:https://www.cnblogs.com/wangrsh2010/p/1899144.html
Copyright © 2011-2022 走看看