asp.net core系列 42 Web 應(yīng)用 分部視圖

一.分部視圖

對(duì)于MVC 視圖和 Razor Pages 頁(yè)面驯杜,都有分部視圖功能伟骨。通常將 MVC 視圖和 Razor Pages 頁(yè)面統(tǒng)稱為“標(biāo)記文件”玩般,下面會(huì)常提到該名詞爆袍。使用分部視圖的優(yōu)勢(shì)包括:(1) 將大型標(biāo)記文件分解為更小的組件。(2) 減少跨標(biāo)記文件中坞琴,常見標(biāo)記內(nèi)容的重復(fù)哨查。

建議:(1)不應(yīng)使用分部視圖來維護(hù)常見布局元素,常見布局元素應(yīng)在 _Layout.cshtml 文件中指定剧辐,比如頁(yè)頭寒亥、頁(yè)尾。(2)當(dāng)需要呈現(xiàn)復(fù)雜邏輯或代碼執(zhí)行的應(yīng)該使用視圖組件荧关。

1.1 聲明分部視圖

分部視圖是在 Views 文件夾 (MVC) 或 Pages 文件夾 (Razor Pages) 中維護(hù)的 .cshtml 標(biāo)記文件溉奕。在 ASP.NET Core MVC 中,控制器的 ViewResult 能夠返回視圖或分部視圖忍啤。 在 ASP.NET Core 2.2 中 Razor Pages 的PageModel 可以返回 PartialViewResult分部視圖加勤。
 分部視圖不會(huì)運(yùn)行 _ViewStart.cshtml頁(yè),這涉及到布局以后再講同波。分部視圖的文件名通常以下劃線 _ 開頭鳄梅,沒有.cshtml.cs文件。

1.2 引用分部視圖

在標(biāo)記文件中未檩,有多種方法可引用分部視圖戴尸。 建議應(yīng)用程序使用以下異步呈現(xiàn)方法之一:(1) 分部標(biāo)記幫助程序。(2) 異步 HTML 幫助程序冤狡。 不建議使用同步HTML 幫助程序, 因?yàn)榭赡軙?huì)出現(xiàn)死鎖的情況孙蒙, 同步方法以后版本中會(huì)刪除项棠,這里不再介紹。
(1) 分部標(biāo)記幫助程序
分部標(biāo)記幫助程序會(huì)異步呈現(xiàn)內(nèi)容挎峦,并使用類似 HTML 的語法:

<partial name="_PartialName" />

當(dāng)存在文件擴(kuò)展名時(shí)香追,標(biāo)記幫助程序會(huì)引用分部視圖,該視圖必須與調(diào)用分部視圖的標(biāo)記文件位于同一文件夾中:

<partial name="_PartialName.cshtml" />

以下示例從應(yīng)用程序根目錄引用分部視圖坦胶。 以 (~/) 或 (/) 開頭的路徑翅阵,指代應(yīng)用程序根目錄:

 Razor 頁(yè)面CSHTML
        <partial name="~/Pages/Folder/_PartialName.cshtml" />
         <partial name="/Pages/Folder/_PartialName.cshtml" />
 MVC  CSHTML
        <partial name="~/Views/Folder/_PartialName.cshtml" />
        <partial name="/Views/Folder/_PartialName.cshtml" />
使用相對(duì)路徑的分部視圖
      <partial name="../Account/_PartialName.cshtml" />
(2) 異步 HTML 幫助程序

使用 HTML 幫助程序時(shí),最佳做法是使用 PartialAsync迁央,同步是使用Partial(不建議使用同步)。PartialAsync 返回包含在 Task<TResult> 中的 IHtmlContent 類型滥崩。通過@await來引用該方法岖圈。

Razor 頁(yè)面CSHTML
@await Html.PartialAsync("~/Pages/Folder/_PartialName.cshtml")
@await Html.PartialAsync("/Pages/Folder/_PartialName.cshtml")
mvc CSHTML
@await Html.PartialAsync("~/Views/Folder/_PartialName.cshtml")
@await Html.PartialAsync("/Views/Folder/_PartialName.cshtml")

