子父列表读取

本文介绍了一个使用ASP.NET Repeater控件显示动态数据的示例。通过C#后端代码,从一个字符串列表中加载数据,并利用Repeater控件进行多层次的数据展示。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication18.WebForm1" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <%#Eval("name") %>
                <asp:Repeater ID="Repeater2" runat="server" DataSource='<%# GetList(Eval("name").ToString()) %>'>
                    <ItemTemplate>
                        <%#Eval("nameList")%>
                    </ItemTemplate>
                </asp:Repeater>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication18
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List<string> list = new List<string>();
            list.Add("AA");

            Repeater1.DataSource = list.Select(x => new { name = x });
            Repeater1.DataBind();
        }

        public List<Test> GetList(string name)
        {
            List<Test> list = new List<Test> { new Test { Name = "AA", nameList = "A1" }, new Test { Name = "AA", nameList = "A2" }, new Test { Name = "BB", nameList = "B1" } };
            return list.Where(x => x.Name == name).ToList();
              
        }
    }

    public class Test
    {
        public string Name { get; set; }
        public string nameList { get; set; }
    }
}

### 实现组件读取组件的变量 #### Vue.js 在 Vue.js 中,由于组件实例的作用域是孤立的,无法直接访问组件中的数据。为了实现组件读取组件的变量,通常采用 `ref` 属性绑定组件实例的方式[^1]。 当需要获取组件内部状态时,可以在组件中通过 `this.$refs.<childRefName>` 访问组件实例及其公开的方法或属性。需要注意的是,这种方式仅适用于特定场景下的通信需求,而不应该频繁使用,因为这可能会破坏组件之间的独立性和可维护性。 以下是具体代码示例: ```javascript // 组件 Star.vue export default { data() { return { starCount: 5, }; }, }; // 组件 ParentComponent.vue <template> <div> <Star ref="starChild" /> <button @click="getStarCount">Get Star Count</button> </div> </template> <script> import Star from './Star.vue'; export default { components: { Star }, methods: { getStarCount() { console.log(this.$refs.starChild.starCount); // 输出组件的 starCount 值 }, }, }; </script> ``` #### React React 的设计原则强调单向数据流,即组件不应该直接修改组件的状态。然而,如果确实需要组件读取组件的某些值,则可以通过回调函数或者 Refs 来实现[^3]。 利用 React 提供的 `useRef` 或者类组件中的 `createRef` 方法,可以创建一个指向组件实例的引用。随后,组件便能通过此引用调用组件暴露出来的方法或属性。 下面是一个简单的例: ```jsx // 组件 Child.jsx class Child extends React.Component { state = { value: 'Initial Value', }; getValue = () => this.state.value; render() { return <p>{this.state.value}</p>; } } // 组件 Parent.jsx function Parent() { const childRef = useRef(); useEffect(() => { setTimeout(() => { console.log(childRef.current.getValue()); // 获取组件的值 }, 2000); }); return ( <> <Child ref={childRef} /> </> ); } ``` #### Angular Angular 支持组件间的双向绑定以及事件传递机制。若需让组件读取组件内的某个成员变量,可通过 `@ViewChild` 装饰器来完成这一操作[^2]。 借助于 `@ViewChild` 注解,可以让组件捕获到指定类型的第一个匹配组件,并进一步与其交互。 这里给出一段示范代码片段: ```typescript // 组件 child.component.ts @Component({ selector: 'app-child', }) export class ChildComponent { public message: string = 'Hello From Child'; } // 组件 parent.component.ts @Component({ template: `<ng-container></ng-container>`, }) export class ParentComponent implements AfterViewInit { @ViewChild(ChildComponent, { static: false }) child!: ChildComponent; ngAfterViewInit(): void { console.log(this.child.message); // 打印来自组件的消息 } } ``` --- ### 总结 不同框架提供了各自独特的解决方案用于解决跨层间的数据共享问题。Vue 使用 `$refs`;React 则依赖于 refs 及其生命周期特性;而 Angular 更倾向于装饰器模式配合 TypeScript 类型定义体系共同协作达成目标。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值