今天在论坛中有人问ext和asp.net是如何进行交互的,对于一个刚入门的新手来说,这个问题可能会使其比较迷惑,下面我写一个非常简单的例子来说明一下ext如何与asp.net来进行数据交互
Default.htm:
-
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<htmlxmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>UntitledPage</title>
-
<linkrel="stylesheet"type="text/css"href="ext/resources/css/ext-all.css"/>
-
<scripttype="text/javascript"src="ext/adapter/ext/ext-base.js"></script>
-
<scripttype="text/javascript"src="ext/ext-all.js"></script>
-
</head>
-
<body>
-
<divid="listContainer"></div>
-
<scripttype="text/javascript">
-
varstore=newExt.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('Loaddataerror!',response.responseText);
- }
- }
- });
-
- Ext.onReady(function(){
- Ext.QuickTips.init();
- store.load();
- });
-
-
varlistContainer=Ext.get("listContainer");
-
vargrid=newExt.grid.GridPanel({
- el:'listContainer',
- width:listContainer.getComputedWidth(),
- autoHeight:true,
- store:store,
- disableSelection:false,
- loadMask:true,
- deferRowRender:false,
- sm:newExt.grid.RowSelectionModel({singleSelect:true}),
- columns:[
- {
- header:'name',
- dataIndex:'TestName',
- sortable:true
- },{
- header:'value',
- dataIndex:'TestValue',
- sortable:true
- }]
- });
-
-
window.onresize=function(){
- grid.setWidth(listContainer.getComputedWidth());
- };
- functionButton1_onclick(){
- //这里简单的来访问一下store中的数据
- alert(store.data.items[0].data.TestName);
- alert(store.data.items[0].data.TestValue);
- }
-
-
</script>
-
<inputid="Button1"type="button"value="display"onclick="returnButton1_onclick()"/>
-
</body>
-
</html>
-
DefaultHandler.ashx:
-
<%@WebHandlerLanguage="C#"Class="DefaultHandler"%>
-
-
usingSystem;
-
usingSystem.Web;
-
usingSystem.Data;
-
-
publicclassDefaultHandler:IHttpHandler{
-
publicvoidProcessRequest(HttpContextcontext){
-
stringstr=context.Request.QueryString["method"];
-
if(string.IsNullOrEmpty(str))
- {
-
context.Response.Write("error!");
-
return;
- }
-
-
switch(str)
- {
-
case"getlist":
- GetList(context);
-
break;
-
- }
- context.Response.End();
- }
-
-
publicboolIsReusable{
-
get{
-
returnfalse;
- }
- }
-
-
publicvoidGetList(HttpContextcontext)
- {
-
-
DataTabledt=newDataTable();
-
dt.Columns.Add("TestName",typeof(string));
-
dt.Columns.Add("TestValue",typeof(string));
-
for(inti=0;i<6;i++)
- {
- DataRowdr=dt.NewRow();
-
dr["TestName"]="TestName"+i.ToString();
-
dr["TestValue"]="TestValue"+i.ToString();
- dt.Rows.Add(dr);
- }
-
-
-
System.Text.StringBuildersb=newSystem.Text.StringBuilder();
-
sb.Append("{items:[");
-
foreach(DataRowdrindt.Rows)
- {
-
sb.Append("{");
-
sb.AppendFormat("TestName:'{0}',TestValue:'{1}'",dr[0],dr[1]);
-
sb.Append("},");
- }
-
-
context.Response.Write(sb.ToString().Trim(',')+"]}");
- }
- }
-
例子完了.很容易吧.在实际的开发中往往会把页面中的javascript脚本单独写到一个js文件中.这样会有很多的好处.
本示例中我用ashx(HttpHandler)文件来处理客户端请求,你也可以用aspx,web services等等.
分享到：
相关推荐
在这个示例中，`handler.ashx`可能被用来处理分页数据请求，从数据库中获取指定页码的数据，然后返回JSON格式的结果。 其次，`$.ajax()`是jQuery库中的一个核心函数，用于执行异步HTTP（Ajax）请求。它允许开发者在...
为了与`getJSON`配合使用，我们需要创建一个处理程序来响应GET请求并返回JSON数据。以下是一个简单的C# `.ashx.cs`代码示例： ```csharp using System; using System.Web; using System.IO; using System.Text; ...
在分页实现中，我们可以创建一个ASHX处理器，接收来自客户端的请求参数，如当前页数和每页数量，然后从数据库或其他数据源中检索对应的数据，最后将这些数据转换成JSON格式响应给客户端。 下面是如何使用JQuery、...
本示例代码着重展示了如何使用ASHX来处理GET和POST请求，这在构建RESTful API或实现异步数据通信时非常常见。 首先，让我们了解GET和POST请求的基本概念。GET请求通常用于获取资源，是幂等的，意味着多次发送相同的...
在本项目中，开发者可能创建了一个名为`List.ashx`的HTTPHandler，该处理器接收AJAX请求，处理数据（例如从数据库查询），然后以JSON格式返回结果。在C#代码中，这个处理程序可能如下所示： ```csharp public class ...
`$.getJSON`是jQuery提供的一个异步函数，它向服务器发送GET请求，接收返回的JSON数据，并将其转换为JavaScript对象，无需手动进行JSON.parse操作。 ASHX（HTTP Handler）是ASP.NET中的一种轻量级的处理程序，它...
2. 服务器端：ASHX处理程序接收请求，根据传入的参数（如页码和每页大小）查询数据库，获取对应的数据，然后将数据转化为JSON格式返回给客户端。 五、代码注释 源码中应该包含了详细的注释，帮助理解每个部分的功能...
而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛应用于Web服务与客户端之间的数据传输。在C#中，可以使用Newtonsoft.Json库（通常称为Json.NET）来序列化和反序列化JSON数据。发送JSON数据的...
2. **使用AJAX发起POST请求**：使用jQuery的`$.ajax`或`$.post`函数，指定URL（通常是ASHX处理程序的地址），数据类型为'json'，并传递JSON数据。示例代码： ```javascript $.ajax({ type: 'POST', url: '...
- **返回响应**：服务器会返回一个JSON或其他格式的响应，告知客户端图片上传的结果，如文件的唯一URL，以便在编辑器中显示。 6. **前端与后端交互**： 前端的KindEditor与后端的JSP通过HTTP或HTTPS协议通信，...
服务器端的ASHX处理程序接收请求，查询数据库（如SQL Server）获取相关数据，然后将这些数据转换为JSON格式并返回给客户端。最后，客户端接收到JSON数据后，解析并填充到相应的下拉列表中，完成三级联动的效果。 ...
在客户端JavaScript中，接收到JSON响应后，可以使用诸如jQuery的`$.parseJSON()`或者原生的`JSON.parse()`函数将其转换回JavaScript对象，然后动态更新HTML元素，实现异步刷新效果。 总的来说，这个例子展示了如何...
它可能负责接收来自前端的文件上传请求，处理上传过程中的合法性检查、文件存储、返回上传结果等。利用JSON返回数据，使得前端可以获取到关于文件上传状态的反馈，例如成功与否、文件URL等。 `demo.aspx`是ASP.NET...
ASHX处理程序根据ID执行删除操作，然后返回一个确认消息。 2. **修改**：用户编辑记录并提交，Ajax请求携带修改后的数据发送到服务器。ASHX处理这些数据，更新数据库，然后返回更新结果。 3. **查看**：用户点击查看...
jQuery的getJSON方法是一个异步函数，用于从指定URL获取JSON数据，并在成功时执行回调函数。在这个例子中，它调用了"AjaxHandler.ashx"这个服务端处理程序，然后在回调函数中解析返回的JSON数据。$.each方法用于遍历...
在C#中，我们通过创建一个继承自`System.Web.IHttpHandler`接口的类来定义我们的ASHX处理器。这个类通常包含两个方法：`IsReusable`和`ProcessRequest`。`IsReusable`用于判断处理器实例是否可重用，而`...
Ajax异步请求是一种基于JavaScript和XMLHttpRequest对象的技术，允许Web应用程序在不刷新整个页面的情况下，更新页面的一部分内容。它可以实现异步通信，提高用户体验和页面加载速度。 在Ajax异步请求中，...
在这种情况下，服务器端的ASHX处理器接收到来自Ajax的请求，执行搜索逻辑，并返回JSON格式的数据。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。...
这可以是一个JSON对象，包含上传状态、文件名等信息，供前端展示。 6. **配置Web.config**：在`Web.config`中，注册你的ASHX处理程序，使其可以在Web应用中被正确地调用。添加一个`<httpHandlers>`或`<handlers>`...
这段代码向`MyAshxHandler.ashx`发送一个GET请求，并将接收到的JSON数据打印到控制台。 **总结** 在VS2010中，使用Ajax和Ashx可以实现高效的异步页面交互。Ashx处理程序提供了灵活的数据处理方式，适用于Ajax请求...