也可以使用 RenderPartialAsync 呈現(xiàn)分部視圖。 此方法不返回 IHtmlContent钙皮。它將呈現(xiàn)的輸出蜂科,直接流式傳輸?shù)巾憫?yīng), 因此在某些情況下它可提供更好的性能。 因?yàn)樵摲椒ú环祷亟Y(jié)果短条,所以必須在 Razor 代碼塊內(nèi)調(diào)用它:

@{
    await Html.RenderPartialAsync("_AuthorPartial");
}
1.3 分部視圖發(fā)現(xiàn)

如果按名稱(無文件擴(kuò)展名)引用分部視圖导匣,則按所述順序搜索以下位置:

(1) Razor 頁(yè)面

1.當(dāng)前正在執(zhí)行頁(yè)面的文件夾
2.該頁(yè)面文件夾上方的目錄圖
3./Shared
4./Pages/Shared
5./Views/Shared

  1. MVC

1./Areas/<Area-Name>/Views/<Controller-Name>
2./Areas/<Area-Name>/Views/Shared
3./Views/Shared
4./Pages/Shared

1.4 通過分部視圖訪問數(shù)據(jù)

實(shí)例化分部視圖時(shí),它會(huì)獲得父視圖(主視圖)的 ViewData 字典的副本茸时。 在分部視圖內(nèi)贡定,對(duì)數(shù)據(jù)所做的更新不會(huì)保存到父視圖中。 對(duì)分部視圖中的 ViewData 更改可都,會(huì)在分部視圖返回時(shí)丟失缓待。

以下示例演示如何將 ViewDataDictionary(ViewData 字典)的實(shí)例傳遞給分部視圖:

@await Html.PartialAsync("_PartialName", customViewData)

還可將模型(實(shí)體對(duì)象)傳入分部視圖。 模型可以是自定義對(duì)象渠牲。

 @await Html.PartialAsync("_PartialName", model)

二. 演示

下面演示一個(gè)Razor的分部視圖(MVC的參考官網(wǎng)示例)旋炒。示例中Pages/ArticlesRP/ReadRP.cshtml是主視圖,Pages/Shared/_AuthorPartialRP.cshtml是第一個(gè)分部視圖签杈,傳入“作者”瘫镇。Pages/ArticlesRP/_ArticleSectionRP.cshtml 是第二個(gè)分部視圖,傳入ViewData字典和section模型二個(gè)參數(shù),這二個(gè)參數(shù)是PartialAsync的方法重載答姥。 三個(gè)文件結(jié)構(gòu)如下:


(1) 創(chuàng)建實(shí)體類

public class Article
    {
        public string Title { get; set; }

        public string AuthorName { get; set; }

        public string PublicationDate { get; set; }

        public List<ArticleSection> Sections { get; set; }
    }

    public class ArticleSection
    {
        public string Title { get; set; }
        public string Content { get; set; }
    }

(2)主視圖

public class ReadRPModel : PageModel
    {
        public Article Article { get; set; }

        public void OnGet()
        {
            Article = new Article()
            {
                Title = "來自 <共享分部視圖文件路徑> 的分部視圖",
                AuthorName = "Abraham Lincoln",
                PublicationDate= "1863 年 11 月 19 日中午 12:00:00",
                Sections = new List<ArticleSection>() {
                         new ArticleSection (){ Title="第一節(jié)索引", Content="八十七年前..." },
                         new ArticleSection (){ Title="第二節(jié)索引", Content="如今铣除,我們正在進(jìn)行一場(chǎng)偉大的內(nèi)戰(zhàn),考驗(yàn)著......" },
                         new ArticleSection (){ Title="第三節(jié)索引", Content="然而踢涌,從更廣泛的意義上說通孽,我們無法奉獻(xiàn)..." },
                }
            };
        }
    }
