.Net Core使用視圖組件(ViewComponent)封裝表單文本框控件

實例程序的界面效果如下圖所示：

在表單中的搜索條件有姓名，學號，成績。他們在一行中按照水平三等分排列。

在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