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 ......
创建目录
在展示层(即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>
上一篇: 秦人爱食羊肉 白起为什么会禁止士兵吃羊肉