ABP入门教程11 - 展示层实现增删改查-视图
创建目录
在展示层(即JD.CRS.Web.Mvc)的Views下新建文件夹Course //用以存放Course相关视图
创建视图
在JD.CRS.Web.Mvc/Views/Course下新建两个Razor视图
查询视图
Index.cshtml //用于查询Course List
@using JD.CRS.Web.Startup
@model JD.CRS.Web.Models.Course.CourseListViewModel
@{
ViewBag.CurrentPageName = PageNames.Course; // The menu item will be active for this page.
}
@section scripts
{
<environment names="Development">
<script src="~/view-resources/Views/Course/Index.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="~/view-resources/Views/Course/Index.min.js" asp-append-version="true"></script>
</environment>
}
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
@L("Course")
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a id="RefreshButton" href="javascript:void(0);" class="waves-effect waves-block"><i class="material-icons">refresh</i>@L("Refresh")</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="body table-responsive">
<table class="table">
<thead>
<tr>
<th>@L("Code")</th>
<th>@L("DepartmentCode")</th>
<th>@L("Name")</th>
<th>@L("Credits")</th>
<th>@L("Remarks")</th>
<th>@L("Status")</th>
<th>@L("Actions")</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Courses)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Code)
</td>
<td>
@Html.DisplayFor(modelItem => item.DepartmentCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Credits)
</td>
<td>
@Html.DisplayFor(modelItem => item.Remarks)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
<td class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">menu</i>
</a>
<ul class="dropdown-menu pull-right">
<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>
<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>
</ul>
</td>
</tr>
}
</tbody>
</table>
<button type="button" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" data-toggle="modal" data-target="#CourseCreateModal">
<i class="material-icons">add</i>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="CourseCreateModal" tabindex="-1" role="dialog" aria-labelledby="CourseCreateModalLabel" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span>@L("CreateCourse")</span>
</h4>
</div>
<div class="modal-body">
<form name="courseCreateForm" role="form" class="form-validation">
<div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-line">
<label class="form-label">@L("Code")</label>
<input type="text" name="Code" class="form-control" required maxlength="50" />
</div>
</div>
<div class="col-sm-6">
<div class="form-line">
<label class="form-label">@L("DepartmentCode")</label>
<input type="text" name="DepartmentCode" class="form-control" required maxlength="50" />
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-line">
<label class="form-label">@L("Name")</label>
<input type="text" name="Name" class="form-control" required maxlength="150" />
</div>
</div>
<div class="col-sm-6">
<div class="form-line">
<label class="form-label">@L("Credits")</label>
<input type="text" name="Credits" class="form-control"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-line">
<label class="form-label">@L("Remarks")</label>
<input name="Remarks" type="text" class="form-control" required maxlength="200" />
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-line">
<label class="form-label">@L("Status")</label>
<input name="Status" type="text" class="form-control" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">@L("Cancel")</button>
<button type="submit" class="btn btn-primary waves-effect">@L("Save")</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="CourseEditModal" tabindex="-1" role="dialog" aria-labelledby="CourseEditModalLabel" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
创建/修改视图
_EditCourseModal.cshtml //用于创建/修改Course Item
@using JD.CRS.Web.Models.Common.Modals
@model JD.CRS.Web.Models.Course.EditCourseModalViewModel
@{
Layout = null;
}
@Html.Partial("~/Views/Shared/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("EditCourse"))) <div class="modal-body">
<form name="CourseEditForm" role="form" novalidate class="form-validation">
<input type="hidden" name="Id" value="@Model.Course.Id" />
<div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-line">
<label class="form-label">@L("Code")</label>
<input type="text" name="Code" value="@Model.Course.Code" class="form-control" required maxlength="50" />
</div>
</div>
<div class="col-sm-6">
<div class="form-line">
<label class="form-label">@L("DepartmentCode")</label>
<input type="text" name="DepartmentCode" value="@Model.Course.DepartmentCode" class="form-control" required maxlength="50" />
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-line">
<label class="form-label">@L("Name")</label>
<input type="text" name="Name" value="@Model.Course.Name" class="form-control" required maxlength="150" />
</div>
</div>
<div class="col-sm-6">
<div class="form-line">
<label class="form-label">@L("Credits")</label>
<input type="text" name="Credits" value="@Model.Course.Credits" class="form-control"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-line">
<label class="form-label">@L("Remarks")</label>
<input name="Remarks" type="text" value="@Model.Course.Remarks" class="form-control" required maxlength="200" />
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-line">
<label class="form-label">@L("Status")</label>
<input name="Status" type="text" value="@Model.Course.Status" class="form-control" />
</div>
</div>
</div>
</form>
</div>
@Html.Partial("~/Views/Shared/Modals/_ModalFooterWithSaveAndCancel.cshtml") <script src="~/view-resources/Views/Course/_EditCourseModal.js" asp-append-version="true"></script>
ABP入门教程11 - 展示层实现增删改查-视图的更多相关文章
- ABP入门教程9 - 展示层实现增删改查-视图模型
点这里进入ABP入门教程目录 创建视图模型 在展示层(即JD.CRS.Web.Mvc)的Models下新建文件夹Course //用以存放Course相关视图模型 在JD.CRS.Web.Mvc/Mo ...
- ABP入门教程10 - 展示层实现增删改查-控制器
点这里进入ABP入门教程目录 创建控制器 在展示层(即JD.CRS.Web.Mvc)的Controllers下新建一个控制器CourseController.cs using Abp.Applicat ...
- ABP入门教程12 - 展示层实现增删改查-脚本
点这里进入ABP入门教程目录 创建目录 在展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\下新建文件夹Course //用以存放Course相关脚 ...
- abp(net core)+easyui+efcore仓储系统——展现层实现增删改查之控制器（六）
abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...
- ABP入门系列（6）——展现层实现增删改查
这一章节将通过完善Controller.View.ViewModel,来实现展现层的增删改查.最终实现效果如下图: 一.定义Controller ABP对ASP.NET MVC Controllers ...
- ABP入门系列（5）——展现层实现增删改查
ABP入门系列目录--学习Abp框架之实操演练 这一章节将通过完善Controller.View.ViewModel,来实现展现层的增删改查.最终实现效果如下图: 一.定义Controller ABP ...
- abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
- 基于renren-fast的快速入门项目实战（实现报表增删改查）
基于renren-fast的快速入门项目实战(实现报表增删改查) 说明:renren-fast是一个开源的基于springboot的前后端分离手脚架,当前版本是3.0 官方开发文档需付费,对于新手而言 ...
- 数据库Dao层编增删改查写，数据库事务，数据库升级
数据库事务 有两个特点 1.安全性 情景:正常的转账行为,这个时候如果出现停电等异常,已经扣钱但是没有加钱:这个时候就可用数据库事务解决问题 2.高效性: 使用数据库事务添加享受同数量的数据,对比耗时 ...
随机推荐
- linux 系统账户 和 普通账户 的区别
最近使用 useradd -r 选项进行创建账户,用于测试,对-r 选项不是很明白,下面记录一些调研的过程: -r, --system Create a system account. System ...
- 基于MbedTLS的AES加密实现，含STM32H7和STM32F4的实现例程
说明: 1.mbedTLS的前身是PolarSSL,开源免费. 主要提供了的SSL/TLS支持(在传输层对网络进行加密),各种加密算法,各种哈希算法,随机数生成以及X.509(密码学里公钥证书的格式标 ...
- 零基础想学习C语言，没资源、没人带、不知道从何开始？
初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ? 小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习买来的一些资料送给大家,希望对广大初学小伙伴有 ...
- Oracle模糊查询CONCAT参数个数无效
在使用MyBatis操作Oracle数据库的时候,写模糊查询突然发现原本在MySql中正确的代码,在Oracle中报错,参数个数无效 <if test="empId!=null and ...
- Xshell/Xftp连接Linux速度非常慢（已解决）
原因: 在使用shell连接虚拟机时连接等待时间太长,ssh的服务端在连接时会自动检测dns环境是否一致导致的,修改为不检测即可! 解决方案: 1.打开sshd服务的配置文件/etc/ssh/sshd ...
- Python中：dict(或对象)与json之间的互相转化
在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import json导入. 在json模块有2个方法, loads():将 ...
- JavaWeb中的MVC
不使用什么MVC的案例分析: 利用Servlet与jsp实现登陆请求,数据库查询,以及页面的跳转逻辑 具体流程如下: 不做任何结构上的考虑,可以简单的做如下实现: 目录结构 LoginServlet ...
- 使用Docker Compose 部署Nexus后初次登录账号密码不正确，并且在nexus-data下没有admin,password
场景 Ubuntu Server 上使用Docker Compose 部署Nexus(图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...
- MongoDB用户验证和权限管理
官方参考页面: https://docs.mongodb.com/v3.6/tutorial/enable-authentication/ https://docs.mongodb.com/v3.6/ ...
- 线上cpu使用率过高解决方案
一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环. 下面我们将一步步定位问题,详尽的介绍每一步骤的相关知识. 一.通过top命令定位占用cpu高的进程 执行top命令得到 ...