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

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

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

 <form class="form-horizontal" role="form">
<div class="row">
<div class="form-group col-md-4">
<label for="name" class="col-md-2 control-label">姓名</label>
<div class="col-md-10">
<input type="text" class="form-control" id="name" placeholder="请输姓名">
</div>
</div>
<div class="form-group col-md-4">
<label for="name" class="col-md-2 control-label">学号</label>
<div class="col-md-10">
<input type="text" class="form-control" id="name" placeholder="请输学号">
</div>
</div>
<div class="form-group col-md-4">
<label for="name" class="col-md-2 control-label">成绩</label>
<div class="col-md-10">
<input type="text" class="form-control" id="name" placeholder="请输成绩">
</div>
</div>
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>

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

通过截图可以看出,是否可以把这个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为视图组件类

     public class InputLabelTextBoxViewComponent : ViewComponent
{
public IViewComponentResult Invoke(string labelText, string inputId,
string placehodler, string viewName)
{
//没有指定视图名称,默认使用Default.cshtml
if (string.IsNullOrEmpty(viewName))
{
viewName = "Default";
}
var fortmatDataViewModel = new InputLabelTextBoxViewModel(labelText, inputId, placehodler, viewName);
return View(viewName, fortmatDataViewModel);
}
}

InputLabelTextBoxViewModel.cs为视图组件中所用到的属性类,

     public class InputLabelTextBoxViewModel
{
/// <summary>
/// Label控件的文本
/// </summary>
public string LabelText { get; set; } /// <summary>
/// Input控件的Id
/// </summary>
public string InputId { get; set; } /// <summary>
/// Input控件的水印
/// </summary>
public string Placeholder { get; set; } /// <summary>
/// 视图名称
/// </summary>
public string ViewName { get; set; } public InputLabelTextBoxViewModel(string labelText, string inputId, string placeholder, string viewName)
{
LabelText = string.IsNullOrEmpty(labelText) ? "" : labelText;
InputId = string.IsNullOrEmpty(inputId) ? "" : inputId;
Placeholder = string.IsNullOrEmpty(placeholder) ? "" : placeholder;
ViewName = string.IsNullOrEmpty(viewName) ? "" : viewName;
}
}

2.在解决方案的Views文件夹下的Shared文件夹中添加Components子文件夹,

   在Components文件夹下在添加其子文件夹InputLabelTextBox,

   在文件夹中添加Default.cshtml视图,结果如下图所示:

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

 @using TestViewComponent.ViewComponents
@model InputLabelTextBoxViewModel <div class="form-group col-md-4">
<label for="name" class="col-md-2 control-label">@Model.LabelText</label>
<div class="col-md-10">
<input type="text" class="form-control" id="@Model.InputId" placeholder="@Model.Placeholder">
</div>
</div>

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

 @{
ViewData["Title"] = "About";
}
<!--引入命名空间-->
@using TestViewComponent.ViewComponents
<h2>分布视图实例:</h2>
<form class="form-horizontal" role="form">
<div class="row">
<!--使用类型创建-->
@await Component.InvokeAsync(typeof(InputLabelTextBoxViewComponent), new {
LabelText = "姓名",
InputId = "InputName",
Placeholder = "请输入姓名...",
})
<!--InputLabelTextBox为InputLabelTextBoxViewComponent.cs去掉ViewComponent后的名字-->
@await Component.InvokeAsync("InputLabelTextBox", new
{
LabelText = "姓名1",
InputId = "InputName1",
Placeholder = "请输入姓名...",
})
</div>
</form>

运行后的效果如图所示:

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

3.InputLabelTextBoxViewComponent对应多个cshtml页面

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

首先在InputLabelTextBox文件夹下创建DefaultOne.cshtml页面。

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

源代码下载地址 : https://files-cdn.cnblogs.com/files/fengye310/DotNetCoreDemo.zip

.Net Core使用视图组件(ViewComponent)封装表单文本框控件的更多相关文章

  1. SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

  2. 深入浅出ExtJS 第四章 表单与输入控件

    4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...

  3. 『Asp.Net 组件』第一个 Asp.Net 服务器组件:自己的文本框控件

    代码: using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace DemoWebControl ...

  4. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  5. 响应式的账号登录界面模板完整代码,内置form表单和js控件

    响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...

  6. 表单元素(控件)不可见,你用visibility还是display?(转)

    属性大比拼:visibility和display的介绍 今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现.我们先来看下v ...

  7. ASP.NET CORE 自定义视图组件(ViewComponent)注意事项

    *红色字体为固定命名,蓝色为一般命名规则,黄色为ASP.NET CORE 默认查找文件名 概要:1.简单ViewComponent的用法 2.ViewComponent控制器返回值  3.注意事项 1 ...

  8. [Swift通天遁地]二、表格表单-(15)自定义表单文本框内容的格式

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. 微信小程序实战:表单与选择控件的结合

    先上代码. login.wxml <mp-toptips msg="{{error}}" type="error" show="{{error} ...

随机推荐

  1. vue+element-ui实现表格checkbox单选

    公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...

  2. Qt QLabel QTextBrowser 实现网址链接

    勾选属性: 并且编辑网址链接: QLabel--点击text属性的...:  QTextBrowser--双击控件

  3. linux----------CentOS的一些除了yum安装以外的基本操作命令。

    1.tail -n 5 文件名字    : 查看大型文件的后五行内容      head -n 5 文件名字 : 查看文件的前五行内容   2.ls -lh          可以查看文件大小转换以后 ...

  4. bfs记录路径,蓝桥杯真题

    题意:在01矩阵中,找到一条从入口到终点的最短路径,并且打印这条路径. 题目链接:http://lx.lanqiao.cn/problem.page?gpid=T291 #include<ios ...

  5. eclipse 编码改成utf-8

    Eclipse的编码格式是系统默认 修改为utf-8,点击Apply and Close 然后项目的编码格式会统一默认utf-8 当然也可以选择other,改成GBK.

  6. JQ得到当前登录城市和天气

    $(function () { findWeather(); }); function findWeather() { var cityUrl = 'http://int.dpool.sina.com ...

  7. elasticsearch开机启动脚本

    最近搭建了一个elasticsearch服务,其中机器重启而ES服务没有重启是问题,就有下面的脚本 #!/bin/sh #chkconfig: #description: es export JAVA ...

  8. 【数据结构】算法 LinkList (Merge Two Sorted Lists)

    合并2个有序链表 list A, list B, Solution: 对A,B 表按序读取数据,比较大小后插入新链表C. 由于两个输入链表的长度可能不同,所以最终会有一个链表先完成插入所有元素,则直接 ...

  9. Can't find msguniq. Make sure you have GNU gettext tools 0.15 or newer installed

    Python Django生成国际化和本地化.po文件步骤1.在settings文件中,添加一下内容: LANGUAGES = ( ('zh-hans', ugettext_lazy('Simplif ...

  10. SSM(Spring4.x.x+SpringMVC4.x.x+Mybatis3.4.x)框架整合

    本文是参考SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)修改而来的 一.环境 1. Myeclipse2016 2. Mysql 二.具体步骤 1. 整合Spring和 ...