欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-25 22:58:20
实例程序的界面效果如下图所示: 在表单中的搜索条件有姓名,学号,成绩。他们在一行中按照水平三等分排列。 在cshtml中用html实现上述表单效果的的代码如下: 1
2
3

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

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

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

在cshtml中用html实现上述表单效果的的代码如下:

.Net Core使用视图组件(ViewComponent)封装表单文本框控件
 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

 通过观察上述代码发现,搜索条件按照水平三等分排列会产生如下图红线标记的冗余代码:

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

通过截图可以看出,是否可以把这个div块封装成一个控件,这样就不用重复写样式属性,在使用时就只给lable,input控件根据实际情况赋予其相应的属性。

在.net core中视图组件(viewcomponent)可以完成这一功能。视图组件类似于部分视图,但是它们更强大。视图组件不使用模型绑定,只依赖于调用时提供的数据。

微软的官方帮助文档地址为:

创建视图组件(viewcomponent)

1.在解决方案根目录下创建viewcomponents文件夹,

   在viewcomponents文件夹下在添加子文件夹inputlabeltextbox,

   inputlabeltextbox文件夹下分别添加l类inputlabeltextboxviewcomponent.cs和inputlabeltextboxviewmodel.cs 结果如下图所示:

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

 

inputlabeltextboxviewcomponent.cs为视图组件类

.Net Core使用视图组件(ViewComponent)封装表单文本框控件
 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为视图组件中所用到的属性类,

 

.Net Core使用视图组件(ViewComponent)封装表单文本框控件
 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视图,结果如下图所示:

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

default.cshtml就是inputlabeltextboxviewcomponent.cs在界面上默认对应的视图。

.Net Core使用视图组件(ViewComponent)封装表单文本框控件
 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

 运行后的效果如图所示:

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

微软官方文档提供了调用视图组建两个方法,已经在上述代码中加以注释说明。

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

3.inputlabeltextboxviewcomponent对应多个cshtml页面

在上述例子中,inputlabeltextboxviewcomponent默认对应于default.cshtml,现在又想创建第二个视图对应于inputlabeltextboxviewcomponent该怎么处理?

首先在inputlabeltextbox文件夹下创建defaultone.cshtml页面。

然后在调用视图组建时,把inputlabeltextboxviewmodel的viewname属性的值赋成defaultone,这样在页面用引用的控件就对应于defaultone.cshtml。