传奇一条龙网站程序,黑暗侵袭下载,改换门闾
在表单中的搜索条件有姓名,学号,成绩。他们在一行中按照水平三等分排列。
在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>
通过观察上述代码发现,搜索条件按照水平三等分排列会产生如下图红线标记的冗余代码:
通过截图可以看出,是否可以把这个div块封装成一个控件,这样就不用重复写样式属性,在使用时就只给lable,input控件根据实际情况赋予其相应的属性。
在.net core中视图组件(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 }
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 }
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>
运行后的效果如图所示:
微软官方文档提供了调用视图组建两个方法,已经在上述代码中加以注释说明。
3.inputlabeltextboxviewcomponent对应多个cshtml页面
在上述例子中,inputlabeltextboxviewcomponent默认对应于default.cshtml,现在又想创建第二个视图对应于inputlabeltextboxviewcomponent该怎么处理?
首先在inputlabeltextbox文件夹下创建defaultone.cshtml页面。
然后在调用视图组建时,把inputlabeltextboxviewmodel的viewname属性的值赋成defaultone,这样在页面用引用的控件就对应于defaultone.cshtml。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Net Core Web Api项目与在NginX下发布的方法
asp.net core3.1 引用的元包dll版本兼容性问题解决方案
IdentityServer4实现.Net Core API接口权限认证(快速入门)
ASP.NET Core MVC通过IViewLocationExpander扩展视图搜索路径的实现
网友评论