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

ABP开发手记11 - 展示层实现增删改查-视图

程序员文章站 2022-06-03 16:59:57
点这里进入ABP开发手记目录 创建目录 在展示层(即JD.CRS.Web.Mvc)的Views下新建文件夹Course //用以存放Course相关视图 创建视图 在JD.CRS.Web.Mvc/Views/Course下新建两个Razor视图 查询视图 Index.cshtml //用于查询Cou ......

点这里进入abp开发手记目录 

创建目录

在展示层(即jd.crs.web.mvc)的views下新建文件夹course //用以存放course相关视图

创建视图

在jd.crs.web.mvc/views/course下新建两个razor视图

查询视图

index.cshtml //用于查询course list

  1 @using jd.crs.web.startup
  2 @model jd.crs.web.models.course.courselistviewmodel
  3 @{
  4     viewbag.currentpagename = pagenames.course; // the menu item will be active for this page.
  5 }
  6 @section scripts
  7     {
  8     <environment names="development">
  9         <script src="~/view-resources/views/course/index.js" asp-append-version="true"></script>
 10     </environment>
 11     <environment names="staging,production">
 12         <script src="~/view-resources/views/course/index.min.js" asp-append-version="true"></script>
 13     </environment>
 14 }
 15 <div class="row clearfix">
 16     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 17         <div class="card">
 18             <div class="header">
 19                 <h2>
 20                     @l("course")
 21                 </h2>
 22                 <ul class="header-dropdown m-r--5">
 23                     <li class="dropdown">
 24                         <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
 25                             <i class="material-icons">more_vert</i>
 26                         </a>
 27                         <ul class="dropdown-menu pull-right">
 28                             <li>
 29                                 <a id="refreshbutton" href="javascript:void(0);" class="waves-effect waves-block"><i class="material-icons">refresh</i>@l("refresh")</a>
 30                             </li>
 31                         </ul>
 32                     </li>
 33                 </ul>
 34             </div>
 35             <div class="body table-responsive">
 36                 <table class="table">
 37                     <thead>
 38                         <tr>
 39                             <th>@l("code")</th>
 40                             <th>@l("departmentcode")</th>
 41                             <th>@l("name")</th>
 42                             <th>@l("credits")</th>
 43                             <th>@l("remarks")</th>
 44                             <th>@l("status")</th>
 45                             <th>@l("actions")</th>
 46                         </tr>
 47                     </thead>
 48                     <tbody>
 49                         @foreach (var item in model.courses)
 50                         {
 51                         <tr>
 52                             <td>
 53                                 @html.displayfor(modelitem => item.code)
 54                             </td>
 55                             <td>
 56                                 @html.displayfor(modelitem => item.departmentcode)
 57                             </td>
 58                             <td>
 59                                 @html.displayfor(modelitem => item.name)
 60                             </td>
 61                             <td>
 62                                 @html.displayfor(modelitem => item.credits)
 63                             </td>
 64                             <td>
 65                                 @html.displayfor(modelitem => item.remarks)
 66                             </td>
 67                             <td>
 68                                 @html.displayfor(modelitem => item.status)
 69                             </td>
 70                             <td class="dropdown">
 71                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
 72                                     <i class="material-icons">menu</i>
 73                                 </a>
 74                                 <ul class="dropdown-menu pull-right">
 75                                     <li><a href="#" class="waves-effect waves-block edit-course" data-course-id="@item.id" data-toggle="modal" data-target="#courseeditmodal"><i class="material-icons">edit</i>@l("edit")</a></li>
 76                                     <li><a href="#" class="waves-effect waves-block delete-course" data-course-id="@item.id" data-course-name="@item.name"><i class="material-icons">delete_sweep</i>@l("delete")</a></li>
 77                                 </ul>
 78                             </td>
 79                         </tr>
 80                         }
 81                     </tbody>
 82                 </table>
 83                 <button type="button" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" data-toggle="modal" data-target="#coursecreatemodal">
 84                     <i class="material-icons">add</i>
 85                 </button>
 86             </div>
 87         </div>
 88     </div>
 89 </div>
 90 <div class="modal fade" id="coursecreatemodal" tabindex="-1" role="dialog" aria-labelledby="coursecreatemodallabel" data-backdrop="static">
 91     <div class="modal-dialog" role="document">
 92         <div class="modal-content">
 93             <div class="modal-header">
 94                 <h4 class="modal-title">
 95                     <span>@l("createcourse")</span>
 96                 </h4>
 97             </div>
 98             <div class="modal-body">
 99                 <form name="coursecreateform" role="form" class="form-validation">
