Use Dynamic Loading templates and Ajax to implement refreshing operations

Use Dynamic Loading templates and Ajax to implement refreshing operations

Keywords: DataGrid dynamic template Ajax

When we use ajax to implement a refreshing interface, the list such as DataGrid and repeater is still troublesome. After my attempt, I found a reasonable method, you can avoid processing HTML, get the HTML content of the data list at any time, and Use templates in the List format to make it easier to maintain and read.

The principle is to write the template to the user control, use loadtemplate to load it, And then assign it to the DataGrid, repeater, and other controls. After binding, the HTML is output to the client.

. Aspx. CS
[Ajaxpro. ajaxmethod]
Public String getlisthtml (string old)
{
Repeater RPT = new repeater ();
Itemplate temp = page. loadtemplate ("webusercontrol1.ascx ");
Rpt. itemtemplate = temp;
Rpt. datasource = albums. getfolderlist (1 );
Rpt. databind ();

System. Text. stringbuilder sb = new system. Text. stringbuilder ();
System. Io. stringwriter Sw = new system. Io. stringwriter (SB );
Htmltextwriter writer = new htmltextwriter (SW );
Rpt. rendercontrol (writer );
Sw. Flush ();
Writer. Close ();
Sw. Close ();

Response. Write (sb. tostring ());
}

Webusercontrol1.ascx <% @ Control Language = "C #" %>
<% # Databinder. eval (repeateritem) container). dataitem, "Foldername") %> <br/>

Above is all of the ListCodeThe JS end can quickly obtain the templated list by calling class name. getlisthtml.

Corresponding to the DataGrid, you can add templatecollumn and other methods to template

Webusercontrol1.ascx
Webusercontrol1.ascx <% @ Control Language = "C #" %>
<% # Databinder. eval (datagriditem) container). dataitem, "Foldername") %> <br/>

Some codes of. aspx. CS:

DataGrid datagrid1 = new DataGrid ();
Itemplate temp = page. loadtemplate ("webusercontrol1.ascx ");
Templatecolumn Tc = new templatecolumn ();
TC. headertext = "test ";
TC. itemtemplate = temp;
Datagrid1.columns. Add (TC );
Datagrid1.autogeneratecolumns = false;
Datagrid1.datasource = albums. getfolderlist (1 );

Datagrid1.datamember = "ID ";
Datagrid1.databind ();

Full text