外围买球365-外围买球365app

外围买球365-外围买球365app

元素波蓝色英雄

Blazor的Telerik UI

开发Blazor应用程序只需使用高性能的网格和
90+真正本地的、易于定制的UI组件,以满足任何需求.

*包括在线技术培训,以加快您的入职速度.

trust-radius-badge

Telerik获得多个TrustRadius的2021年最佳开发奖

Telerik赢得了 最好的特性集最好的客户支持.

trust-radius-badge

Telerik UI赢得TrustRadius的2021年最高评级奖

外围买球365 Telerik UI赢得了TrustRadius的最高评级奖 软件组件 .网络的发展.

ninja-peeking
@using系统.Component模型.DataAnnotations
@using Telerik.数据源
 
<Telerik网格 Data=@网格Data
             高度="450px"
             宽度="100%"
             编辑模式="@网格编辑模式.内联"
             可分页="真正的"
             页大小="10"
             可调整大小的="真正的"
             Reorderable="真正的"
             FilterMode="@网格FilterMode.FilterMenu"
             SelectionMode="@网格SelectionMode.多个"
             Groupable="真正的"
             可分类的="真正的"
             SortMode="@SortMode.多个"
             OnCreate="@CreateH和ler"
             On删除="@删除H和ler"
             OnUpdate="@UpdateH和ler"
             OnStateInit="@((网格StateEventArgs<产品O> arg游戏) => OnStateInit(arg游戏))">
    <网格工具栏>
        <网格Comm和Button Comm和="添加" 图标="添加">添加产品网格Comm和Button>
        <网格Comm和Button Comm和="ExcelExport" 图标="file-excel">导出到Excel网格Comm和Button>
    网格工具栏>
    <网格Export>
        <网格ExcelExport 文件名="telerik-grid-export" 所有Pages="真正的" />
    网格Export>
    <网格列s>
        <网格Checkbox列 宽度="80px" 复选框OnlySelection="真正的" Select所有Mode="@网格Select所有Mode.所有">网格Checkbox列>
        <网格列 =@nameof (产品O.产品的名字) 宽度="220px" Title="产品名称" />
        <网格列 =@nameof (产品O.成本) Title="价格" 宽度="100px" Display格式="{0:C2}" 文本对齐="@列文本对齐.正确的" />
        <网格列 =@nameof (产品O.可用) Title="现在有货" 宽度="100px" 文本对齐="@列文本对齐.Center">
            <Template>
                @{
                    if (context as 产品O) = (context = 产品O).可用;

                    如果(isInStock)
                    {
                        <span class="K-badge -md, K-badge -solid, K-badge -success, K-badge -rounded">可用span>
                    }
                    其他的
                    {
                        <span class="K-badge K-badge -md K-badge -solid K-badge -error K-badge -rounded">不可用span>
                    }
                }
            Template>
        网格列>
        <网格列 =@nameof (产品O.类别的名字) Title="类别" 宽度="150px" FilterMenu类型="@FilterMenu类型.复选框列表">网格列>
        <网格Comm和列 宽度="110px" 锁着的="真正的" 可调整大小的="">
            <网格Comm和Button Comm和="编辑" 图标="编辑">编辑网格Comm和Button>
            <网格Comm和Button Comm和="删除" 图标="删除">删除网格Comm和Button>
            <网格Comm和Button Comm和="保存" 图标="保存" ShowIn编辑="真正的">保存网格Comm和Button>
            <网格Comm和Button Comm和="取消" 图标="取消" ShowIn编辑="真正的">取消网格Comm和Button>
        网格Comm和列>
    网格列s>
Telerik网格>

