在视图组件中进行传递参数

导航：

• ASP.NET Core 6 RazorPages与EF Core入门视频目录
• 视频课程更佳：ASP.NET Core 6 RazorPages与EF Core入门视频

在本视频中，我们将通过示例讨论如何将参数传递给视图组件。

ASP.NET Core视图组件参数示例

在上一个视频中，我们讨论了如何创建视图组件，该视图组件按专业显示学生人数摘要。

目前，所有专业的人数都显示出来。我们希望能够按专业名称进行过滤。

例如，如果将ComputerScience作为专业名称传递，则仅应显示ComputerScience专业的人员。

如果我未输入任何专业名称，则显示所有专业的人数。

换句话说，我们想要包含一个可用于过滤视图组件结果的参数。并且它还是具备可选功能。

IStudentRepository.cs

然后我们调整StudentCountByMajorEnum接口，增加专业枚举参数，作为搜索数据的条件。然后将MajorEnum设置为可选参数包含null的情况，因为如果需要所有专业，可以传递null。

public interface IStudentRepository
{
        IEnumerable<MajorHeadCount> StudentCountByMajorEnum(MajorEnum? Major);

    // 其他方法
}

MockStudentRepository.cs

public class MockStudentRepository : IStudentRepository
{
    private List<Student> _studentList;

    public MockStudentRepository()
    {
          _studentList = new List<Student>()
            {
                 new Student() { Id = 1, Name = "张三", Major = MajorEnum.ComputerScience, Email = "Tony-zhang@52abp.com" },
            new Student() { Id = 2, Name = "李四", Major = MajorEnum.ElectronicCommerce, Email = "lisi@52abp.com" },
            new Student() { Id = 3, Name = "王二麻子", Major = MajorEnum.Mathematics, Email = "wang@52abp.com" },
            };
    }

    public IEnumerable<MajorEnumHeadCount> StudentCountByMajorEnum(MajorEnum? Major)
    {
        IEnumerable<Student> query = _studentList;

            if (Major.HasValue)
            {
                query = query.Where(e => e.Major == Major.Value);
            }

        return query.GroupBy(e => e.Major)
                            .Select(g => new MajorEnumHeadCount()
                            {
                                Major = g.Key.Value,
                                Count = g.Count()
                            }).ToList();
    }

    //其他方法
}

HeadCountViewComponent.cs

现在需要在视图组件的Invoke方法上包括专业参数。

指定默认值null。这使该参数成为可选参数。如果在调用视图组件时未指定任何值，则使用默认值null，我们将看到所有专业。

public class HeadCountViewComponent : ViewComponent
{
    private readonly IStudentRepository studentRepository;

    public HeadCountViewComponent(IStudentRepository studentRepository)
    {
        this.studentRepository = studentRepository;
    }

 public IViewComponentResult Invoke(MajorEnum? Major = null)
        {
            var result = _studentRepository.StudentCountByMajorEnum(Major);
            return View(result);
        }
}

调用包含参数的视图组件

要使用参数调用视图组件，需要将匿名对象传递给InvokeAsync()方法。

匿名对象中的属性名称必须与视图组件类的Invoke（InvokeAsync）方法上的参数名称匹配。您可以使用此技术传递任意数量的参数。

@await Component.InvokeAsync("HeadCount", new
{
    Major = MajorEnum.ComputerScience
})

要显示所有专业，请不要包含专业参数或传递null

@await Component.InvokeAsync("HeadCount")

//或者

@await Component.InvokeAsync("HeadCount", null)

Details.cshtml

根据模型类中的专业进行过滤专业

@await Component.InvokeAsync("HeadCount", new
{
    Major = Model.Student.Major
})

视图组件的优化

@await Component.InvokeAsync(typeof(HeadCountViewComponent))