今天在论坛中有人问ext和asp.net是如何进行交互的,对于一个刚入门的新手来说,这个问题可能会使其比较迷惑,下面我写一个非常简单的例子来说明一下ext如何与asp.net来进行数据交互
Default.htm:
- <!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>
- <title>Untitled Page</title>
- <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
- <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="ext/ext-all.js"></script>
- </head>
- <body>
- <div id="listContainer"></div>
- <script type="text/javascript">
- var store = new Ext.data.JsonStore({
- url: 'DefaultHandler.ashx?method=getlist',
- root: 'items',
- remoteSort: true,
- fields: [
- 'TestName',
- 'TestValue'
- ],
- listeners:{
- load: function(store, records, options){
- grid.render();
- },
- loadexception: function(proxy, options, response){
- Ext.Msg.alert('Load data error!', response.responseText);
- }
- }
- });
- Ext.onReady(function(){
- Ext.QuickTips.init();
- store.load();
- });
- var listContainer=Ext.get("listContainer");
- var grid = new Ext.grid.GridPanel({
- el: 'listContainer',
- width:listContainer.getComputedWidth(),
- autoHeight: true,
- store: store,
- disableSelection: false,
- loadMask: true,
- deferRowRender: false,
- sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
- columns:[
- {
- header: 'name',
- dataIndex: 'TestName',
- sortable: true
- },{
- header: 'value',
- dataIndex: 'TestValue',
- sortable: true
- }]
- });
- window.onresize=function(){
- grid.setWidth(listContainer.getComputedWidth());
- };
- function Button1_onclick() {
- //这里简单的来访问一下store中的数据
- alert(store.data.items[0].data.TestName);
- alert(store.data.items[0].data.TestValue);
- }
- </script>
- <input id="Button1" type="button" value="display" onclick="return Button1_onclick()" />
- </body>
- </html>
DefaultHandler.ashx:
- <%@ WebHandler Language="C#" Class="DefaultHandler" %>
- using System;
- using System.Web;
- using System.Data;
- public class DefaultHandler : IHttpHandler {
- public void ProcessRequest (HttpContext context) {
- string str = context.Request.QueryString["method"];
- if (string.IsNullOrEmpty(str))
- {
- context.Response.Write("error!");
- return;
- }
- switch (str)
- {
- case "getlist":
- GetList(context);
- break;
- //下边还有可以接着写.
- }
- context.Response.End();
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- public void GetList(HttpContext context)
- {
- //这里模拟一个DataTable,实际应用中可能是去数据库里查询数据
- DataTable dt = new DataTable();
- dt.Columns.Add("TestName", typeof(string));
- dt.Columns.Add("TestValue", typeof(string));
- for (int i = 0; i < 6; i++)
- {
- DataRow dr = dt.NewRow();
- dr["TestName"] = "TestName" + i.ToString();
- dr["TestValue"] = "TestValue" + i.ToString();
- dt.Rows.Add(dr);
- }
- //将一个DataTable中的数据转成json,实际开发中可以用Newtonsoft.Json等
- //组件将集合类等,方便的转成json对象
- System.Text.StringBuilder sb = new System.Text.StringBuilder();
- sb.Append("{items: [");
- foreach (DataRow dr in dt.Rows)
- {
- sb.Append("{");
- sb.AppendFormat("TestName:'{0}',TestValue:'{1}'", dr[0], dr[1]);
- sb.Append("},");
- }
- //输出拼成的json
- context.Response.Write(sb.ToString().Trim(',') + "]}");
- }
- }
例子完了.很容易吧.在实际的开发中往往会把页面中的javascript脚本单独写到一个js文件中.这样会有很多的好处.
本示例中我用ashx(HttpHandler)文件来处理客户端请求,你也可以用aspx,web services等等.
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow