用部分視圖來顯示當(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方法。
??Invoke或InvokeAsync方法是約定方法,允許定義方法參數(shù),返回值類型需要實現(xiàn)IViewComponentResult接口。框架默認實現(xiàn)了ViewViewComponentResul與ContentViewComponentResult。
??對于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>