小白学 asp net core --- 视图View

前言:View视图,MVC架构中的展现层,本文主要介绍了视图的默认文件存放路径、_ViewStart.cshtml和_ViewImports.cshtml、部分视图和视图组件

一、Controller控制器对应的View文件寻找路径

工程目录结构

1、Controller返回的结果要放入view中进行渲染,需要现在工程目录下创建如下的文件路径

Views/控制器名,例如HomeController访问路径是 /Views/Home

2、先看下原先Controller代码

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using myfirstweb.models;
using myfirstweb.Services;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace myfirstweb.Controllers
{
    public class HomeController : Controller
    {


        /*默认的控制器*/
        // GET: /<controller>/
        //public IActionResult Index()
        //{
        //    return View();
        //}

        //新建属性
        public IRepository<Student> _repository { get; }

        //新建构造函数,从ioc容器引入服务
        public HomeController(IRepository<Student> repository)
        {
            _repository = repository;
        }

        public IActionResult Mytest()
        {
            var st = new Student
            {
                Id = 10,
                Firstname = "lin",
                Lastname = "ys"
            };  // 使用model
      
            //return "setting by lys";
            //return new ObjectResult(st); //返回的是一个json
           
            return View(st);  //寻找视图,默认寻找路径为 /Views/Home/Mytest.cshtml
        }

        public IActionResult Myservice()
        {
            var list = _repository.GetAll();
            return View(list);     //寻找视图,默认路径是 /Views/Home/Myservice.cshtml
        }

    }
}

当HomeController对应的方法return view的时候,会去调用默认的视图文件,例如 Mytest方法return view,会去寻找 Views/Home/Mytest.cshtml;如果Myservice方法return view,会去寻找 Views/Home/Myservice.cshtml

( 如果Controller名字为TaskController,view为People,则寻找的视图文件路径是 /VIews/Task/People.cshtml。总之寻找的路径是 /VIews/Controller名字/view名字.cshtml)

 

3、现在我们来看看对应的view

Myservice.cshtml

@model IEnumerable<myfirstweb.models.Student>  //@model声明controller传入的数据类型,传入的是一个可枚举类型

<html>
<head>
    <h1>this view page by lys</h1>
</head>
<body>
    <h2>
        @foreach (var st in Model)   //Model代表从controller传入的数据
    {
        <ul>@st.Id</ul>            
        <ul>@st.Firstname</ul>    //前面如果带有html的元素,使用Model的元素之前必须先用@引用
        <ul>@st.Lastname</ul>
}
    </h2>
   
</body>
</html>

Mytest.cshtml

@model myfirstweb.models.Student


<html>
<head>
    <h1>this view page by lys</h1>
</head>
<body>
    <h2>@Model.Id</h2>
    <h3>@Model.Firstname</h3>
       
    <h3>@this.Model.Lastname</h3>
    <h4></h4>
</body>
</html>

二、两个特殊的view文件:_ViewStart.cshtml和_ViewImports.cshtml

1)在 Views下新建“MVC视图起始页”,默认文件名为_ViewStart.cshtml,以下为_ViewStart.cshtml默认内容:

@{
    Layout = "_Layout";  
}

Views目录下的所有视图在开始执行之前,需要先执行_ViewStart.cshtml,而Layout = "_Layout" 代表所有的视图的Layout是_Layout.cshtml文件。所有的视图共用一个Layout。既然是共用的视图文件,可以在Views目录下创建文件夹Shared,然后在Shared文件夹下创建"视图布局页面"_Layout.cshtml内容如下:

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        
    </head>

    <body>
        <div>
            @RenderBody()
        </div>

        <div>
            @RenderSection("fotter",false)
        </div>

    </body>
</html>

这是一个公共的布局:@RenderBody指渲染特定的目标视图;@RenderSection("fotter",false)是我手工加上去的,表示执行片段,片段名为fotter,而且false并不是每一个视图都需要执行这个片段。下面以Create.cshtml页面为例:

@model myfirstweb.ViewModels.StudentViewModel

@{
    ViewBag.Title = "创建页面";

}
@section fotter{
    <div>------底部下划线------</div>
}


<body>
    <div>
        <form method="post" action="">
            <div>
                <label asp-for="Firstname"></label>
                <input asp-for="Firstname" />
                <span asp-validation-for="Firstname"></span>
            </div>

            <div>
                <label asp-for="Lastname"></label>
                <input asp-for="Lastname" />
                <span asp-validation-for="Lastname"></span>
            </div>

            <div>
                <label asp-for="Id"></label>
                <input asp-for="Id" />
                <span asp-validation-for="Id"></span>
            </div>

            <button type="submit" name="save">新增</button>

        </form>
    </div>

</body>

 ViewBag.Title = "创建页面",先将变量 ViewBag.Title赋值,并将变量传给_Layout.cshtml