100                     <div>
101                         <div class="row clearfix">
102                             <div class="col-sm-6">
103                                 <div class="form-line">
104                                     <label class="form-label">@l("code")</label>
105                                     <input type="text" name="code" class="form-control" required maxlength="50" />
106                                 </div>
107                             </div>
108                             <div class="col-sm-6">
109                                 <div class="form-line">
110                                     <label class="form-label">@l("departmentcode")</label>
111                                     <input type="text" name="departmentcode" class="form-control" required maxlength="50" />
112                                 </div>
113                             </div>
114                         </div>
115                         <div class="row clearfix">
116                             <div class="col-sm-6">
117                                 <div class="form-line">
118                                     <label class="form-label">@l("name")</label>
119                                     <input type="text" name="name" class="form-control" required maxlength="150" />
120                                 </div>
121                             </div>
122                             <div class="col-sm-6">
123                                 <div class="form-line">
124                                     <label class="form-label">@l("credits")</label>
125                                     <input type="text" name="credits" class="form-control"/>
126                                 </div>
127                             </div>
128                         </div>
129                         <div class="row clearfix">
130                             <div class="col-sm-12">
131                                 <div class="form-line">
132                                     <label class="form-label">@l("remarks")</label>
133                                     <input name="remarks" type="text" class="form-control" required maxlength="200" />
134                                 </div>
135                             </div>
136                         </div>
137                         <div class="row clearfix">
138                             <div class="col-sm-12">
139                                 <div class="form-line">
140                                     <label class="form-label">@l("status")</label>
141                                     <input name="status" type="text" class="form-control" />
142                                 </div>
143                             </div>
144                         </div>
145                     </div>
146                     <div class="modal-footer">
147                         <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">@l("cancel")</button>
148                         <button type="submit" class="btn btn-primary waves-effect">@l("save")</button>
149                     </div>
150                 </form>
151             </div>
152         </div>
153     </div>
154 </div>
155 <div class="modal fade" id="courseeditmodal" tabindex="-1" role="dialog" aria-labelledby="courseeditmodallabel" data-backdrop="static">
156     <div class="modal-dialog" role="document">
157         <div class="modal-content">
158         </div>
159     </div>
160 </div>
 

创建/修改视图

_editcoursemodal.cshtml //用于创建/修改course item

 1 @using jd.crs.web.models.common.modals
 2 @model jd.crs.web.models.course.editcoursemodalviewmodel
 3 @{
 4     layout = null;
 5 }
 6 @html.partial("~/views/shared/modals/_modalheader.cshtml", new modalheaderviewmodel(l("editcourse")))
 7 
 8 <div class="modal-body">
 9     <form name="courseeditform" role="form" novalidate class="form-validation">
10         <input type="hidden" name="id" value="@model.course.id" />
11         <div>
12             <div class="row clearfix">
13                 <div class="col-sm-6">
14                     <div class="form-line">
15                         <label class="form-label">@l("code")</label>
16                         <input type="text" name="code" value="@model.course.code" class="form-control" required maxlength="50" />
17                     </div>
18                 </div>
19                 <div class="col-sm-6">
20                     <div class="form-line">
21                         <label class="form-label">@l("departmentcode")</label>
22                         <input type="text" name="departmentcode" value="@model.course.departmentcode" class="form-control" required maxlength="50" />
23                     </div>
24                 </div>
25             </div>
26             <div class="row clearfix">
27                 <div class="col-sm-6">
28                     <div class="form-line">
29                         <label class="form-label">@l("name")</label>
30                         <input type="text" name="name" value="@model.course.name" class="form-control" required maxlength="150" />
31                     </div>
32                 </div>
33                 <div class="col-sm-6">
34                     <div class="form-line">
35                         <label class="form-label">@l("credits")</label>
36                         <input type="text" name="credits" value="@model.course.credits" class="form-control"/>
37                     </div>
38                 </div>
39             </div>
40             <div class="row clearfix">
41                 <div class="col-sm-12">
42                     <div class="form-line">
43                         <label class="form-label">@l("remarks")</label>
44                         <input name="remarks" type="text" value="@model.course.remarks" class="form-control" required maxlength="200" />
45                     </div>
46                 </div>
47             </div>
48             <div class="row clearfix">
49                 <div class="col-sm-12">
50                     <div class="form-line">
51                         <label class="form-label">@l("status")</label>
52                         <input name="status" type="text" value="@model.course.status" class="form-control" />
53                     </div>
54                 </div>
55             </div>
56 </form>
57 </div>
58 @html.partial("~/views/shared/modals/_modalfooterwithsaveandcancel.cshtml")
59 
60 <script src="~/view-resources/views/course/_editcoursemodal.js" asp-append-version="true"></script>