asp.net 浅谈 异步无刷新的操作
2012-02-22 14:07
316 查看
//父窗体 <input id="btnSearchBale" type="button" class="button" value="查询" onclick="ChoiceBaleModel()" /> function ChoiceBaleModel() { var BaleName = $("#txtBaleName").val(); var CountryName = $("#txtCountryName").val(); var State = $("#ddlState").val(); var Territory = $("#ddlTerritory").val(); var AreaType = $("#ddlAreaType").val(); var BaleType = $("#<%=rblBaleType.ClientID %> :radio[checked]").val(); var returl = "xx.aspx?sBaleName=" + BaleName + "&sCountryName=" + CountryName + "&sState=" + State + "&sTerritory=" + Territory + "&sAreaType=" + AreaType + "&sBaleType=" + BaleType; editWidget2(returl, 800, 450); } function BindChildData(o, sid,typeId) { $.ajax({ cache: false, --是否缓存 url: '页面.aspx', --页面路径 type: "POST", --post 请求 data: "idlist=" + o + "&typeId=" + typeId, -- 路径url 传值 success: function(d) { -- 成功时 if (sid != "") { $('#hfBaleId').val(sid); --隐藏域获取 } $('#tbVisa').empty(); -- 表格清空 $('#tbVisa').append(d); --表格追加 }, error: function() { --失败时 // alert('添加失败!'); } }); }
//子窗体 <asp:Repeater ID="rptData" runat="server" OnItemCommand="rptData_ItemCommand"> <HeaderTemplate> <table class="TABLE1" cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;"> <tr> <th> 名称 </th> <th> 类型 </th> <th> 分类 </th> <th> xx </th> <th> xx </th> <th> 操作 </th> </tr> </HeaderTemplate> <ItemTemplate> <tr style='background-color: <%#(Container.ItemIndex%2==0)?" ":"#F3F3F3"%>'> <td> <%#Eval("Name")%> </td> <td> <%#GetType(Eval("Type1"))%> </td> <td> <%#GetType(Eval("Type1"))%> </td> <td> <%#Eval("CName")%> </td> <td> <%#GetTerritory(Eval("territory"))%> </td> <td align='right'> <input type="button" class="button" id="btnEdit" value="添加" /> <div class="param1" style="display:none"><%#Eval("Idlist")%></div> <div class="param2" style="display:none"><%#Eval("BaleId")%></div> </td> <asp:HiddenField ID="hfBaleId" runat="server" Value='<%#Eval("Idlist")%>' /> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> <webdiyer:AspNetPager ID="pager" runat="server" Direction="LeftToRight" FirstPageText="第一页" PageSize="5" HorizontalAlign="left" LastPageText="最后一页" NextPageText="下一页" PrevPageText="上一页" Width="100%" CenterCurrentPageButton="True" CustomInfoHTML="当前页码为 %CurrentPageIndex% 总页数 %PageCount% 共 %RecordCount% 条记录" CustomInfoTextAlign="Left" NumericButtonCount="8" PageIndexBoxType="DropDownList" ShowCustomInfoSection="Right" AlwaysShow="True" OnPageChanged="pager_PageChanged"> </webdiyer:AspNetPager> <script type="text/javascript"> $(function() { $('table.TABLE1 td input').click(function() { var o = $(this); var idList = o.siblings('div.param1').html(); var sid = o.siblings('div.param2').html(); //弹出页面 parent.BindChildData(idList, sid,0); //0是传个 空的类型 ,编号组合 和编号(主要是把子窗体的值 传给父窗体) parent.BindChildDataType(idList, sid); //用parent 调用 父窗体的 BindChildDataType 前端方法 parent.closeEditor(); //关闭层 }); }); </script>
ajax 输出页面
随便创建个页面
前端
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Out009.aspx.cs" Inherits="page1" %>
后台代码:
protected void Page_Load(object sender, EventArgs e) {//数据库交互代码写在这 string queryData = Request["idlist"]; //请求 前端这个 data: "idlist=" + o + "&typeId=" + typeId, -- 路径url 传值 int typeId = int.Parse(Request["typeId"].ToString()); string initTr = "<tr><th>表头1</th><th>表头2</th></tr>"; // string trList = initTr+@"<tr><td>名称</td><td>测试内容</td><td align='right'></td></tr>"; string trList = initTr; Response.Write(trList); //输出一些 <tr><td>标签放在 表格对应位置 达到 无刷新效果 }
success: function(d) { -- 成功时 if (sid != "") { $('#hfBaleId').val(sid); --隐藏域获取 } $('#tbVisa').empty(); -- 表格清空 $('#tbVisa').append(d); --表格追加 },
$('#tb1').append(d); 这个是表格编号 ta1 的 把 这节参数
<tr><td>标签异步添加到 tb1 表格中
总结:做电子商务网站不要 采用 session 保存 大量数据人多 服务器就崩溃,多用隐藏域 和 异步 完成对应操作
相关文章推荐
- Asp.net 更改Alert样式和后台注册Jquery的Ajax异步提交事件[包括处理前操作、处理后操作(注明:此方法只是作为参考,如有需要可自行修改)]
- ASP.NET Ajax发布时异步刷新失效的问题解决方法
- asp.net jquery+ajax异步刷新1
- asp.net控件的异步刷新
- ASP.NET MVC异步获取和刷新ExtJS6 TreeStore
- asp.net ajax 异步操作
- 【转载】返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作
- Asp.net防止刷新重提交数据库操作
- ASP.NET中使用UpdatePanel局部异步刷新方法
- 【ASP.NET 控件浅谈】 之 TreeView 操作(带多选操作)
- asp.net 全部选中与取消操作,选中后的删除(ajax)实现无刷新效果
- ASP.NET 2.0的异步页面刷新真给劲
- ASP.NET的各种异步操作实现详细解析
- ASP.NET MVC如何在页面加载完成后ajax异步刷新
- asp.NET UpdatePanel实现异步局部刷新
- ASP.NET中使用UpdatePanel实现局部异步刷新方法和攻略
- 细说ASP.NET的各种异步操作(转自fishli)
- 【转】细说ASP.NET的各种异步操作
- 细说ASP.NET的各种异步操作
- 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作