zoukankan      html  css  js  c++  java
  • asp.net core视图组件(ViewComponent)简单使用

    一、组成:

    一个视图组件包括两个部分,派生自ViewComponent的类及其返回结果。类似控制器。

    定义一个视图组件,如控制器一样,必须是公开,非嵌套,非抽象的类。一般,视图组件名称为类名去掉”ViewComponent“后缀。也可通过ViewComponentAttribute.Name属性进行明确指定。

    二、视图组件方法:

    在InvokeAsync/Invoke方法中定义逻辑,并返回IViewComponentResult。参数可直接来源于视图组件间调用,通过匿名类属性进行传递。

    三、视图组件搜索路径:

    运行时对视图搜索路径如下:

    Views/Components/

    Views/Shared/Components

    视图组件默认名称为Default,通过可默认命名为Default.cshtml;或可指定视图名称,在调用View方法返回时,将名称一同返回。

    四、视图组件调用:

    1.从视图中调用

      @Component.Invoke("视图组件名",<匿名类型参数>)。或@await Component.InvokeAsync("视图组件名",<匿名类型参数>)。

    2.从控制器直接调用:

      直接在Action中返回,return ViewComponent("视图组件名称", new {arg0=xx,arg1=xxx});的形式调用。

    五、简单示例:

    通过创建一个视图组件,返回前n个标识,进行显示。

    视图组件类:(则该视图名称为”TopTags“)

    namespace ViewComponentAbout.Components
    {
        public class TopTagsViewComponent : ViewComponent
        {
            private readonly ITagService _tagService;
    
            public TopTagsViewComponent(ITagService tagService)
            {
                _tagService = tagService;
            }
    
            public IViewComponentResult Inovke(int count)
            {
                var tags = _tagService.LoadTopTags(count);
                var models = tags.Select((tag) =>
                    new TagViewModel
                    {
                        Id = tag.Id,
                        Name = tag.Name
                    });
                return View(models);
            }
    
            public async Task<IViewComponentResult> InvokeAsync(int count)
            {
                var tags = await _tagService.LoadTopTagsAsync(count);
                var models = tags.Select((tag) =>
                    new TagViewModel
                    {
                        Id = tag.Id,
                        Name = tag.Name
                    });
                return View(models);
            }
        }
    }

    数据来源Services:

    {
        public interface ITagService
        {
            IEnumerable<Tag> LoadTopTags(int count);
            Task<IEnumerable<Tag>> LoadTopTagsAsync(int count);
        }
    }
    
    namespace ViewComponentAbout.Services
    {
        public class TagService : ITagService
        {
            private static Func<List<Tag>> _tags = () =>
            {
                var tags = new List<Tag>();
                for (int i = 0; i < 100; ++i)
                {
                    tags.Add(new Tag { Id = $"No.{i}", Name = $"Tag{i}", Description = "Tag entity", CreatedOn = DateTime.Now });
                }
                return tags;
            };
    
            public IEnumerable<Tag> LoadTopTags(int count)
            {
                return _tags().Take(count);
            }
    
            public async Task<IEnumerable<Tag>> LoadTopTagsAsync(int count)
            {
                return await Task.Run(() => _tags().Take(count));
            }
        }
    }

    实体:

    namespace ViewComponentAbout.Entities
    {
        public class Tag
        {
            public string Id { get; set; }
            public string Name { get; set; }
            public DateTime CreatedOn { get; set; }
            public string Description { get; set; }
        }
    }

    ViewModel:

     
    namespace ViewComponentAbout.ViewModels
    {
        public class TagViewModel
        {
            public string Id { get; set; }
            public string Name { get; set; }
        }
    }

    视图组件页面:(位于/Views/Shared/Components/TopTags/Default.cshtml

    @model IEnumerable<ViewComponentAbout.ViewModels.TagViewModel>
    
    <style>
        ul li {color:purple;font-style:italic;}
    </style>
    
    @if(Model.Any())
    {
        <ul>
            @foreach(var tag in Model)
            {
                <li>
                    [@tag.Id] @tag.Name
                </li>
            }
        </ul>
    }

    Startup中,在ConfigureServices添加服务注入:

    services.AddSingleton<ITagService, TagService>();

    在Index.cshtml页面中,使用如下:

    @await Component.InvokeAsync("TopTags", new { count = 10 })

    效果:


    创建一个命名视图组件:

    获取前10个Tag数据,如:(视图名:Top10Tags)

    {
        public class Top10TagsViewComponent : ViewComponent
        {
            private readonly ITagService _tagService;
    
            public Top10TagsViewComponent(ITagService tagService)
            {
                _tagService = tagService;
            }
    
            public IViewComponentResult Inovke()
            {
                var tags = _tagService.LoadTopTags(10);
                var models = tags.Select((tag) =>
                    new TagViewModel
                    {
                        Id = tag.Id,
                        Name = tag.Name
                    });
                return View("TagComponentName", models);
            }
    
            public async Task<IViewComponentResult> InvokeAsync()
            {
                var tags = await _tagService.LoadTopTagsAsync(10);
                var models = tags.Select((tag) =>
                    new TagViewModel
                    {
                        Id = tag.Id,
                        Name = tag.Name
                    });
                return View("TagComponentName", models);
            }
        }
    }

    组件视图页面:(位于 /Views/Shared/Components/Top10Tags/TagComponentName.cshtml

    @model IEnumerable<ViewComponentAbout.ViewModels.TagViewModel>
    
    <style>
        ul li {color:purple;font-style:italic;}
    </style>
    There is only 10 tags in the component.
    @if(Model.Any())
    {
        <ul>
            @foreach(var tag in Model)
            {
                <li>
                    [@tag.Id] @tag.Name
                </li>
            }
        </ul>
    }

    调用:

    @await Component.InvokeAsync("Top10Tags")

    效果:

  • 相关阅读:
    C# 设计模式(3)工厂方法模式
    C# 设计模式(2)简单工厂模式
    C# .Net Core读取AppSettings
    C# 设计模式(1)单例模式
    C# MarshalByRefObject
    使用64位TestStand调用32位LabVIEW代码模块
    LIN 总线入门
    C#版本与.NET版本对应关系以及各版本的特性
    数字货币提醒小工具
    C#根据描述获取枚举
  • 原文地址:https://www.cnblogs.com/siyunianhua/p/11690553.html
Copyright © 2011-2022 走看看