Every time the backup Management page is requested, the server will upload the backup restore information to the client, and then ui.tabs the two kinds of information to be displayed separately, but the ui.tabs provides me with Ajax function, each of our tabs can directly apply another page
Such as:
Copy Code code as follows:
<div id= "Container" >
<ul>
<li><a href= "#fragment-1" ><span> backup </span></a></li>
<li><a href= "restore.aspx" ><span> restore </span></a></li>
</ul>
</div>
But in this way, When Restore.aspx has a server-side control, it will not be ideal when interacting with the server, such as the GridView is sorted, and paging is not possible because each interaction he will always show you the first time you load the tab state (the GridView it may always show the first page And sometimes even open the entire page.
To solve this problem, first think of Ajax to prevent all the referenced pages from reloading. UpdatePanel I tried it, so I thought of juery.
I'll show you how to implement the asynchronous sort of GridView with jquery, paging.
First, we also put a GridView in the page, he will not be as the real part of the page, but as a secondary HTML output, when an AJAX request comes, we use this gridview,render for HTML output, Ajax callback function to complete the display. In order not to display the GridView I set Visible = False in PreRender and cannot set the Visible=false directly otherwise he will not be render into HTML
Code
Copy Code code as follows:
<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= "Work No." Sortexpression= "WorkID" ></asp:BoundField>
<asp:boundfield datafield= "UserName" headertext= "operator name" sortexpression= "UserName" ></asp:BoundField>
<asp:boundfield datafield= "Operatetype" headertext= "Operation type" sortexpression= "Operatetype" ></asp:BoundField >
<asp:boundfield datafield= "Operateway" headertext= "operation mode" sortexpression= "Operateway" ></asp:boundfield >
<asp:boundfield datafield= "Operatetime" headertext= "Operation Time" sortexpression= "Operatetime" ></asp:BoundField >
<asp:boundfield datafield= "Operatepath" headertext= "Save Path" sortexpression= "Operatepath" ></asp:BoundField >
<asp:boundfield datafield= "Operatereason" headertext= "Operation Reason" sortexpression= "Operatereason" ></asp: Boundfield>
<asp:templatefield headertext= "Choice" >
<ItemTemplate>
<input id= "Radio1" type= "Radio" name= "Restore" Value= ' <% #Eval ("Operatepath")%> '/><label for= ' Radio1 ' > Selection </label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:sqldatasource id= "SqlDataSource1" runat= "Server" selectcommand= "select * from [Backupinfo] where operatetype= ' Backup ' "connectionstring=" <%$ connectionstrings:backupconnectionstring%> ">
</asp:SqlDataSource>
</div>
</form>
</body>
Notice that we specify a function in the OnLoad event of the body that will request the server to return the data when the page is loaded. itself is an AJAX request
The prototype is as follows:
Code
Copy Code code as follows:
var getpagedata=function (i)
{
$.ajax ({
URL: ' restore.aspx? ' +new Date () + ' &page= ' +i,//specified pageindex
Type: ' Get ',
Success:function (Data,textstatus)
{
$ (' #ShowData ') [0].innerhtml=data;
},
Error:function (Xmlhttprequest,textstatus)
{
Debugger
$ (' #ShowData '). Text (Xmlhttprequest.responsetext);
},
Complete:function (Xmlhttprequest,textstatus)
{
}
});
The next step is to sort it by specifying the sort field by get way, sort direction. The functions are as follows:
Code
Copy Code code as follows:
var sortdatagridview=function (sortexpression,sortdirection)
{
event.returnvaule=false;//Block Submit Server
$.ajax ({
URL: ' restore.aspx? ' +new date () + ' &sortex= ' +sortexpression+ ' &sortdir= ' +sortdirection,//ie from cache, so add new Date () to prevent cache impact
Type: ' Get ',
Success:function (Data,textstatus)
{
$ (' #ShowData ') [0].innerhtml=data;
},
Error:function (Xmlhttprequest,textstatus)
{
$ (' #ShowData '). Text (Xmlhttprequest.responsetext);
},
Complete:function (Xmlhttprequest,textstatus)
{
}
});
}
When clicking on the Headtext in the GridView we will trigger Sortdatagridview to implement an asynchronous sort, viewing the original generated content of the GridView, which is actually a tag <a href= "Javascript:__dopostback" ( ' Gvrestore ', ' Sort$workid ') >
We want to add an onclick event to the tag and remove the href attribute value to prevent the postback server. So my RowDataBound event in the GridView is handled as follows:
Code
Copy Code code as follows:
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;
}
}
To this step, the idea is basically clear, the rest, is in the server response to the AJAX request, very simple, direct look at the code, to note that the GridView is called Rendcontrol method, output HTML.
Now you can implement the GridView Ajax sorting and paging, summed up the idea is actually very simple, but in the implementation of a little detour, the main time to be with the code form manually instantiate a GridView, but eventually did not implement, because I added a template column. Add a intput type= ' Radio ' to the template column I inherited itemplate in code, but I don't know how to implement Value= ' <% #Eval ("Operatepath")%> ' bindings, here's a question, who knows , please tell me.
Copy Code code as follows:
<asp:templatefield headertext= "Choice" >
<ItemTemplate>
<input id= "Radio1" type= "Radio" name= "Restore" Value= ' <% #Eval ("Operatepath")%> '/><label for= ' Radio1 ' > Selection </label>
</ItemTemplate>
</asp:TemplateField>
Code
Copy Code code as follows:
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 (GV) (Getnav. 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;
}
