Asp.Net Core MVC 部分视图与视图组件

用部分视图来显示当前日期

  部分视图与普通视图没太大区别，它可以将重复使用的HTML内容结合起来，可以单独使用。一般命名是在名称前面加下划线，放在/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。引用部分视图可调用PartialAsync方法，并指定名称。也可先使用@addTagHelper指令导入标记帮助器类型，再使用标记帮助器<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）与部分视图在功能上比较相似，但视图组件更灵活。与控制器相似，视图组件可以实现视图也代码分离，并且一个视图组件可以返回多个视图。

  视图组件有两种实现方法：
  （1）直接从ViewComponent类派生，并包括Invoke或InvokeAsync方法。
  （2）自定义类，需要在类上应用ViewComponent特性，并包括Invoke或InvokeAsync方法。

  Invoke或InvokeAsync方法是约定方法，允许定义方法参数，返回值类型需要实现IViewComponentResult接口。框架默认实现了ViewViewComponentResul与ContentViewComponentResult。

  对于Razor文档，在需要呈现视图组件的地方调用Component.InvokeAsync方法。

  视图组件会在以下路径查找视图：
  （1）共享组件：默认位于 /Views/Shared/Components/<视图组件名称>/<视图>.cshtml。共享视图组件可以在应用项目范围内访问。
  （2）非共享组件：默认位于 /Views/<控制器名称>/Components/<视图组件名称>/<视图>.cshtml。非共享视图组件只可在当前控制器中访问。

  • 例

  定义视图组件类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>
        应用程序名称：@Model.ApplicationName
    </p>
    <p>
        当前运行环境：@Model.EnvironmentName
    </p>
</div>

  Views下建Demo目录，添加Start.cshtml。

<html>
<body>
    <div>
        <h1>应用主页</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>
posted @ 2021-01-06 15:30  一纸年华  阅读(13)  评论(0)  编辑  收藏  举报  来源