@code {
    公共列表<产品O> 网格Data { get; set; }
    公共列表<产品O> SourceData { get; set; }
    公共列表<产品O> 类别 { get; set; }
    int lasttid = 0;

    任务OnInitializedAsync()
    {
        InitSourceData ();

        LoadData ();

        返回基地.OnInitializedAsync ();
    }

    private void CreateH和ler(网格Comm和EventArgs arg游戏)
    {
        CreateItem (arg游戏 (产品O).项);

        LoadData ();
    }


    private void CreateItem(产品O item)
    {
        产品O 产品 = item;

        产品.产品Id = + + lastId;
        SourceData.插入(0、产品);
    }

    private void 删除H和ler(网格Comm和EventArgs)
    {
        删除Item (arg游戏 (产品O).项);
        
        LoadData ();
    }

    private void 删除Item(产品O item)
    {
        SourceData.删除(项);
    }

    private void UpdateH和ler(网格Comm和EventArgs arg游戏)
    {
        UpdateItem (arg游戏 (产品O).项);

        LoadData ();
    }

    private void UpdateItem(产品O item)
    {
        var 现有的 = SourceData.FirstOr默认的(p => p.产品Id = =项目.产品Id);

        如果现有的 != null)
        {
            现有的.产品的名字 =项目.产品的名字;
            现有的.成本=项目.成本;
            现有的.类别的名字 =项目.类别的名字;
            现有的.数量=项目.量;
            现有的.可用=项目.可用;
        }
    }

    私人空间OnStateInit (网格StateEventArgs<产品O> arg游戏)
    {
        arg游戏.网格State.GroupDescriptors = new 列表<GroupDescriptor>()
        {
            新的GroupDescriptor ()
            {
                成员= nameof (产品O.类别的名字)
            }
        };
    }

    公开课产品O
    {
        公共int 产品Id { get; set; }
        public string 产品的名字 { get; set; }
        公共int 被标记 { get; set; }
        public 类别的名字 类别的名字 { get; set; }

        public decimal Cost { get; set; }
        public string Quantity { get; set; }
        public bool 可用 { get; set; }

        公共产品O ()
        {
            可用= 真正的;
        }
    }

    公共enum 类别的名字
    {
        饮料,
        调味品,
        糖果,
        [显示(名称=“乳制品”)]
        Dairy产品s,
        (显示(的名字 = "谷物/谷物"))
        谷物,
        (显示(的名字 = "肉类/家禽"))
        肉,
        海鲜
    }

    公共空间LoadData ()
    {
        网格Data =新列表<产品O>(SourceData);
    }

    公共空间InitSourceData ()
    {       
        列表<产品O> data = new 列表<产品O>();
        
        data.添加(new 产品O() {产品Id = 1, 产品的名字 = "柴", 被标记 = 1, 类别的名字 = 类别的名字.饮料,成本= 18m,数量=“10盒x 20袋”});
        data.添加(new 产品O() {产品Id = 2, 产品的名字 = "张", 被标记 = 1, 类别的名字 = 类别的名字.饮料,成本= 19m,数量=“24 - 12盎司瓶”,可用=假});
        data.添加(new 产品O() {产品Id = 3, 产品的名字 = "Guaraná Fantástica", 被标记 = 1, 类别的名字 = 类别的名字.饮料,成本= 4.数量=“12 - 355毫升罐”});
        data.添加(new 产品O() {产品Id = 4, 产品的名字 = "Sasquatch Ale", 被标记 = 1, 类别的名字 = 类别的名字.饮料,成本= 14m,数量=“24 - 12盎司瓶”});
        data.添加(new 产品O() {产品Id = 5, 产品的名字 = "钢眼黑啤", 被标记 = 1, 类别的名字 = 类别的名字.饮料,成本= 18.99m,数量=“24 - 12盎司瓶”,可用=假});
        data.添加(new 产品O() {产品Id = 6, 产品的名字 = "Côte de Blaye", 被标记 = 1, 类别的名字 = 类别的名字.饮料,成本= 263.数量= "12 - 75毫升瓶"});
        data.添加(new 产品O() {产品Id = 7, 产品的名字 = "黄绿色verte", 被标记 = 1, 类别的名字 = 类别的名字.饮料,成本= 18m,数量=“每瓶750毫升”});
        data.添加(new 产品O() {产品Id = 8, 产品的名字 = "怡保咖啡", 被标记 = 1, 类别的名字 = 类别的名字.饮料,成本= 46m,数量=“16 - 500克罐装”});
                
        data.添加(new 产品O() {产品Id = 9, 产品的名字 =“八角糖浆”, 被标记 = 2, 类别的名字 = 类别的名字.调味品,成本= 10m,数量=“12 - 550毫升瓶”});
        data.添加(new 产品O() {产品Id = 10, 产品的名字 = " Anton's Cajun调味料", 被标记 = 2, 类别的名字 = 类别的名字.调味品,成本= 22.80m,数量=“48 - 6盎司的罐子”,可用=假});
        data.添加(new 产品O() {产品Id = 11, 产品的名字 = " Anton主厨的秋葵汤", 被标记 = 2, 类别的名字 = 类别的名字.调味品,成本= 21.35m,数量=“36箱”});
        data.添加(new 产品O() {产品Id = 12, 产品的名字 =“奶奶的波森莓酱”, 被标记 = 2, 类别的名字 = 类别的名字.调味品,成本= 25m,数量=“12 - 8盎司罐”});
        data.添加(new 产品O() {产品Id = 13, 产品名称=“北伍兹蔓越莓酱”, 被标记 = 2, 类别的名字 = 类别的名字.调味品,成本= 40m,数量=“12 - 12盎司罐”});
        data.添加(new 产品O() {产品Id = 14, 产品的名字 = "Genen Shouyu", 被标记 = 2, 类别的名字 = 类别的名字.调味品,成本= 15.50m,数量=“24 - 250ml瓶”});
        data.添加(new 产品O() {产品Id = 15, 产品的名字 = "古拉马六甲", 被标记 = 2, 类别的名字 = 类别的名字.调味品,成本= 19.45m,数量=“20 - 2公斤袋”,可用=假});
        data.添加(new 产品O() {产品Id = 16, 产品的名字 = " Vegie-spread ", 被标记 = 2, 类别的名字 = 类别的名字.调味品,成本= 43.90m,数量=“15 - 625克罐子”});

        
        data.添加(new 产品O() {产品Id = 17, 产品的名字 = "奶油蛋白甜饼", 被标记 = 3, 类别的名字 = 类别的名字.糖果,成本= 17.45m,数量=“100 - 250克袋”,可用=假});
        data.添加(new 产品O() {产品Id = 18, 产品的名字 = "Teatime巧克力饼干", 被标记 = 3, 类别的名字 = 类别的名字.糖果,成本= 9.20m,数量=“20 - 450克杯”});
        data.添加(new 产品O() {产品Id = 19, 产品名=“罗德尼先生的果酱”, 被标记 = 3, 类别的名字 = 类别的名字.糖果,成本= 81.00m,数量= 24 pkgs. 4块”});
        data.添加(new 产品O() {产品Id = 20, 产品名=“罗德尼爵士的司康饼”, 被标记 = 3, 类别的名字 = 类别的名字.糖果,成本= 10.00m,数量=“30个礼盒”,有货=假});
        data.添加(new 产品O() {产品Id = 21, 产品的名字 = "NuNuCa nu ß-牛轧糖奶油", 被标记 = 3, 类别的名字 = 类别的名字.糖果,成本= 14.00m,数量=“10盒× 12件”});
        data.添加(new 产品O() {产品Id = 22, 产品的名字 = "Gumbär Gummibärchen", 被标记 = 3, 类别的名字 = 类别的名字.糖果,成本= 31.23m,数量=“32 - 500克盒”});
        data.添加(new 产品O() {产品Id = 23, 产品的名字 = "Schoggi Schokolade", 被标记 = 3, 类别的名字 = 类别的名字.糖果,成本= 43.9m,数量=“100 - 100克”});
        data.添加(new 产品O() {产品Id = 24, 产品的名字 = "Zaanse koeken", 被标记 = 3, 类别的名字 = 类别的名字.糖果,成本= 9.数量=“10 - 4盎司盒”,可用=假});

        
        data.添加(new 产品O() {产品Id = 25, 产品的名字 = "Queso Cabrales", 被标记 = 4, 类别的名字 = 类别的名字.乳制品,成本= 21m,数量= "1公斤/公斤"});
        data.添加(new 产品O() {产品Id = 26, 产品的名字 = "法比奥里干酪", 被标记 = 4, 类别的名字 = 类别的名字.乳制品,成本= 32m,数量=“24 - 200g pkgs”,可用=假});
        data.添加(new 产品O() {产品Id = 27, 产品的名字 = " Geitost ", 被标记 = 4, 类别的名字 = 类别的名字.乳制品,成本= 2.数量=“500g”});
        data.添加(new 产品O() {产品Id = 28, 产品的名字 = "Raclette Courdavault", 被标记 = 4, 类别的名字 = 类别的名字.乳制品,成本= 55m,数量= "5公斤/公斤"});
        data.添加(new 产品O() {产品Id = 29, 产品的名字 = "Camembert Pierrot", 被标记 = 4, 类别的名字 = 类别的名字.乳制品,成本= 34m,数量=“15 - 300克轮”,可用=假});
        data.添加(new 产品O() {产品Id = 30, 产品的名字 = " Gudbr和sdalsost ", 被标记 = 4, 类别的名字 = 类别的名字.乳制品,成本= 36m,数量=“10公斤/公斤”});
        data.添加(new 产品O() {产品Id = 31, 产品的名字 = " Flotemysost ", 被标记 = 4, 类别的名字 = 类别的名字.乳制品,成本= 21.数量=“10 - 500g pkgs”});
        data.添加(new 产品O() {产品Id = 32, 产品的名字 = " Giovanni马苏里拉奶酪", 被标记 = 4, 类别的名字 = 类别的名字.乳制品,成本= 34.8m,数量= "24 - 200g pkgs"});
        
        data.添加(new 产品O() {产品Id = 33, 产品的名字 = "Gustaf's Knäckebröd", 被标记 = 5, 类别的名字 = 类别的名字.谷物,成本= 21m,数量=“24 - 500克/克”});
        data.添加(new 产品O() {产品Id = 34, 产品的名字 = " Tunnbrod ", 被标记 = 5, 类别的名字 = 类别的名字.谷物,成本= 9米,数量=“12 - 250克/公斤”,可用=假});
        data.添加(new 产品O() {产品Id = 35, 产品的名字 = "新加坡福建炒面", 被标记 = 5, 类别的名字 = 类别的名字.粮食,成本= 14m,数量=“32 - 1公斤公斤”});
        data.添加(new 产品O() {产品Id = 36, 产品的名字 = "Filo Mix", 被标记 = 5, 类别的名字 = 类别的名字.粮食,成本= 7米,数量=“16 - 2公斤箱”});
        data.添加(new 产品O() {产品Id = 37, 产品的名字 = "Gnocchi di nonna Alice", 被标记 = 5, 类别的名字 = 类别的名字.谷物,成本= 38m,数量=“24 - 250g pkgs”});
        data.添加(new 产品O() {产品Id = 38, 产品的名字 = "安吉洛饺子", 被标记 = 5, 类别的名字 = 类别的名字.谷物,成本= 19.数量=“24 - 250g pkgs”});
        data.添加(new 产品O() {产品Id = 39, 产品的名字 = "Wimmers gute Semmelknödel", 被标记 = 5, 类别的名字 = 类别的名字.谷物,成本= 33.25m,数量=“20袋× 4件”});

        
        data.添加(new 产品O() {产品Id = 40, 产品的名字 = "神户Niku", 被标记 = 6, 类别的名字 = 类别的名字.肉类,成本= 97m,数量=“24盒x 2个馅饼”});
        data.添加(new 产品O() {产品Id = 41, 产品的名字 = "Alice Mutton", 被标记 = 6, 类别的名字 = 类别的名字.肉,成本= 39m,数量=“16个馅饼”});
        data.添加(new 产品O() {产品Id = 42, 产品的名字 = "Thüringer烤香肠", 被标记 = 6, 类别的名字 = 类别的名字.肉类,成本= 123.99m,数量=“48件”});
        data.添加(new 产品O() {产品Id = 43, 产品的名字 = "珀斯馅饼", 被标记 = 6, 类别的名字 = 类别的名字.成本= 32.8m,数量=“50袋x 30条香肠”,可用=假});
        data.添加(new 产品O() {产品Id = 44, 产品的名字 = " Tourtiere ", 被标记 = 6, 类别的名字 = 类别的名字.肉类,成本= 7.45米,数量=“20 - 1公斤罐头”});
        data.添加(new 产品O() {产品Id = 45, 产品的名字 = "Pâté chinois", 被标记 = 6, 类别的名字 = 类别的名字.肉类成本= 24.00m,数量=“18 - 500g pkgs”});
        data.添加(new 产品O() {产品Id = 46, 产品的名字 =“鲍勃叔叔的有机干梨”, 被标记 = 6, 类别的名字 = 类别的名字.肉类,成本= 30m,数量=“12 - 1磅pkgs”});
        data.添加(new 产品O() {产品Id = 47, 产品的名字 =“豆腐渣”, 被标记 = 6, 类别的名字 = 类别的名字.肉类,成本= 23.25m,数量=“40 - 100g pkgs”,可用=假});
        
        data.添加(new 产品O() {产品Id = 48, 产品的名字 = " Ikura ", 被标记 = 7, 类别的名字 = 类别的名字.海鲜,成本= 31m,数量=“12 - 200毫升瓶”});
        data.添加(new 产品O() {产品Id = 49, 产品的名字 = " Konbu ", 被标记 = 7, 类别的名字 = 类别的名字.海鲜,成本= 6m,数量=“2公斤箱”});
        data.添加(new 产品O() {产品Id = 50, 产品的名字 = "Carnarvon Tigers", 被标记 = 7, 类别的名字 = 类别的名字.海鲜,成本= 62.5m,数量=“16kg pkg”,可用=假});
        data.添加(new 产品O() {产品Id = 51, 产品的名字 = "Nord-Ost Matjeshering", 被标记 = 7, 类别的名字 = 类别的名字.海鲜,成本= 25.89m,数量=“10 - 200克眼镜”,可用=假});
        data.添加(new 产品O() {产品Id = 52, 产品的名字 = "Inlagd Sill", 被标记 = 7, 类别的名字 = 类别的名字.海鲜,成本= 19m,数量=“24 - 250克罐”});
        data.添加(new 产品O() {产品Id = 53, 产品的名字 = "Gravad lax", 被标记 = 7, 类别的名字 = 类别的名字.海鲜,成本= 97m,数量=“12 - 500克/盎司”});
        data.添加(new 产品O() {产品Id = 54, 产品的名字 = "杰克新英格兰蛤蜊浓汤", 被标记 = 7, 类别的名字 = 类别的名字.海鲜,成本= 9.65m,数量=“12 - 12盎司罐装”});
        data.添加(new 产品O() {产品Id = 55, 产品的名字 = " Spegesild ", 被标记 = 7, 类别的名字 = 类别的名字.海鲜,成本= 26m,数量=“4 - 450克杯”});

        SourceData =数据;
    }
}
<div style="width:40%; display: inline-block;">
    <Telerik图表>
        <图表Title 文本="国内生产总值增长/GDP年%/">图表Title>
        <图表Legend 可见="">图表Legend>

        <图表SeriesItems>
            <图表Series 类型="@图表Series类型.列" Data="@ data" ="@nameof (模型Data.Series1)" 的名字="加拿大">图表Series>
            <图表Series 类型="@图表Series类型.列" Data="@ data" ="@nameof (模型Data.台Series2)" 的名字="美国">图表Series>
            <图表Series 类型="@图表Series类型.列" Data="@ data" ="@nameof (模型Data.Series3)" 的名字="保加利亚">图表Series>
            <图表Series 类型="@图表Series类型.行" Data="@ data" ="@nameof (模型Data.Series4)" 的名字="平均趋势">图表Series>
        图表SeriesItems>

        <图表类别Axes>
            <图表类别Axis 类别="@类别">
                <图表类别AxisLabels>
                    <图表类别AxisLabelsRotation ="45" 对齐="@图表AxisLabelsRotation对齐ment.Center" />
                图表类别AxisLabels>
            图表类别Axis>
        图表类别Axes>

        <图表ValueAxes>
            <图表ValueAxis>
                <图表ValueAxisTitle 文本="增长,%">图表ValueAxisTitle>
                <图表ValueAxisLabels 格式="{0:N0}%">图表ValueAxisLabels>
            图表ValueAxis>
        图表ValueAxes>

        <图表工具提示 可见="真正的" 共享="真正的">图表工具提示>
    Telerik图表>
