在视图组件中进行传递参数
admin
2022-03-08在视图组件中进行传递参数
导航:
在本视频中,我们将通过示例讨论如何将参数传递给视图组件。
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))