Asp.Net Core MVC 部分視圖與視圖組件

用部分視圖來顯示當(dāng)前日期

??部分視圖與普通視圖沒太大區(qū)別,它可以將重復(fù)使用的HTML內(nèi)容結(jié)合起來,可以單獨使用。一般命名是在名稱前面加下劃線,放在/Views/Shared 目錄下。

  • 下面使用部分視圖來顯示日期。

??Test控制器

    [Route("[controller]/[action]")]
    public class TestController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }
    }

??Shared目錄下添加_showDate.cshtml。

<div style="padding:25px 20px;border:2px solid yellow;background-color:lightgoldenrodyellow">
    @DateTime.Today.ToString("yyyy'年'M'月'd'日',dddd")
</div>

??在Test目錄下添加Default.cshtml。引用部分視圖可調(diào)用PartialAsync方法,并指定名稱。也可先使用@addTagHelper指令導(dǎo)入標(biāo)記幫助器類型,再使用標(biāo)記幫助器<partial>元素來指定引用部分視圖。

@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<html>
<body>
    <div>
        <h4>示例程序</h4>
    </div>
    <div>
        @await Html.PartialAsync("_showDate")
        <partial name="_showDate"/>
    </div>
</body>
</html>

使用視圖組件

??視圖組件(View Component)與部分視圖在功能上比較相似,但視圖組件更靈活。與控制器相似,視圖組件可以實現(xiàn)視圖也代碼分離,并且一個視圖組件可以返回多個視圖。

??視圖組件有兩種實現(xiàn)方法:
??(1)直接從ViewComponent類派生,并包括Invoke或InvokeAsync方法。
??(2)自定義類,需要在類上應(yīng)用ViewComponent特性,并包括Invoke或InvokeAsync方法。

??InvokeInvokeAsync方法是約定方法,允許定義方法參數(shù),返回值類型需要實現(xiàn)IViewComponentResult接口。框架默認實現(xiàn)了ViewViewComponentResulContentViewComponentResult。

??對于Razor文檔,在需要呈現(xiàn)視圖組件的地方調(diào)用Component.InvokeAsync方法。

??視圖組件會在以下路徑查找視圖:
??(1)共享組件:默認位于 /Views/Shared/Components/<視圖組件名稱>/<視圖>.cshtml。共享視圖組件可以在應(yīng)用項目范圍內(nèi)訪問。
??(2)非共享組件:默認位于 /Views/<控制器名稱>/Components/<視圖組件名稱>/<視圖>.cshtml。非共享視圖組件只可在當(dāng)前控制器中訪問。

??定義視圖組件類Test。視圖組件名可帶“ViewComponent”后綴,必須包含Invoke方法。

    public class TestViewComponent : ViewComponent
    {
        IHostingEnvironment m_env = null;
        public TestViewComponent(IHostingEnvironment env)
        {
            m_env = env;
        }
        public IViewComponentResult Invoke()
        {
            return View("_showInfo", m_env);
        }
    }

??定義Demo控制器。

    public class DemoController : Controller
    {
        public ActionResult Start()
        {
            return View();
        }
    }

??在Shared目錄下新建Components目錄,Components下新建Test視圖組件同名目錄,添加_showInfo.cshtml。

@model Microsoft.AspNetCore.Hosting.IHostingEnvironment

<div style="color:red;font-size:18px">
    <p>
        應(yīng)用程序名稱:@Model.ApplicationName
    </p>
    <p>
        當(dāng)前運行環(huán)境:@Model.EnvironmentName
    </p>
</div>

??Views下建Demo目錄,添加Start.cshtml。

<html>
<body>
    <div>
        <h1>應(yīng)用主頁</h1>
    </div>
    <hr/>
    <div>
        <h3>以下為視圖組件:</h3>
        <h3>以下為視圖組件:</h3>
        @*第一種方法*@
        @await Component.InvokeAsync("Test")
        @*第二種方法*@
        @await Component.InvokeAsync(typeof(Demo.TestViewComponent))

        @*以下代碼不可取
        @{
            await Component.InvokeAsync("Test");
        }*@
    </div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容