@page
@model ReadRPModel

<h2>@Model.Article.Title</h2>

@Model.Article.PublicationDate

@* 將作者名字傳到 Pages\Shared\_AuthorPartialRP.cshtml*@
<p>---------------------------------第一個(gè)分部視圖/Views/Shared/_AuthorPartial.cshtml</p>
@await Html.PartialAsync("../Shared/_AuthorPartialRP.cshtml", Model.Article.AuthorName)


<p></p>
@*  Loop over the Sections and pass in a section and additional ViewData to
    the strongly typed Pages\ArticlesRP\_ArticleSectionRP.cshtml partial view. *@
<p>---------------------------------第二個(gè)分部視圖/Views/Shared/_ArticleSection.cshtml</p>
@{
    var index = 0;

    @foreach (var section in Model.Article.Sections)
    {
        @await Html.PartialAsync("_ArticleSectionRP", section,
                                 new ViewDataDictionary(ViewData)
                                 {
                                     { "index", index }
                                 })

        index++;
    }
}
(3) 分部視圖 _AuthorPartialRP.cshtm
@* 將傳過來的string類型映射*@
@model string
<div>
    <h3>@Model</h3>
</div>
(4) 分部視圖 _ArticleSectionRP.cshtml
@using StudyRazorDemo.Models;

@* 將傳過來的對(duì)象映射到ArticleSection中*@
@model ArticleSection

<h3>@Model.Title Index: @ViewData["index"]</h3>
<div>
    @Model.Content
</div>
<p></p>

啟動(dòng)程序,運(yùn)行http://localhost:42921/ArticlesRP/ReadRP睁壁,顯示如下:

參考資料

ASP.NET Core 中的分部視圖

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末背苦,一起剝皮案震驚了整個(gè)濱河市互捌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌行剂,老刑警劉巖秕噪,帶你破解...
    沈念sama閱讀 219,490評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異厚宰,居然都是意外死亡腌巾,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門铲觉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來澈蝙,“玉大人,你說我怎么就攤上這事撵幽〉朴” “怎么了?”我有些...
    開封第一講書人閱讀 165,830評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵盐杂,是天一觀的道長(zhǎng)逗载。 經(jīng)常有香客問我,道長(zhǎng)链烈,這世上最難降的妖魔是什么厉斟? 我笑而不...
    開封第一講書人閱讀 58,957評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮强衡,結(jié)果婚禮上擦秽,老公的妹妹穿的比我還像新娘。我一直安慰自己食侮,他們只是感情好号涯,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锯七,像睡著了一般链快。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上眉尸,一...
    開封第一講書人閱讀 51,754評(píng)論 1 307
  • 那天域蜗,我揣著相機(jī)與錄音,去河邊找鬼噪猾。 笑死霉祸,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的袱蜡。 我是一名探鬼主播丝蹭,決...
    沈念sama閱讀 40,464評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼坪蚁!你這毒婦竟也來了奔穿?” 一聲冷哼從身側(cè)響起镜沽,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎贱田,沒想到半個(gè)月后缅茉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡男摧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3 338
  • 正文 我和宋清朗相戀三年蔬墩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耗拓。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡拇颅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出乔询,到底是詐尸還是另有隱情蔬蕊,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評(píng)論 5 346
  • 正文 年R本政府宣布哥谷,位于F島的核電站,受9級(jí)特大地震影響麻献,放射性物質(zhì)發(fā)生泄漏们妥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3 331
  • 文/蒙蒙 一勉吻、第九天 我趴在偏房一處隱蔽的房頂上張望监婶。 院中可真熱鬧,春花似錦齿桃、人聲如沸惑惶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽带污。三九已至,卻和暖如春香到,著一層夾襖步出監(jiān)牢的瞬間鱼冀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工悠就, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留千绪,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3 373
  • 正文 我出身青樓梗脾,卻偏偏與公主長(zhǎng)得像荸型,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子炸茧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容