div>

<div style="width:50%; display: inline-block; margin-left:10px;">
  <Telerik图表>
    <图表Title 文本="你最喜欢的运动是什么?">图表Title>
    <图表Legend 可见="真正的" 位置="图表Legend位置.前">图表Legend>

    <图表SeriesItems>
        <图表Series 类型="@图表Series类型.甜甜圈" Data="@ data为甜甜圈"
                     ="@nameof (甜甜圈Data.值)" 类别场="@nameof (甜甜圈Data.类别)">
            <图表Series工具提示 可见="真正的">
                <Template>
                    @(上下文.DataItem 甜甜圈Data).类别)——@(上下文.DataItem 甜甜圈Data).值)%
                Template>
            图表Series工具提示>
            <图表SeriesLabels 位置="@图表SeriesLabels位置.OutsideEnd"
                               可见="真正的"
                               Background="透明的"
                               格式="{0}%">
            图表SeriesLabels>
        图表Series>
    图表SeriesItems>
  Telerik图表>
div>

@code {
    公开课甜甜圈Data
    {
        public string 类别 { get; set; }
        public Int32 Value { get; set; }
    }

    公共列表<甜甜圈Data> Data为甜甜圈 = new 列表<甜甜圈Data>()
    {
        新的甜甜圈Data ()
        {
            类别=“足球”,
            值= 35
        },
        新的甜甜圈Data ()
        {
            类别= "篮球",
            值= 25
        },
        新的甜甜圈Data ()
        {
            类型=“排球”,
            值= 20
        },
        新的甜甜圈Data ()
        {
            类型=“橄榄球”,
            值= 10
        },
        新的甜甜圈Data ()
        {
            类型=“网球”,
            值= 10
        },

    };

    公开课模型Data
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
        public double Series4 { get; set; }
    }

    public string[] 类别 = new string[] {"2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };


    公共列表<模型Data> Data = new 列表<模型Data>()
    {
        新的模型Data ()
        {
            Series1 = 3.907,
            台Series2 = 4.743,
            Series3 = 0.01,
            Series4 = 1.988
        },
        新的模型Data ()
        {
            Series1 = 7.943,
            台Series2 = 7.295,
            Series3 = 0.375,
            Series4 = 2.733
        },
        新的模型Data ()
        {
            Series1 = 7.848,
            台Series2 = 7.175,
            Series3 = 1.161,
            Series4 = 3.994
        },
        新的模型Data ()
        {
            Series1 = 9.284,
            台Series2 = 6.376,
            Series3 = 0.684,
            Series4 = 3.464
        },
        新的模型Data ()
        {
            Series1 = 9.263,
            台Series2 = 8.153,
            Series3 = 3.7,
            Series4 = 4.001
        },
        新的模型Data ()
        {
            Series1 = 9.801,
            台Series2 = 8.535,
            Series3 = 3.269,
            Series4 = 3.939
        },
        新的模型Data ()
        {
            Series1 = 3.89,
            台Series2 = 5.247,
            Series3 = 1.083,
            Series4 = 1.333
        },
        新的模型Data ()
        {
            Series1 = 8.238,
            台Series2 = 7.832,
            Series3 = 5.127,
            Series4 = 2.245
        },
        新的模型Data ()
        {
            Series1 = 9.552,
            台Series2 = 4.3,
            Series3 = 3.69,
            Series4 = 4.339
        },
        新的模型Data ()
        {
            Series1 = 6.855,
            台Series2 = 4.3,
            Series3 = 2.995,
            Series4 = 2.727
        }
    };

  }