@section fotter{ <div>------底部下划线------</div>} . 声明了片段fotter,所以在Create视图中会渲染这个片段。

 

2)在Views文件夹下新建“mvc视图导入文件”,默认文件名为_ViewImports.cshtml。_ViewImports.cshtml也是所有视图在开始之前先要执行的文件,主要写入命名空间、以及视图都要用到的命名空间等:

@namespace myfirstweb.Views
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using myfirstweb.ViewModels

namespace myfirstweb.Views:表示命名空间是myfirstweb.Views

addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers:表示使用了TagHelper

using myfirstweb.ViewModels:表示使用了命名空间myfirstweb.ViewModels,这样就可以直接使用命名空间下的文件,而不需要带完整路径

 

在Create.cshtml下使用myfirstweb.ViewModels.StudentViewModel就需要写完整名字,而可以直接using StudentViewModel

 

@model StudentViewModel

@{
    ViewBag.Title = "创建页面";

}
@section fotter{
    <div>------底部下划线------</div>
}


<body>
    <div>
        <form method="post" action="">
            <div>
                <label asp-for="Firstname"></label>
                <input asp-for="Firstname" />
                <span asp-validation-for="Firstname"></span>
            </div>

            <div>
                <label asp-for="Lastname"></label>
                <input asp-for="Lastname" />
                <span asp-validation-for="Lastname"></span>
            </div>

            <div>
                <label asp-for="Id"></label>
                <input asp-for="Id" />
                <span asp-validation-for="Id"></span>
            </div>

            <button type="submit" name="save">新增</button>

        </form>
    </div>

</body>

三、partial view (局部视图)

1、partival view的特点:

1)复用view代码

2) 通过 @Html.Partial("_PartialViewName",data) 调用局部视图,_PartialViewName是局部视图名,data是传入给局部视图的参数

3) 局部视图可以再去调用局部视图

4)异步版本是Html.PartialAsync

 

2、在/Views/Shared下创建局部视图文件_PartivalView.cshtml

<h1>@Model</h1>

3、在/Views/Home/Create.cshtml视图文件中调用这个局部视图

@model StudentViewModel

@{
    ViewBag.Title = "创建页面";

}
@section fotter{
    <div>------底部下划线------</div>
}


<body>
    <div>
        <form method="post" action="">
            <div>
                <label asp-for="Firstname"></label>
                <input asp-for="Firstname" />
                <span asp-validation-for="Firstname"></span>
            </div>

            <div>
                <label asp-for="Lastname"></label>
                <input asp-for="Lastname" />
                <span asp-validation-for="Lastname"></span>
            </div>

            <div>
                <label asp-for="Id"></label>
                <input asp-for="Id" />
                <span asp-validation-for="Id"></span>
            </div>

            <button type="submit" name="save">新增</button>

        </form>
    </div>

</body>

@Html.Partial("_PartivalView","创建的局部视图")

四、View Components 视图组件

1、view Componets的特点:

1)可复用

2)独立的组件

3)有独立的逻辑和数据

4)相当于迷你mvc请求

5) 不依赖于父级view的组件

 

2、在工程主目录下新建文件夹ViewComponets,然后在ViewComponets下新建一个文件WelcomeViewComponent.cs

using System;
using myfirstweb.Services;
using myfirstweb.models;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace myfirstweb.ViewComponents
{
    public class WelcomeViewComponent : ViewComponent
    {
        private readonly IRepository<Student> _repository;
        public WelcomeViewComponent(IRepository<Student> repository)
        {
            _repository = repository;
        }

        public IViewComponentResult Invoke(string inputstr)
        {

            return View("Testname", inputstr);
        }


    }
}

3、在 /Views/Shared/Components/Welcome 新建文件 Testname.cs

@model  string
<h1>学生姓名 @Model </h1>

4、在一般的View中调用该ComponentView,以下是在Create.cshtml视图中调用视图组件

@model StudentViewModel

@{
    ViewBag.Title = "创建页面";

}
@section fotter{
    <div>------底部下划线------</div>
}


<body>
    <div>
        <form method="post" action="">
            <div>
                <label asp-for="Firstname"></label>
                <input asp-for="Firstname" />
                <span asp-validation-for="Firstname"></span>
            </div>

            <div>
                <label asp-for="Lastname"></label>
                <input asp-for="Lastname" />
                <span asp-validation-for="Lastname"></span>
            </div>

            <div>
                <label asp-for="Id"></label>
                <input asp-for="Id" />
                <span asp-validation-for="Id"></span>
            </div>

            <button type="submit" name="save">新增</button>

        </form>
    </div>

</body>

@Html.Partial("_PartivalView","创建的局部视图")

@await Component.InvokeAsync("Welcome","输入参数")

 

欢迎到我的个人博客踩一踩

 

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值