实例程序的界面效果如下图所示：
在表单中的搜索条件有姓名，学号，成绩。他们在一行中按照水平三等分排列。
在cshtml中用html实现上述表单效果的的代码如下：
1 <form class="form-horizontal" role="form">
2 <div class="row">
3 <div class="form-group col-md-4">
4 <label for="name" class="col-md-2 control-label">姓名</label>
5 <div class="col-md-10">
6 <input type="text" class="form-control" id="name" placeholder="请输姓名">
7 </div>
8 </div>
9 <div class="form-group col-md-4">
10 <label for="name" class="col-md-2 control-label">学号</label>
11 <div class="col-md-10">
12 <input type="text" class="form-control" id="name" placeholder="请输学号">
13 </div>
14 </div>
15 <div class="form-group col-md-4">
16 <label for="name" class="col-md-2 control-label">成绩</label>
17 <div class="col-md-10">
18 <input type="text" class="form-control" id="name" placeholder="请输成绩">
19 </div>
20 </div>
21 </div>
22 <button type="submit" class="btn btn-default">搜索</button>
23 </form>
view code
通过观察上述代码发现，搜索条件按照水平三等分排列会产生如下图红线标记的冗余代码：
通过截图可以看出，是否可以把这个div块封装成一个控件，这样就不用重复写样式属性，在使用时就只给lable,input控件根据实际情况赋予其相应的属性。
在.net core中视图组件(viewcomponent)可以完成这一功能。视图组件类似于部分视图，但是它们更强大。视图组件不使用模型绑定，只依赖于调用时提供的数据。
微软的官方帮助文档地址为：
创建视图组件(viewcomponent)
1.在解决方案根目录下创建viewcomponents文件夹，
在viewcomponents文件夹下在添加子文件夹inputlabeltextbox，
inputlabeltextbox文件夹下分别添加l类inputlabeltextboxviewcomponent.cs和inputlabeltextboxviewmodel.cs 结果如下图所示:
inputlabeltextboxviewcomponent.cs为视图组件类
1 public class inputlabeltextboxviewcomponent : viewcomponent
2 {
3 public iviewcomponentresult invoke(string labeltext, string inputid,
4 string placehodler, string viewname)
5 {
6 //没有指定视图名称，默认使用default.cshtml
7 if (string.isnullorempty(viewname))
8 {
9 viewname = "default";
10 }
11 var fortmatdataviewmodel = new inputlabeltextboxviewmodel(labeltext, inputid, placehodler, viewname);
12 return view(viewname, fortmatdataviewmodel);
13 }
14 }
view code
inputlabeltextboxviewmodel.cs为视图组件中所用到的属性类，
1 public class inputlabeltextboxviewmodel
2 {
3 /// <summary>
4 /// label控件的文本
5 /// </summary>
6 public string labeltext { get; set; }
7
8 /// <summary>
9 /// input控件的id
10 /// </summary>
11 public string inputid { get; set; }
12
13 /// <summary>
14 /// input控件的水印
15 /// </summary>
16 public string placeholder { get; set; }
17
18 /// <summary>
19 /// 视图名称
20 /// </summary>
21 public string viewname { get; set; }
22
23 public inputlabeltextboxviewmodel(string labeltext, string inputid, string placeholder, string viewname)
24 {
25 labeltext = string.isnullorempty(labeltext) ? "" : labeltext;
26 inputid = string.isnullorempty(inputid) ? "" : inputid;
27 placeholder = string.isnullorempty(placeholder) ? "" : placeholder;
28 viewname = string.isnullorempty(viewname) ? "" : viewname;
29 }
30 }
view code
2.在解决方案的views文件夹下的shared文件夹中添加components子文件夹，
在components文件夹下在添加其子文件夹inputlabeltextbox，
在文件夹中添加default.cshtml视图，结果如下图所示：
default.cshtml就是inputlabeltextboxviewcomponent.cs在界面上默认对应的视图。
1 @{
2 viewdata["title"] = "about";
3 }
4 <!--引入命名空间-->
5 @using testviewcomponent.viewcomponents
6 <h2>分布视图实例：</h2>
7 <form class="form-horizontal" role="form">
8 <div class="row">
9 <!--使用类型创建-->
10 @await component.invokeasync(typeof(inputlabeltextboxviewcomponent), new {
11 labeltext = "姓名",
12 inputid = "inputname",
13 placeholder = "请输入姓名...",
14 })
15 <!--inputlabeltextbox为inputlabeltextboxviewcomponent.cs去掉viewcomponent后的名字-->
16 @await component.invokeasync("inputlabeltextbox", new
17 {
18 labeltext = "姓名1",
19 inputid = "inputname1",
20 placeholder = "请输入姓名...",
21 })
22 </div>
23 </form>
view code
运行后的效果如图所示：
微软官方文档提供了调用视图组建两个方法，已经在上述代码中加以注释说明。
3.inputlabeltextboxviewcomponent对应多个cshtml页面
在上述例子中，inputlabeltextboxviewcomponent默认对应于default.cshtml,现在又想创建第二个视图对应于inputlabeltextboxviewcomponent该怎么处理？
首先在inputlabeltextbox文件夹下创建defaultone.cshtml页面。
然后在调用视图组建时，把inputlabeltextboxviewmodel的viewname属性的值赋成defaultone，这样在页面用引用的控件就对应于defaultone.cshtml。