ABP开发手记11 - 展示层实现增删改查-视图
程序员文章站
2023-08-23 13:38:13
点这里进入ABP开发手记目录 创建目录 在展示层(即JD.CRS.Web.Mvc)的Views下新建文件夹Course //用以存放Course相关视图 创建视图 在JD.CRS.Web.Mvc/Views/Course下新建两个Razor视图 查询视图 Index.cshtml //用于查询Cou ......
创建目录
在展示层(即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>