.Net Core使用视图组件(ViewComponent)封装表单文本框控件

实例程序的界面效果如下图所示：

在表单中的搜索条件有姓名，学号，成绩。他们在一行中按照水平三等分排列。

在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)可以完成这一功能。视图组件类似于部分视图，但是它们更强大。视图组件不使用模型绑定，只依赖于调用时提供的数据。

微软的官方帮助文档地址为：https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-2.2

创建视图组件(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 @using TestViewComponent.ViewComponents
2 @model InputLabelTextBoxViewModel
3 
4 <div class="form-group col-md-4">
5     <label for="name" class="col-md-2 control-label">@Model.LabelText</label>
6     <div class="col-md-10">
7         <input type="text" class="form-control" id="@Model.InputId" placeholder="@Model.Placeholder">
8     </div>
9 </div>

View Code

在About.cshtml页面中引用控件。

 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>