• ABP入门教程11


    点这里进入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>
    View Code

    创建/修改视图

    _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>
    View Code
  • 相关阅读:
    【设计模式+原型理解】第四章:函数的三种角色+原型链终结版
    【设计模式+原型理解】第三章:javascript五种继承父类方式
    【设计模式+原型理解】第二章:基于构造函数扩展出来的原型模式
    【设计模式+原型理解】第一章:使用Javascript来巧妙实现经典的设计模式
    【Javascript】JS遍历数组的三种方法:map、forEach、filter
    mysql_8.0.12环境配置
    Vue搭建环境
    Flask学习:根据WTF实现登录
    Flask学习:简单的实现登录功能(表单,消息显示)
    Flask学习:模板的使用(变量,控制器,过滤器)
  • 原文地址:https://www.cnblogs.com/IT-Evan/p/ABP11.html
Copyright © 2020-2023  润新知