1 建立ASP.net Web应用程序
2 在App_Data文件夹内建立数据库db_test
建立2张表，通过use_id的外键找出‘这个学生的成绩’
3 插入一些数据，数据可以自定义
4 解决方案右键，建立类库Model（此类库为数据库中的表抽象出一个类模型）
若：前台要显示学生的use_id、use_name 、use_sex、 use_address、 sco_subject、 sco_score。
即建立一个show_score.cs
代码
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
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);Response.End(); //如果没有这句话，html会一并返回，格式会不正确 } } 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 需要引入的目录文件
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 , width: 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 运行效果
===========================================================================
===========================================================================
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 备注
读者看后可能会觉得我写得复杂了一些，实际操作的话，可以化简很多。主要还是阐述了以下图的道理
主要代码2段片段：
代码
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);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
