用部分視圖來顯示當(dāng)前日期
??部分視圖與普通視圖沒太大區(qū)別最筒,它可以將重復(fù)使用的HTML內(nèi)容結(jié)合起來晦鞋,可以單獨(dú)使用谋币。一般命名是在名稱前面加下劃線,放在/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)與部分視圖在功能上比較相似捡多,但視圖組件更靈活蓖康。與控制器相似,視圖組件可以實(shí)現(xiàn)視圖也代碼分離垒手,并且一個(gè)視圖組件可以返回多個(gè)視圖蒜焊。
??視圖組件有兩種實(shí)現(xiàn)方法:
??(1)直接從ViewComponent
類派生,并包括Invoke或InvokeAsync方法科贬。
??(2)自定義類泳梆,需要在類上應(yīng)用ViewComponent特性
,并包括Invoke或InvokeAsync方法榜掌。
??Invoke
或InvokeAsync
方法是約定方法优妙,允許定義方法參數(shù),返回值類型需要實(shí)現(xiàn)IViewComponentResult
接口憎账√着穑框架默認(rèn)實(shí)現(xiàn)了ViewViewComponentResul
與ContentViewComponentResult
。
??對(duì)于Razor文檔胞皱,在需要呈現(xiàn)視圖組件的地方調(diào)用Component.InvokeAsync
方法邪意。
??視圖組件會(huì)在以下路徑查找視圖:
??(1)共享組件:默認(rèn)位于 /Views/Shared/Components/<視圖組件名稱>/<視圖>.cshtml。共享視圖組件可以在應(yīng)用項(xiàng)目范圍內(nèi)訪問反砌。
??(2)非共享組件:默認(rèn)位于 /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)前運(yùn)行環(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>