Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

基于.net EF6 MVC5+WEB Api 的Web系统框架总结(1)-Web前端页面

衡斅 2019-01-25 15:18:00 阅读数:171 评论数:0 点赞数:0 收藏数:0

      本 Web 系统框架基于C/# EF6+MVC+WebApi的快速应用开发平台。本节主要介绍Web前端页面设计与实现。Web前端页面主要分为普通列表页面、树状导航列表页面、普通编辑页面、数据导入页面、向导编辑页面以及新页编辑页面。

1、普通列表页面

普通列表页面是系统框架最基础的列表页面,采用JqGrid组件。

页面布局源码 @ViewBag.Title @System.Web.Optimization.Styles.Render("~/Content/scripts/plugins/jqgrid/css", "~/Content/scripts/plugins/tree/css", "~/Content/scripts/plugins/datetime/css", "~/Content/styles/xlib-ui.css") @System.Web.Optimization.Scripts.Render("~/Content/scripts/plugins/jqgrid/js", "~/Content/scripts/plugins/tree/js", "~/Content/scripts/plugins/validator/js", "~/Content/scripts/plugins/datepicker/js", "~/Content/scripts/utils/js") @RenderBody() @Html.AntiForgeryToken()

示例页面源码

@{ ViewBag.Title = "列表页面"; Layout = "~/Views/Shared/Index.cshtml"; }

Keyword"type="text"class="form-control"placeholder="请输入要查询关键字"style="width: 200px;" /> Search"class="btn btn-primary">查询
选择条件
  • 编号
  • 企业名称
  • 许可证号
  • 联系人
  •  刷新  新增  复制  导入
     编辑  删除

    2、树状导航列表页面

        树状导航列表页面是在普通列表页面的基础上,增加左边或右边树状导航功能的列表页面。应用于列表数据有上级、分类功能的页面。便于数据查找、过滤或者新增时,作为主信息先选择,减少弹窗,降低操作复杂性。

    页面布局源码 @ViewBag.Title @System.Web.Optimization.Styles.Render("~/Content/scripts/plugins/jqgrid/css", "~/Content/scripts/plugins/tree/css", "~/Content/scripts/plugins/datetime/css", "~/Content/styles/xlib-ui.css") @System.Web.Optimization.Scripts.Render("~/Content/scripts/plugins/jqgrid/js", "~/Content/scripts/plugins/tree/js", "~/Content/scripts/plugins/validator/js", "~/Content/scripts/plugins/datepicker/js", "~/Content/scripts/utils/js") @RenderBody() @Html.AntiForgeryToken()

     

    页面示例源码@{ ViewBag.Title = "列表页面"; Layout = "~/Views/Shared/LayoutIndex.cshtml"; } 设备分类 设备信息

    查询
    选择条件
  • 编号
  • 设备名称
  •  刷新  新增  复制  编辑  删除