@page“/调度器”

<Telerik调度器 @bind-Date="@StartDate"
                  @bind-View="@CurrView"
                  Data="@任命"
                  OnUpdate="@Update任命"
                  On删除="@删除任命"
                  OnCreate="@添加任命"
                  所有owUpdate="真正的"
                  所有owCreate="真正的"
                  所有ow删除="真正的"
                  高度="500px"
                  宽度="100%"
                  Id场="@ (nameof(约会.Id))"
                  RecurrenceRule场="@ (nameof(约会.RecurrenceRule))"
                  RecurrenceExceptions场="@ (nameof(约会.RecurrenceExceptions))"
                  RecurrenceId场="@ (nameof(约会.RecurrenceId))">
    <调度器的观点>
        <调度器DayView 开始时间="@DayStart" />
        <调度器WeekView 开始时间="@DayStart" />
        <调度器MultiDayView 开始时间="@DayStart" />
    调度器的观点>
Telerik调度器>

@code {
    列表<任命> 约会=新名单<任命>();
    public DateTime StartDate { get; set; }
    public 调度器View CurrView { get; set; } = 调度器View.周;

    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);

    任务OnInitializedAsync()
    {
        StartDate可以= GetStart ();

        任命= Get任命 ();

        返回基地.OnInitializedAsync ();
    }

    私人列表<任命> Get任命 ()
    {
        列表<任命> data = new 列表<任命>();
        DateTime基线时间= GetStart();

        data.添加(新任命
        {
            标题=“兽医参观”,
            描述=“这只猫需要接种疫苗和检查牙齿.",
            开始= baselineTime.添加Hours (2),
            结束= baselineTime.添加Hours (2).添加Minutes (30)
        });

        data.添加(新任命
        {
            标题=“夏威夷之旅”,
            难忘的假期!",
            Is所有Day = 真正的,
            开始= baselineTime.添加Days (-10),
            结束= baselineTime.添加Days (2)
        });

        data.添加(新任命
        {
            标题=“简的生日聚会”,
            Description = "除了礼物,一定要送她鲜花.",
            开始= baselineTime.添加Days (5).添加Hours (10),
            结束= baselineTime.添加Days (5).添加Hours (18),
        });

        data.添加(新任命
        {
            头衔=“与经理一对一”,
            开始= baselineTime.添加Days (2).添加Hours (3).添加Minutes (30),
            结束= baselineTime.添加Days (2).添加Hours (3).添加Minutes (45)
        });

        data.添加(新任命
        {
            标题=“与人力资源早午餐”,
            描述= "新员工的绩效评估。.",
            开始= baselineTime.添加Days (3).添加Hours (3),
            结束= baselineTime.添加Days (3).添加Hours (3).添加Minutes (45)
        });

        data.添加(新任命
        {
            题目=“新员工面试”,
            描述=“看看约翰是否适合外围买球365队。.",
            开始= baselineTime.添加Days (3).添加Hours (1).添加Minutes (30),
            结束= baselineTime.添加Days (3).添加Hours (2).添加Minutes (30)
        });

        data.添加(新任命
        {
            Title =“会议”,
            描述=“重要的工作会议. 不要忘记练习你的演讲.",
            开始= baselineTime.添加Days (6),
            结束= baselineTime.添加Days (11),
            Is所有Day = 真正的
        });

        data.添加(新任命
        {
            标题=“新项目启动”,
            描述= "所有人集合! 外围买球365还将有来自较晚时区的客户接听电话.",
            开始= baselineTime.添加Days (3).添加Hours (8).添加Minutes (30),
            结束= baselineTime.添加Days (3).添加Hours (11).添加Minutes (30)
        });

        data.添加(新任命
        {
            标题=“获取照片”,
            描述= "把上周度假的照片打印出来. 它正在从兽医那里去上班的路上.",
            开始= baselineTime.添加Hours (2).添加Minutes (15),
            结束= baselineTime.添加Hours (2).添加Minutes (30)
        });


        返回数据;
    }

    公共DateTime GetStart ()
    {
        DateTime now = DateTime.现在;
        Int diff = (7 + (now.DayOfWeek——DayOfWeek.周一)% 7;
        DateTime上周一=现在.添加Days (1 * diff);
        //返回今天上午8点,以便更好地可视化演示
        返回新DateTime (lastMonday.年,lastMonday.月,lastMonday.日,8,0,0);
    }

    空白Update任命 (调度器UpdateEventArgs arg游戏)
    {
        约会项=(约会)参数.项;
        var matchingItem =约会.FirstOr默认的(a => a.Id = =项目.Id);
        如果(matchingItem != null)
        {
            matchingItem.Title =项目.标题;
            matchingItem.描述=项目.描述;
            matchingItem.开始=项目.开始;
            matchingItem.结束=项目.结束;
            matchingItem.Is所有Day =项目.Is所有Day;
        }
    }

    空白添加任命 (调度器CreateEventArgs arg游戏)
    {
        约会项目= arg游戏.项任命;
        任命.添加(项);
    }

    空白删除任命 (调度器删除EventArgs arg游戏)
    {
        约会项=(约会)参数.项;
        任命.删除(项);
    }

    公开课的约会
    {
        公共Guid Id { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public string Title { get; set; }
        public bool Is所有Day { get; set; }
        public string Description { get; set; }
        public string RecurrenceRule { get; set; }
        公共列表<DateTime> RecurrenceExceptions { get; set; }
        公共Guid? RecurrenceId { get; set; }

        公开任命()
        {
            Id = Guid.新Guid ();
        }
    }
}
<div class="calendar-wrap">
    <div>
        <div class="header">
        <h3>切换视图h3>
        div>
        <TelerikRadioGroup Data="@日历的观点"
                        @bind-Value="@日历ViewValue"
                        布局="@RadioGroup布局.垂直">TelerikRadioGroup>
    div>
    <Telerik日历 SelectionMode="@日历SelectionMode.多个"
                     @bind-Date="@startDate"
                     @bind-View="@日历ViewValue"
                     的观点="2">
    Telerik日历>
div>

@code {
    private DateTime startDate = DateTime.现在;

    public 日历View 日历ViewValue { get; set; } = 日历View.月;    
    公共列表<日历View模型> 日历的观点 { get; set; } = new 列表<日历View模型>()
    {
        new 日历View模型() {文本 = "Month View", Value = " 日历View ".月},
        new 日历View模型() {文本 = "Year View", Value = " 日历View ".年},
        new 日历View模型() {文本 = "十年视图",值=日历视图.十年},
        new 日历View模型() {文本 = "世纪视图",值=日历视图.世纪}
    };

    公开课日历View模型
    {
        public string 文本 { get; set; }
        public 日历View Value { get; set; }

        公共日历View模型 ()
        {
        }
    }
}

<style>
    .calendar-wrap {
        显示:flex;
        对齐项目:中心;
        justify-content:中心;
        差距:30 px;
        宽度:100%;
    }
    .标题{
      颜色:# 454545;
    }
        .头h3 {
            粗细:700;
            字体大小:18 px;
        }
style>
@using系统.Component模型.DataAnnotations

<div class="dropdownlist-为m">

  <Telerik为m 模型="@Validation模型" OnValidSubmit="@H和leValidSubmit" Class="margin-top">
    <为mValidation>
    <DataAnnotationsValidator />
    <TelerikValidationSummary />
    为mValidation>
    <为mItems>
        <为mItem>
            <Template>
              <div class="header">
              <h3>产品详细信息h3>
              div>
            Template>
        为mItem>
    <为mItem ="被标记">
      <Template>
                <label ="类别" class="k-label k-为m-label">类别*:label>
                        
        <TelerikDropDown列表 Id="类别"
                   Data="@类别Data"
                   @bind-Value="@Validation模型.被标记"
                   OnChange="@On类别Change"
                   Popup高度=""
                   默认的文本="选择类别" Value场="被标记" 文本框="类别的名字">
        TelerikDropDown列表>

                <TelerikValidationMessage ="@(() => Validation模型.被标记)">TelerikValidationMessage>
            Template>
    为mItem>
    <为mItem>
      <Template>
                <label ="产品" class="k-label k-为m-label">产品*:label>
                        
        <TelerikDropDown列表 Id="产品"
                   Data="@产品Data"
                   启用="@产品启用"
                   @bind-Value=@Validation模型.产品Id
                   Popup高度="170px"
                   默认的文本="选择产品"
                   Value场="产品Id"
                   文本框="产品的名字">
        TelerikDropDown列表>

                <TelerikValidationMessage ="@(() => Validation模型.产品Id)">TelerikValidationMessage>
            Template>
    为mItem>
    为mItems>
  Telerik为m>
  

  @ if (SuccessMessage !=字符串.空的)
  {
    <div class="k-notification k-notification-success margin-top">
    @SuccessMessage
    div>
  }
div>

@code {
  string[] 类别列表 ={"饮料","调味品","乳制品","肉/家禽"};

  string SuccessMessage =字符串.空的;
  
  公共IEnumerable<产品> 产品SourceData { get; set; }
  公共IEnumerable<产品> 产品Data { get; set; }
  公共IEnumerable<类别> 类别Data { get; set; }
  
  DropDownValidation模型 Validation模型 { get; set; } = new DropDownValidation模型();

  public bool 产品启用 => Validation模型.被标记 !=零;

  OnInitialized()
  {
    产品SourceData = Get产品s ();

    列表<类别> 类别 = new 列表<类别>();

    为 (int i = 0; i < 4; i++)
    {
      类别.添加(新类别()
      {
        被标记 = i + 1,
        类别的名字 = 类别列表[我]
      });
    }

    类别Data =类别;

    base.OnInitialized ();
  }

  空白On类别Change(对象值)
  {   
    Validation模型.产品Id =违约;

    如果(值 != null)
    {
      产品Data = 产品SourceData.Where(p => p.被标记 = = Validation模型.被标记).To列表 ();
    }
  }

  异步任务H和leValidSubmit ()
  {
    SuccessMessage = "为m Submitted Successfully . "!";

    等待任务.延迟(2000);

    SuccessMessage =字符串.空的;
  }

  列表<产品> Get产品s ()
  { 
        列表<产品> data = new 列表<产品>();
    
    data.添加(new 产品() {产品Id = 1, 产品的名字 = "柴", 被标记 = 1});
    data.添加(new 产品() {产品Id = 2, 产品的名字 = "张", 被标记 = 1});
    data.添加(new 产品() {产品Id = 3, 产品的名字 = "Guaraná Fantástica"});
    data.添加(new 产品() {产品Id = 4, 产品的名字 = "Sasquatch Ale"});
    data.添加(new 产品() {产品Id = 5, 产品的名字 = "钢眼黑啤"});
    data.添加(new 产品() {产品Id = 6, 产品的名字 = "Côte de Blaye"});
    data.添加(new 产品() {产品Id = 7, 产品的名字 = "黄绿色verte"});
    data.添加(new 产品() {产品Id = 8, 产品的名字 = "怡保咖啡"});
        
    data.添加(new 产品() {产品Id = 9, 产品的名字 =“八角糖浆”, 被标记 = 2});
    data.添加(new 产品() {产品Id = 10, 产品的名字 = " Anton's Cajun调味料", 被标记 = 2});
    data.添加(new 产品() {产品Id = 11, 产品的名字 = " Anton主厨的秋葵汤", 被标记 = 2});
    data.添加(new 产品() {产品Id = 12, 产品的名字 =“奶奶的波森莓酱”, 被标记 = 2});
    data.添加(new 产品() {产品Id = 13, 产品名称=“北伍兹蔓越莓酱”, 被标记 = 2});
    data.添加(new 产品() {产品Id = 14, 产品的名字 = "Genen Shouyu", 被标记 = 2});
    data.添加(new 产品() {产品Id = 15, 产品的名字 = "古拉马六甲", 被标记 = 2});
    data.添加(new 产品() {产品Id = 16, 产品的名字 = " Vegie-spread ", 被标记 = 2});

    data.添加(new 产品() {产品Id = 25, 产品的名字 = "Queso Cabrales", 被标记 = 3});
    data.添加(new 产品() {产品Id = 26, 产品的名字 = "法比奥里干酪", 被标记 = 3});
    data.添加(new 产品() {产品Id = 27, 产品的名字 = " Geitost ", 被标记 = 3});
    data.添加(new 产品() {产品Id = 28, 产品的名字 = "Raclette Courdavault", 被标记 = 3});
    data.添加(new 产品() {产品Id = 29, 产品的名字 = "Camembert Pierrot", 被标记 = 3});
    data.添加(new 产品() {产品Id = 30, 产品的名字 = " gudbr和sdalost ", 被标记 = 3}); / /添加一个产品
    data.添加(new 产品() {产品Id = 31, 产品的名字 = " Flotemysost ", 被标记 = 3});
    data.添加(new 产品() {产品Id = 32, 产品的名字 = " Giovanni马苏里拉奶酪", 被标记 = 3});
        
    data.添加(new 产品() {产品Id = 40, 产品的名字 = " miishi Kobe Niku", 被标记 = 4}); / /添加一个产品
    data.添加(new 产品() {产品Id = 41, 产品的名字 = "Alice Mutton", 被标记 = 4});
    data.添加(new 产品() {产品Id = 42, 产品的名字 = "Thüringer烤香肠", 被标记 = 4});
    data.添加(new 产品() {产品Id = 43, 产品的名字 = "珀斯馅饼", 被标记 = 4});
    data.添加(new 产品() {产品Id = 44, 产品的名字 = " Tourtiere ", 被标记 = 4});
    data.添加(new 产品() {产品Id = 45, 产品的名字 = "Pâté chinois", 被标记 = 4});
    data.添加(new 产品() {产品Id = 46, 产品的名字 =“鲍勃叔叔的有机干梨”, 被标记 = 4});
    data.添加(new 产品() {产品Id = 47, 产品的名字 = "豆腐",被标记 = 4});

    返回数据;
  } 

  公开课DropDownValidation模型
  {
    [需要(ErrorMessage =“选择一个类别”)]
    公共int? 被标记 { get; set; }
    
    [ErrorMessage = "Choose a 产品"]
    公共int? 产品Id { get; set; }
  }

  公共类产品
  {
  公共int? 产品Id { get; set; }

  public string 产品的名字 { get; set; }
  
  公共int? 被标记 { get; set; }
  }

  公共类类别
  {
  公共int? 被标记 { get; set; }

  public string 类别的名字 { get; set; }
  }
}

<style>

  .dropdownlist-为m {
  填充:20 px;
    宽度:100%;
    显示:flex;
    justify-content:中心;
  }

  .标题{
    颜色:# 454545;
    粗细:700;
  }
        .头h3 {
            粗细:500;
            字体大小:18 px;
        }

  .margin-top {
    margin-top: 8 px;
  }
style>

Blazor UI组件关键特性

为每个用例找到真正的原生Blazor组件

使用Telerik高性能网格和90+真正本地的开发时间和成本减半, 易于定制的UI组件,以覆盖任何应用程序场景. 每6周添加一组新的组件!

使用功能丰富的Telerik 网格可以节省几个月的UI开发时间

100多个功能提供灵活的数据可视化和操作, 丰富的API, 专业的外观和一种方式,以满足任何设计要求.

“我很高兴看到Telerik这样的合作伙伴为Blazor创建自定义UI控件. Telerik的UI控件使得构建具有大量丰富功能的漂亮web应用变得非常非常容易!”

丹尼尔·罗斯

项目经理,微软

用一组UI控件构建任何类型的应用程序

易于自定义Telerik Blazor控件通过多种方法, 属性和事件, 以及专业风格的内置主题 & Telerik Sass主题生成器,使您能够构建自己的.

获得97%满意率的支持

来自开发人员的杰出支持,他们构建的产品可以帮助您迅速解决所有的挑战.

使用外围买球365的互动学习材料快速入门

通过实验外围买球365广泛的Blazor演示,在几个小时内得到结果,医生 & 在线技术培训,帮助您在任何时间开始.

探索外围买球365的原生UI Blazor组件

flows_end_section
视觉

构建,运行,样式和共享您的片段

ninja-v1-opt

与设计师合作? 外围买球365帮你搞定!

在Blazor中使用Telerik UI,在Figma中使用Telerik UI套件,你可以很容易地与你的设计师进行合作. 的高度可定制的, 双方的相同组件让你开始着手创建自己的设计系统.

“对于那些还不是外围买球365 Telerik客户的读者来说, 这(客户支持)是我从2010年开始做的原因. 出色的控制/组件,甚至更好的服务.”

瑞尼普里托里厄斯

主人,Consultlink

这是一款为开发人员设计的开箱即用的手工产品,无需花太多时间处理UI和其他细节. 专注于你的逻辑,其余的都处理得很好.

Evlv数字

Dev, Evlv数字

“为Blazor设计的Telerik UI是一款很棒的产品. 它节省时间,高性能和专业的外观.”

马哈茂德·Helmy

科威特大学高级数据科学家

“我一直在测试来自各种供应商的Blazor组件, Telerik是最好的-伟大的用户体验, 快, 容易扩展和实现.”

高管克里斯Woodard

技术顾问,Avisra

“我对当前的控制设置非常满意, 发布新控件和扩展现有功能的过程. 这些控制快速且易于实施. 支持是我遇到的最好的事情之一. 友好的回应,他们总是试图用例子来帮助你, 为你定制的例子,如果你想要/需要的是不可能的,他们试图为你找到一个解决方案.”

尤尔根·兽疥癣

SGS比利时NV

“我在YouTube视频中看到了Telerik的UI组件,然后我喜欢上了它. 这将是一个爆炸使用他们!”

伊玛穆尔·哈桑·汗

氙气解决方案有限公司发展商.

“我很高兴看到Telerik这样的合作伙伴为Blazor创建自定义UI控件. Telerik的UI控件使得构建具有大量丰富功能的漂亮web应用变得非常非常容易!”

丹尼尔·罗斯

项目经理,微软

最新新闻、更新和资源

Blazor UI的博客
Blazor UI视频s
服务

升级到Telerik DevCraft完成

为任何项目做好准备 & 技术

通过获得1250 +,节省50%的开发时间 .NET和JavaScript UI组件,用于构建web、桌面和移动应用程序.

让钱花得最值

享受Blazor的Telerik UI以及嵌入式报告和模拟工具,同时节省高达90%的升级价格.

Blazor的Telerik UI有什么新功能

Blazor 旋转木马的Telerik UI

新组件:旋转木马

使用Blazor 旋转木马的Telerik UI滚动浏览图像库或任何其他丰富的内容.

Blazor条码的Telerik UI概述

新组件:条形码

为各种行业标准生成条形码,并通过各种暴露的属性轻松定制其外观.

Blazor甘特组件的Telerik UI

新甘特增强

Blazor 甘特组件的Telerik UI可以让你计划项目的开始和结束日期, 可视化任务进展, 依赖关系和里程碑等等.

行业领先的支持

专家及及时支援

直接从构建这个UI套件的开发人员那里获得问题的答案, 即使是在你的试用期.

联络支持

需要评估的帮助?

如果你不是开发人员或没有时间评估外围买球365的产品, 请将您的项目要求发送给外围买球365. 外围买球365将评估您所需要的功能,并让您知道外围买球365的产品是否符合您的需求.

请将您的项目要求发送给外围买球365
Background-NextSteps

准备试一试?

下载免费试用