亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

View Components as Tag Helpers,離在線模板編輯又進一步

發布時間:2020-07-19 17:40:18 來源:網絡 閱讀:312 作者:zddnd 欄目:開發技術

用方法

1,定義類派生自ViewComponent類

2,增加Task<IViewComponentResult> InvokeAsync方法

3,在InovkeAsync方法中增加邏輯,并返回視圖結果

4,在類上增加ViewComponent特性,可以標注組件名稱:[ViewComponent(Name="組件名稱")]。這一步不是必需的。

具體實例:

1
2
3
4
5
6
7
8
[ViewComponent(Name="templatetest")]
public class TemplateViewComponent:ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        return View("~/Views/test.cshtml");
    }
}  

另外,我們可以給InvokeAsync方法增加參數,在調用組件的時候,可以傳遞數據,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[ViewComponent(Name ="Pager")]
 public class Pager: ViewComponent
 {
     public Task<IViewComponentResult> InvokeAsync(int page,int pagesize,int count)
     {
         ViewBag.PageIndex = page;
         ViewBag.PageSize = pagesize;
         int totalPage = count / pagesize;
 
         if (count%pagesize>0)
         {
             totalPage += 1;
         }
 
         ViewBag.PageTotal = totalPage;
         ViewBag.RecordCount = count;
         return Task.FromResult<IViewComponentResult>(View("~/Views/ViewComponets/Pager.cshtml"));
     }
 }

視圖組件創建好后,在視圖上使用以下方法調用:

@await Component.InvokeAsync("組件名稱",參數對象)或者@await Component.InvokeAsync(typeof(組件),參數對象)

 View Components as Tag Helpers

在asp.net core mvc 1.1版本中,又增加了一個新的特性,就是可以使用標簽方式調用視圖組件,類似下列效果:

<vc:組件名稱 param1="" param2=""></vc:組件名稱>

這有什么好處?Component.Invoke是在視圖中使用C#代碼執行視圖組件,而標簽方式更貼近前端技術,對前端開發人員來說更友好。另外一個就是我們實現一個在線模板編輯器也更加的方便。

要實現一個在線模板編輯器我們可以分幾步走:

第一步:先實現簡單修改視圖代碼,可以帶到我們需要的效果

第二步:提供在線的html代碼編輯器,直接在線編輯html代碼

第三步:提供組件配置窗口,可以配置對應的參數

第四步:可視化的頁面編輯

以一個企業展示站點作為場景,來說一下實現思路:

一般一個企業展示網站主要用于企業信息宣傳使用,表現形式就是文章,網站首頁會包含很多內容板塊,每個板塊有自己的一些特性,比如展示條數,內容來源,滾動顯示等。如下內容設置View Components as Tag Helpers,離在線模板編輯又進一步

 第一步:先實現簡單修改視圖代碼,可以帶到我們需要的效果

我們可以在控制器中根據需要獲取所需要的數據,然后直接綁定到視圖上,但是如果客戶要求有變動,比如展示條數的變動,我們只能是修改代碼,重新發布,比較麻煩。所以我們可以把這些內容塊做成一個一個的組件,然后在視圖上直接調用,假設我們定義組件叫ContentBlockViewComponent,具體邏輯如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[ViewComponent(Name="contentblock")]
    public class ContentBlockViewComponent:ViewComponent
    {
        /// <summary>
        /// 內容展示組件
        /// </summary>
        /// <param name="showCount">顯示條數</param>
        /// <param name="source">信息來源板塊</param>
        /// <returns></returns>
        public async Task<IViewComponentResult> InvokeAsync(int showCount,int source)
        {
            //TODO:根據參數從指定板塊獲取數據
            return View("~/Views/ContentBlock.cshtml");   
        }
    }

  

 然后我們在首頁視圖上使用<vc:contentblock showcount="6" source="1"/>展示內容。當參數發生改變時,我們可以直接在視圖上修改組件調用方法即可。到此我們實現了第一步:簡單修改代碼實現想要的效果。

第二步:提供在線的html代碼編輯器,直接在線編輯html代碼

這一步其實也很好實現,直接在系統中增加一個在線html編輯器(使用codemirror),直接通過讀取視圖文件內容,展示到前臺頁面上,根據需要修改代碼并提交保存。實現到這一步,對于最終用戶來說,還是需要掌握一定的html知識,所以一般比較難,只能提供給開發使用。

第三步:提供組件配置窗口,可以配置對應的參數

codemirror中有一個Tag Matcher組件,我們可以以這個為思路,實現一個標簽選中事件,讀取當前標簽的一些信息,并在配置窗口中顯示對應信息,這個的還沒具體實現。如果這部分可以實現,應該一小部分用戶就可以自己操作了。

第四步:可視化的頁面編輯

這是終極目標,我的思路是直接在頁面上呈現頁面內容,可以在視圖組件輸出視圖上增加一個根標簽,如

<div viewcomponent="組件名稱">其他視圖內容</div>

然后在頁面上使用jquery給帶有viewcomponet屬性的標簽增加mouseover事件,當鼠標移動到div上后,顯示一個設置按鈕,點擊按鈕彈出類似第三部的配置窗口,在配置窗口中填寫參數,并保存。提交保存的時候,需要把頁面的名稱及組件的名稱傳遞到服務器端,服務器端接收后,首先找到對應的view文件,然后讀取內容,再進行html分析(可以使用htmlagilitypack),找到對應的視圖組件標簽,進行參數替換,最后保存文件內容。到此完成一個配置的過程。


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

岗巴县| 本溪| 青海省| 甘德县| 濮阳县| 镇安县| 平阳县| 怀远县| 通河县| 西乌珠穆沁旗| 旬邑县| 同德县| 石棉县| 讷河市| 沁水县| 湘乡市| 长武县| 长宁区| 松阳县| 湄潭县| 石泉县| 板桥市| 晋城| 呼和浩特市| 江山市| 珲春市| 射洪县| 平江县| 霞浦县| 舟山市| 沂水县| 台安县| 浪卡子县| 渝北区| 青浦区| 库尔勒市| 连南| 嘉善县| 屯昌县| 兴安盟| 神农架林区|