点这里进入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_verti> 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">refreshi>@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">menui> 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">editi>@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_sweepi>@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">addi> 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>