您的位置:首页 > 编程语言 > ASP

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 保存 大量数据人多 服务器就崩溃,多用隐藏域 和 异步 完成对应操作
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: