欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图(七)

程序员文章站 2022-06-09 13:02:04
在首页中,我们一般会用列表来展示信息。为了使用ASP.NET MVC Core强视图带给我们的好处(模型绑定、输入校验等等),我们需要创建一个ViewModel来进行模型绑定。因为ABP提倡为每个不同的应用服务提供不同的Dto进行数据交互,展示对应Dto。那我们创建的ViewModel就需要包含这几... ......

abp(net core)+easyui+efcore实现仓储管理系统目录

abp(net core)+easyui+efcore实现仓储管理系统——abp总体介绍(一)

abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)

abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三)

 abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)

abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务(五)

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器(六)

 

       上接上一篇文章(abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器(六))。

 

二、创建index视图

 

       在首页中,我们一般会用列表来展示信息。为了使用asp.net mvc core强视图带给我们的好处(模型绑定、输入校验等等),我们需要创建一个viewmodel来进行模型绑定。因为abp提倡为每个不同的应用服务提供不同的dto进行数据交互,展示对应dto。那我们创建的viewmodel就需要包含这几个模型,方可在一个视图中完成多个模型的绑定。

 

1,创建视图模型

 

1) 在visual studio 2017的“解决方案资源管理器”中,右键单击在领域层“abp.tplms.web.mvc”项目中的models目录。 选择“添加” > “新建文件夹”。并将文件夹命名为“module”。

 

2) 鼠标右键单击“module”文件夹,然后选择“添加” > “类”。 将类命名为 editmodulemodalviewmodel,代码如下。

 

using system.collections.generic;
using system.linq;
using abp.tplms.modules.dto; 

namespace abp.tplms.web.models.module
{
    public class editmodulemodalviewmodel
    {
        public createupdatemoduledto module { get; set; } 

        public ireadonlylist<moduledto> modules { get; set; }    

    }
}

 

 

2,创建列表视图

 

1) 在visual studio 2017的“解决方案资源管理器”中,右键单击在展现层“abp.tplms.web.mvc”项目中的views目录。 选择“添加” > “新建文件夹”。并将文件夹命名为“module”。

 

2) 鼠标右键单击“module”文件夹,然后选择“添加” > “新建项…”。 在“添加新项-abp.tplms.web.mvc”对话框中,选择“razor视图”,并将名称命名为index.cshmtl,如下图。

 

 abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图(七)

 

3) 在index视图中,我们通过循环遍历,输出模块信息。代码如下。

 

@using abp.tplms.web.startup
@model abp.tplms.web.models.module.editmodulemodalviewmodel
 
@{
    viewdata["title"] = pagenames.module;
}
@section scripts
    {  
        <script src="~/view-resources/views/module/index.js" asp-append-version="true"></script>
   }
 

<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                    @l("module")
                </h2>
                <ul class="header-dropdown m-r--5">
                    <li class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><i class="material-icons">more_vert</i> </a> <ul class="dropdown-menu pull-right"> <li><a id="refreshbutton" href="javascript:void(0);"
class="waves-effect waves-block"><i class="material-icons">refresh</i>@l("refresh")</a></li> </ul> </li> </ul> </div> <div class="body table-responsive"> <table class="table"> <thead> <tr> <th> @html.displaynamefor(model => model.module.name) </th> <th> @html.displaynamefor(model => model.module.displayname) </th> <th> @html.displaynamefor(model => model.module.hotkey) </th> <th> @html.displaynamefor(model => model.module.iconname) </th> <th> @html.displaynamefor(model => model.module.requiredpermissionname) </th> <th> @html.displaynamefor(model => model.module.status) </th> <th></th> </tr> </thead> <tbody> @foreach (var item in model.modules) { <tr> <td> @html.displayfor(modelitem => item.name) </td> <td> @html.displayfor(modelitem => item.displayname) </td> <td> @html.displayfor(modelitem => item.hotkey) </td> <td> @html.displayfor(modelitem => item.iconname) </td> <td> @html.displayfor(modelitem => item.requiredpermissionname) </td> <td> @html.displayfor(modelitem => item.status) </td> <td class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><i class="material-icons">menu</i> </a> <ul class="dropdown-menu pull-right"> <li> <a asp-action="edit" class="waves-effect waves-block"
asp-route-id="@item.id"><i class="material-icons">edit</i>@l("edit")</a> </li> <li> <a asp-action="delete" class="waves-effect waves-block"
asp-route-id="@item.id"><i class="material-icons">delete_sweep</i>@l("delete")</a> </li> </ul> </td> </tr> } </tbody> </table> <a asp-action="create"
class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right">
<i class="material-icons">add</i></a> </div> </div> </div> </div>

 4) 在visual studio 2017中按f5运行应用程序,在登录之后,我们在浏览器中输入http://localhost:5000/module。如下图。

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图(七)