ASP.Net Core -- Partial View
Partial View:顾名思义,就是一部分视图,叫“分布视图”;
1:主要用来复用代码,它里边的代码可以到处复用,就像公有方法一样。如图:
2:index.cshtml页面继承了布局页,在index页面里又使用@HTML.Partial()语句来调用一个分布视图。
3:第一个参数是分布视图名称,第二个参数是从index页面传过去的参数内容。
4:分布视图没有自己的数据,它里边的数据需要从调用的一方传进来。
5:分布视图的名称一般是以下划线“_”开头,比如:_StudentList.cshtml
代码示例如下:
分布视图一般建立在shared文件夹下,这样所有视图都可以调用,这里我放在Home文件夹下,所以Home文件夹里所有的视图都可以使用,如下:
我先建立一个名为_StudentTable.cshtml的分布视图,用来显示学生信息列表,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @model IEnumerable<StudentViewModel> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> @ foreach ( var studentList in Model) { <tr> <td> @studentList.Name</td> <td>@studentList.Age</td> </tr> } </table> |
然后在index.cshtml调用:
1 2 3 4 5 6 7 8 9 10 11 12 | @model HomeIndexViewModel <h1>用户信息列表</h1> <partial name= "_StudentTable" for = "studentList" /> @section bottom { <div> <a asp-action= "Create" >创建一个学生信息</a> </div> } |
这样,在index页面加载的时候,红色部分就会显示学生列表信息。里边的HTML就是_StudentTable里的代码。在这里使用的taghelper标签,所以属性for里边直接放HomeIndexViewModel里的属性就行。
可以再新建一个名为_StudentRow.cshtml的分布视图,将_StudentTable.cshtml里的tr提取,嵌套着来使用,如下:
1 2 3 4 5 | @model StudentViewModel <tr> <td> @Model.Name</td> <td>@Model.Age</td> </tr> |
然后在_StudentTable.cshtml里调用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @model IEnumerable<StudentViewModel> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> @ foreach ( var studentList in Model) { <partial name= "_StudentRow" for = "@studentList" /> } </table> |
这样,这两个存放学生列表信息的分布视图在home文件夹里所有视图都可以这样调用。
缺点就是它没有自己的model
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步