經常會用到jquery.ui.tabs標簽，如我們可以把備份管理放在一個頁面上，而該頁面有兩個tab分別為備份和還原，但這樣會現在這個頁面臃腫，每次請求備份管理頁面時，服務端會把所以的備份還原信息都傳到客戶端，然后ui.tabs將兩種信息折疊起來分別顯示，好在ui.tabs給我提供ajax功能，我們的每個tab可以直接應用另外一個頁面
如：
Code
<div id="container">
<ul>
<li><a href="#fragment-1"><span>備份</span></a></li>
<li><a href="Restore.aspx"><span>還原</span></a></li>
</ul>
</div> 但這樣，當Restore.aspx存在服務端控件時，當他與服務端交互時，將不會很理想，比如GridView自帶排序，分頁就不可能實現，因為每一次交互他總是他只會顯示你第一次加載該tab的狀態（gridview它可能總是顯示的第一頁),有時甚至會充開整個頁面。
解決這個問題，首先想到時ajax以防止被引用的頁面全部重新加載。UpdatePanel我試了一下不行，如是便想到juery。
下面我將示范如何結合jquery實現GridView的異步排序，分頁。
首先我們還時在頁面放放一個gridview，他不會作為頁面中真正顯示的部分，而是作為輔助html輸出，當一個ajax請求來到時，我們利用這個GridView，Render為Html輸出，ajax的回調函數完成顯示。為了不顯示GridView我在PreRender中設置Visible = false，不能直接設置Visible=false否則他不會被Render成html
Code
<body onload="getPageData(1)">
<form id="form1" runat="server">
<div >
<div id='ShowData'>
<asp:GridView id="gvRestore" runat="server" Width="100%" PageSize="5" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowPaging="True" OnRowDataBound="gvRestore_RowDataBound" AllowSorting="True" Height="138px" OnDataBound="gvRestore_DataBound" OnPreRender="gvRestore_PreRender" ><Columns>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" Visible="False"></asp:BoundField>
<asp:BoundField DataField="WorkId" HeaderText="工號" SortExpression="WorkId"></asp:BoundField>
<asp:BoundField DataField="userName" HeaderText="操作人姓名" SortExpression="userName"></asp:BoundField>
<asp:BoundField DataField="operateType" HeaderText="操作類型" SortExpression="operateType"></asp:BoundField>
<asp:BoundField DataField="operateWay" HeaderText="操作方式" SortExpression="operateWay"></asp:BoundField>
<asp:BoundField DataField="operateTime" HeaderText="操作時間" SortExpression="operateTime"></asp:BoundField>
<asp:BoundField DataField="operatePath" HeaderText="保存路徑" SortExpression="operatePath"></asp:BoundField>
<asp:BoundField DataField="operateReason" HeaderText="操作原因" SortExpression="operateReason"></asp:BoundField>
<asp:TemplateField HeaderText="選擇">
<ItemTemplate>
<input id="Radio1" type="radio" name="Restore" value='<%#Eval("operatePath") %>'/><label for="Radio1">選擇</label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:SqlDataSource id="SqlDataSource1" runat="server" SelectCommand="SELECT * FROM [BackUpInfo] where operateType='備份'" ConnectionString="<%$ ConnectionStrings:BackUpConnectionString %>">
</asp:SqlDataSource>
</div>
</form>
</body>
注意，我們在Body的onload事件中指定了一個 函數，他會在頁面被加載時請求服務端，傳回數據。本身是個ajax請求
原形如下：
var getPageData=function(i)
{
$.ajax({
url:'Restore.aspx?'+new Date()+'&page='+i,//指定pageindex
type:'get',
success:function(data,textStatus)
{
$('#ShowData')[0].innerHTML=data;
},
error:function(XMLHttpRequest,textStatus)
{
//debugger;
$('#ShowData').text(XMLHttpRequest.responseText);
},
complete:function(XMLHttpRequest,textStatus)
{
}
});
}
接下來就是排序了，通過get方式指定排序字段，排序方向。函數如下：
var sortDataGridView=function(sortExpression,sortDirection)
{
event.returnVaule=false;//阻止提交服務器
$.ajax({
url:'Restore.aspx?'+new Date()+'&sortEx='+sortExpression+'&sortDir='+sortDirection,//IE從在緩存，因此加new Date（）防止緩存的影響
type:'get',
success:function(data,textStatus)
{
$('#ShowData')[0].innerHTML=data;
},
error:function(XMLHttpRequest,textStatus)
{
$('#ShowData').text(XMLHttpRequest.responseText);
},
complete:function(XMLHttpRequest,textStatus)
{
}
});
}
當點擊GridView中HeadText時我們要觸發 sortDataGridView實現異步排序，查看GridView的原始生成內容，實際上是個A標記<a href="javascript:__doPostBack('gvRestore','Sort$WorkId')">
我們要為該標記添加一個onclick事件，并移除href屬性值，以防止PostBack服務器。因此我在GridView的RowDataBound事件做如下處理：
Code
protected void gvRestore_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
for (int i = 1; i <= 7; i++)
{
LinkButton lt = (LinkButton)e.Row.Cells[i].Controls[0];
lt.Attributes["href"] = "#";
lt.OnClientClick = string.Format(" return sortDataGridView('{0}','{1}')", lt.CommandArgument, "ASC");
}
}
if (e.Row.RowType == DataControlRowType.Pager)
{
e.Row.Visible = false;
}
}
到這一步，思路基本上已經清晰，剩下的事，就是在服務端響應ajax請求了，很簡單，直接看代碼，要注意是調用GridView的RendControl方法，輸出html。
Code
static string sortDirection = "ASC";
protected void Page_Load(object sender, EventArgs e)
{
if (hasKeyName("page"))
{
if (!string.IsNullOrEmpty(Request.QueryString["page"].ToString()))
{
this.gvRestore.PageIndex = int.Parse(Request.QueryString["page"].ToString());
ResponseData(this.gvRestore);
}
}
else
if (hasKeyName("sortEx"))
{
string sortEx = Request.QueryString["sortEx"].ToString();
string sortDir = Request.QueryString["sortDir"].ToString();
if (string.Compare(sortDir, sortDirection, true) == 0)
{
this.gvRestore.Sort(sortEx, SortDirection.Ascending);
sortDirection = "DSAC";
}
else
{
this.gvRestore.Sort(sortEx, SortDirection.Descending);
sortDirection = "ASC";
}
ResponseData(this.gvRestore);
}
}
private bool hasKeyName(string key)
{
string[] keys = Request.QueryString.AllKeys;
foreach (string str in keys)
{
if (String.Compare(key, str, true) == 0)
return true;
}
return false;
}
private void ResponseData(GridView gv)
{
gv.DataSourceID = this.SqlDataSource1.ID;
System.Globalization.CultureInfo info = new System.Globalization.CultureInfo("ZH-CN", true);
System.IO.StringWriter sWriter = new System.IO.StringWriter(info);
System.Web.UI.HtmlTextWriter html = new HtmlTextWriter(sWriter);
gv.DataBind();
if (gv != null)
{
gv.RenderControl(html);
}
Response.Write(html.InnerWriter);
Response.Write(GetNav(gv.PageCount));
Response.Flush();
Response.End();
}
public string GetNav(int pagesize)
{
string NavStr = @"<table><tr>";
for (int i = 0; i < pagesize; i++)
{
NavStr = NavStr + @"<td><a href='#' onclick='getPageData(" + (i + 1).ToString() + ")'>" + (i + 1).ToString() + @" | " + @"</a></td>";
}
NavStr = NavStr + @"</tr></table>";
return NavStr;
}
public override void VerifyRenderingInServerForm(Control control)
{
//base.VerifyRenderingInServerForm(control);
}
protected void gvRestore_PreRender(object sender, EventArgs e)
{
this.gvRestore.Visible = false;
}
現在可以實現gridview的ajax排序和分頁 ，總結一下思路其實很簡單，但在實現的時還是走了點彎路，主要時原本想同通過code形式手工實例化一個GridView，但最終還是沒有實現，因為我添加了一個模板列。在模板列中添加一個intput type='Radio' 我在code時繼承ITemplate，但我確不知怎樣實現value='<%#Eval("operatePath") %>'的綁定，這里留下一個問題吧，誰知道，請告訴我。
<asp:TemplateField HeaderText="選擇">
<ItemTemplate>
<input id="Radio1" type="radio" name="Restore" value='<%#Eval("operatePath") %>'/><label for="Radio1">選擇</label>
</ItemTemplate>
</asp:TemplateField>
留言列表
