• 利用动态加载模板,配合ajax实现无刷新操作


    关键字:DataGrid 动态模板 Ajax

    我们使用ajax实现无刷新界面时,对于DataGrid,Repeater等列表还是比较麻烦的,经过我的尝试,找出一种比较合理的方法,可以免除对html的加工处理,随时获取到数据列表的HTML content,并且列表格式使用模板,更加容易维护,阅读

    原理是将模板写入用户控件,使用LoadTemplate来加载,然后将其赋给DataGrid或Repeater等控件,绑定后输出HTML到客户端

    .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 />

    上面就是列表的全部代码, js端只需调用 类名.GetListHTML 即可快速获取模板化的列表了。

    对应DataGrid,可以增加TemplateCollumn等方法来模板化

    webusercontrol1.ascx
    webusercontrol1.ascx<%@ Control Language="C#" %>
    <%# DataBinder.Eval(((DataGridItem)Container).DataItem, "folderName")%><br />

    .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();

    全文完

  • 相关阅读:
    简单的理解原型链
    react->Context笔记
    工作上git指令小结
    vue 绑定事件如何传递参数的同时拿到事件对象
    vsCode卸载后重新安装,以前的插件有没有效果的解决方法
    mongo 分组 aggregation
    Redisson分布式锁原理
    Virtual server server already has a web module live-mix-1.0.2-t230 loaded at / therefore web module
    二进制中 1 的个数
    替换空格
  • 原文地址:https://www.cnblogs.com/jiangyuxuan/p/843493.html
Copyright © 2020-2023  润新知