NETCore入门系列（自定义IHtmlHelper、TagHelper、PartialView和ViewComponent）

一、创建ASP.NET Core Web 项目

1、创建一个ASP.NETCore Web应用（模型-视图-控制器），并将其命名为RazorWebApp。


2、视图渲染（项目运行后，发现修改视图内容后，刷新没效果，需要重新启动才生效，此时可通过添加一个nuget包解决）
（1）添加一个名为Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation的nuget包。

（2）在startup.cs中添加该组件到管道中，代码如下：

 services.AddRazorPages().AddRazorRuntimeCompilation();

二、自定义IHtmlHelper

1、如下图，分别创建Utils和RazorExtension文件夹，并在该文件夹中创建一个名为HtmlHelperExtensions类。

2、将HtmlHelperExtensions设置为静态类，并在其中分别创建Br和Img方法，这两个方法是自定义扩展类，其中当Br方法被调用时，当前html会出现"换3行"的代码；Img方法扩展了html中的img标签，调用该扩展方法，会在当前html页面上生成一个img标签。

public static class HtmlHelperExtensions
    {
        /// <summary>
        /// 构建一个换3行的扩展方法
        /// </summary>
        /// <param name="helper"></param>
        /// <returns></returns>
        public static IHtmlContent Br(this IHtmlHelper helper)
        {
            return new HtmlString("</br></br></br>");
        }

        /// <summary>
        /// 扩展img方法
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="src"></param>
        /// <returns></returns>
        public static IHtmlContent Img(this IHtmlHelper helper,string src)
        {
            return new HtmlString($"<img src='{src}'/>");
        }


    }

3、将项目中默认的Index.cshtml内容做如下更改

@{
    ViewData["Title"] = "Home Page";
}
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

    <h2>IHtmlHelper</h2>
    @Html.Br()
    @Html.Img("你的图片所在路径")
 </div>

4、运行项目，F12可看到当前html中有3个br标签和一个img标签输出，其中img中图片是在百度找的。

三、自定义TagHelper

1、在RazorExtension目录中创建一个名为StudentTagHelper类。
2、该类代码如下：

//1、标记当前tag元素的名称，如果不标记，则默认使用当前去掉“TagHelper”的类名
[HtmlTargetElement("student")]
    public class StudentTagHelper:TagHelper
    {
        //2、定义一个Age字段，前端使用该标签时可给该属性传值
        public int Age { get; set; }
		
		//3、重写Process
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            // base.Process(context, output);
            output.TagName = "div";//对应的html标签
            output.Attributes.Add("id","007");//标签中的属性
            output.Attributes.Add("name","007");
            output.Attributes.Add("age",Age);
            output.PreContent.SetContent("扩展TagHelper输出的内容！");//当前标签的内容
        }
    }

3、在Index,cshtml中添加如下代码，此时会发现页面上并没有输出一个"扩展TagHelper输出的内容！"的div标签，原因是未在_ViewImports.cshtml中引入自定义TagHelper的命名空间。

 <h2>TagHelper</h2>
    <student age="18"></student>
    <hr />

4、找到_ViewImports.cshtml，并在其中添加"@addTagHelper *, RazorWebApp"代码，这段代码的意思是引入当前项目RazorWebApp中所有自定义的taghelper，完整代码如下：

@using RazorWebApp
@using RazorWebApp.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, RazorWebApp

5、重新启动项目，可看到自定义的TagHelper可正常输出内容。

四、局部视图(PartialView)的使用

1、在Views/Home目录下创建一个名为PartialView.cshtml视图文件，并向其中添加如下代码：

<h1>这是局部视图</h1>
<p style="color:deepskyblue">局部视图的内容</p>

2、在Index.cshtml中添加如下代码，引入上一步中创建的视图文件。

  @await Html.PartialAsync("PartialView") 

3、运行项目，可看到界面中输出PartialView.cshtml的内容，如下图：

五、视图组件（ViewComponent）的使用

1、在Utils目录下创建一个名为ViewComponentExtension的目录，并在其中创建一个名为StudentViewComponent类。

2、StudentViewComponent.cs的代码如下：

[ViewComponent(Name ="StudentList")] //1、自定义组件名，如果没有设置，则会取StudentViewComponent中的"Student"为组件名
    public class StudentViewComponent: ViewComponent  //2、继承ViewComponent类
    {
        /// <summary>
        /// 3、定义异步的InvokeAsync方法，它是返回组件内容的方法，这里的方法类似控制器中的方法
        /// </summary>
        /// <returns></returns>
        public async Task<IViewComponentResult> InvokeAsync()
        {
            ViewBag.UserName = "007";//用户名
            var list = await GetStudents();
            return View(list);
            //return View("~/Views/Shared/Components/StudentList/Default.cshtml",list);  //可自定义返回的cshtml路径
        }

        /// <summary>
        /// 4、获取学生数据
        /// </summary>
        /// <returns></returns>
        public Task<List<Student>> GetStudents()
        {
            return Task.Run(() =>
            {
                return new List<Student>()
                {
                    new Student(){ Id=1,Name="小明"},
                    new Student(){ Id=2,Name="小红"},
                    new Student(){ Id=3,Name="小兰"},
                    new Student(){ Id=4,Name="小李"},
                    new Student(){ Id=5,Name="小王"},
                    new Student(){ Id=6,Name="小刚"},
                };
            });
        }
    }

    /// <summary>
    /// 学生类
    /// </summary>
    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

3、在Views/Shared目录中创建Components/StudentList目录，并在该目录中创建一个名为Default.cshtml视图文件（这是视图组件默认"return view()"指向的视图文件地址）
4、Default.cshtml视图文件的代码如下：

@using RazorWebApp.Utils.ViewComponentExtension;
@model List<Student>

<h2>CurUser：@ViewBag.UserName</h2>

@foreach (var item in Model)
{
<h3>用户_@item.Id：@item.Name</h3>
}

5、在Index.cshtml中添加如下代码（引用自定义的视图组件）：

    <br />
    @await Component.InvokeAsync("StudentList")
    <hr />

6、运行项目，可看到浏览器中正确输出如下内容：

六、源码

https://gitee.com/wusuoweixgy/NET5Code/tree/master/RazorWebApp