济宁城乡建设局网站,做外贸网站费用,重庆做网站那里好,枣庄建设路小学网站【Blazor】| 总结/Edison Zhou大家好#xff0c;我是Edison。前几天没有发布本篇就发布了第五篇#xff0c;属于操作失误哈#xff0c;这次把第四篇补上#xff01;本篇#xff0c;我们来了解下在Blazor中数据是如何共享的#xff0c;组件之间又该如何传递参数。关于Blaz…【Blazor】| 总结/Edison Zhou大家好我是Edison。前几天没有发布本篇就发布了第五篇属于操作失误哈这次把第四篇补上本篇我们来了解下在Blazor中数据是如何共享的组件之间又该如何传递参数。关于Blazor组件在 Blazor 中从名为“组件”的自包含代码部分生成 UI。每个组件都可以包含 HTML 和 C# 代码的混合。组件是通过使用 Razor 语法编写的其中的代码是用 code 指令标记的。其他指令可用于访问变量、绑定到值以及实现其他呈现任务。编译应用时HTML 和代码将编译为组件类。组件一般被编写为扩展名为 .razor 的文件。关于数据共享Blazor 包含多种在组件之间共享信息的方法。1可使用组件参数或级联参数将值从父组件发送到子组件。2AppState 模式是另一种可用于存储值并从应用程序中的任何组件访问这些值的方法。使用组件参数共享在父组件和子组件的此层次结构中可以使用组件参数在它们之间共享信息。在子组件上定义这些参数然后在父组件中设置其值。例如在Counter组件中定义了一个IncrementAmount的组件参数page /counterPageTitleCounter/PageTitleh1Counter/h1p rolestatusCurrent count: currentCount/pbutton classbtn btn-primary onclickIncrementCountClick me/buttoncode {private int currentCount 0;[Parameter]public int IncrementAmount { get; set; } 1;private void IncrementCount(){currentCount IncrementAmount;}
}在调用端只需要下面这样既可由于Counter组件中还设置了默认值为1因此如果调用端不传递则默认为1。Counter IncrementAmount10 /此外还可以使用自定义类用作组件参数例如using EDT.BlazorServer.App.ModelspNew Topping: Topping.Name/p
pIngredients: Topping.Ingredients/pcode {[Parameter]public PizzaTopping Topping { get; set; }
}PizzaTopping的定义如下public class PizzaTopping
{public string Name { get; set; }public string Ingredients { get; set; }
}调用方的定义如下page /pizzas-toppingsh1Our Latest Pizzas and Topping/h1PizzaTopping Topping(new PizzaTopping() { Name Chilli Sauce, Ingredients Three kinds of chilli. }) /使用级联参数共享当具有包含子组件的子组件的较深层次结构时事情便会变得难以应付。组件参数不会从上级组件或沿着层次结构向下自动传递到下级组件。为了完美处理此问题Blazor 包含了级联参数。在组件中设置级联参数的值时其值将自动提供给所有子组件。在父组件中使用 标记指定将级联到所有子组件的信息。此标记作为内置的 Blazor 组件实现。在该标记内呈现的任何组件都将能够访问该值。例如我们有三个组件其中CascComp2组件被嵌套在CascComp1组件中而CascComp1组件又被嵌套在CascCompSamle组件中。他们的调用关系如下使用CascadingParameter级联传递参数NickName1CascCompSample.razor!--this is CascCompSample.razor--page /cascparamsampleh3This is the sample page/h3CascadingValue ValueNickNameCascComp1/CascComp1
/CascadingValuecode
{private string NickName Edison Zhou;
}2CascComp1.razor!--this is CascComp1.razor--h3Comp1: NickName/h3CascComp2/CascComp2code {[CascadingParameter]public string NickName { get; set; }
}3CascComp2.razor!--this is CascComp2.razor--h3Comp2: NickName/h3code {[CascadingParameter]public string NickName { get; set; }
}要点1首先在CascCompSample.razor页面我们通过把CascComp1嵌套到CascadingValue里面来传递参数。2其次在CascComp1和 CascComp2不再需要显式传递参数只需要声明CascadingParameter即可拿到值。效果如果需要级联传递多个参数可以使用CascadingValue的嵌套这里我们修改一下CascCompSample.razor组件让它可以共享两个参数!--this is CascCompSample.razor--page /cascparamsampleh3This is the sample page/h3CascadingValue ValuecurrentNickName NameNickNameCascadingValue ValuecurrentAge NameAgeCascComp1/CascComp1/CascadingValue
/CascadingValuecode
{private string currentNickName Edison Zhou;private int currentAge 34;
}修改CascComp1.razor增加一个CascadingParameter属性Age!--this is CascComp1.razor--h3Comp1: NickName - Age/h3CascComp2/CascComp2code {[CascadingParameter(NameNickName)]public string NickName { get; set; }[CascadingParameter(NameAge)]public int Age { get; set; }
}CascComp2.razor修改同上不再赘述。这里需要注意的是级联值由父级中的 Name 属性标识与 [CascadingParameter] 属性中的 Name 值匹配。对于只有一个该类型的参数而言在子组件中CascadingParameter特性中无需指定Name。但对于如果有多个相同类型的级联参数而言最好加上Name名称进行指定以避免找不到。因此这里也推荐在CascadingValue中指定Name然后再CascadingParameter特性中指定Name。最终效果使用AppState模式共享在不同组件之间共享信息的另一种方法是使用 AppState 模式。即创建一个定义要存储的属性的类并将其注册为作用域服务。在要设置或使用 AppState 值的任何组件中注入该服务然后可以访问其属性。不同于组件参数和级联参数AppState 中的值可用于应用程序中的所有组件即使这些组件不是存储该值的组件的子组件也是如此。例如创建一个包含销售状态的类public class PizzaSalesState
{public int PizzasSoldToday { get; set; }
}然后将该类注入到DI容器中builder.Services.AddScopedPizzaSalesState();最后在任意组件中通过依赖注入来访问该属性page /
using EDT.BlazorServer.App.Models
inject PizzaSalesState salesState;PageTitleIndex/PageTitleh1Hello, world!/h1Welcome to your new app.SurveyPrompt TitleYour Pizza Shop /*Counter IncrementAmount10 /*
pToday, weve sold this many pizzas: salesState.PizzasSoldToday/p
button onclickIncrementSalesBuy a Pizza/buttoncode {private void IncrementSales(){salesState.PizzasSoldToday;}
}在本例中由于我们已将计数器的值存储在 AppState 范围内服务中因此计数会在页面加载期间一直存在并且对其他用户可见。最终效果小结本篇我们了解了数据如何在Blazor中共享。下一篇我们学习一下在Blazor中数据绑定的各种花样。参考资料Microsoft Docs《在Blazor应用程序中共享数据》65号腕《Blazor中的参数和级联参数》年终总结Edison的2021年终总结数字化转型我在传统企业做数字化转型C#刷题C#刷剑指Offer算法题系列文章目录.NET面试.NET开发面试知识体系.NET大会2020年中国.NET开发者大会PDF资料
