分享好友 前端技术首页 频道列表

mvc5+ef6+Bootstrap 项目心得--WebGrid

bootstrap  2023-02-08 15:560

1.mvc5+ef6+Bootstrap 项目心得--创立之初

2.mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理

3.mvc5+ef6+Bootstrap 项目心得--WebGrid

介绍
我们可以在web页面用HTML表格元素定义WebGrid显示数据,它以非常简单的方式呈现表格数据,支持自定义格式列,分页,排序,并通过AJAX异步更新。 

WebGrid主要属性:
Source -数据来自哪里。 通常情况下,通过controller action传递model
DefaultSort -定义如何将数据排序。只要在这里提供列名。 
RowsPerPage -每页表格显示的记录数。
CanPage -允许分页。 
CanSort -允许通过点击列标题排序。 
SelectedFieldName -获取查询字符串字段,用于指定所选行WebGrid实例的全名。 

ajaxUpdateContainerId - 点击下一页,异步更新table

以下代码是项目中WebGrid的使用

@model IEnumerable<CarLoan.Models.FormShowedInfo>
@{
    ViewBag.Title = "总部退单";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId:"ajax_table");
    int index = grid.PageIndex * grid.RowsPerPage;
}
<style>
    .remark{
        width:200px;
        height:auto;
        overflow:auto;
    }
</style>
<div class="panel panel-primary common_panel">

    <ul class="nav nav-tabs" role="tablist">
        <li class="active">@Html.ActionLink("总部退单(" + Model.Count() + ")", "BackForm", "ApplyFor") </li>
        <li>@Html.ActionLink("总部拒单", "RejectForm", "ApplyFor")</li>
    </ul>
    <div class="panel-body" >
        @grid.GetHtml(tableStyle: "table table-hover table-striped table-bordered",
columns: grid.Columns(
    grid.Column(header: "序号", format: (item) => ++index),
grid.Column("CustomerName", "客户姓名", format: (data) => new HtmlString("<a href='/Customer/Details/"
  + data.ID + "' target='blank'>" + data.CustomerName + "</a>")),
grid.Column("IdNo", "身份证号"),
grid.Column("LoanType", "贷款类型", format: (item) => new HtmlString(Util.GetDisplayNameForEnum(item.LoanType))),
grid.Column("Money", "申请金额(元)", format: (item) => Util.GetFormatedAmount(item.Money)),
grid.Column("Reason", "退回原因", format: (data) => new HtmlString("<a class='popover-destroy' data-toggle='popover'" +
" data-container='body' title='备注' data-placement='right'  data-content='"
+ data.Remark + "'>" + data.Reason + "</a>")),
grid.Column("Time", "退回时间"),
grid.Column(header: "操作", format: (item) => new HtmlString(
             Html.ActionLink("修改资料", (item.IsRZZL) ? "ApplyForTableFinance" : "ApplyForTable", new { id = item.ID }, new { @class = "btn btn-primary" }) +
" <button type='button' class='btn btn-primary' onclick='StopLoan(" + item.id + ")'>客户终止贷款</button>"))),
mode: WebGridPagerModes.All, firstText: "第一页",
                   previousText: "上一页", nextText: "下一页", lastText: "最后一页", numericLinksCount: 10)

    </div>

</div>

 

查看更多关于【bootstrap】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
Bootstrap基础:选择器
1.CSS属性选择器[arrt=value]   该属性有指定的确切值[arrt~=value]  该属性值必须是多个空格隔开的值,比如,class=“title featured home”,而且这些值中的一个必须是指定的值“value”[arrt|=value]  属性的值就是“value”或者以“value”开始并立即

0评论2023-03-16469

Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");     国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:

0评论2023-03-16312

基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS
近几年,.net生态日益强大,特别是跨平台技术,性能提升,那真的是强大无比。为了日常能够快速开发,笔者基于基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS,请大家多提意见建议。在此,要感谢若依CMS的作者,借用了皮肤框架。懒的发文字描述

0评论2023-03-16505

elasticsearch bootstrap.memory_lock
检查bootstrap.memory_lock设置是否生效get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall响应:{"nodes": {"9giihmDNRdS136KT52Gl5g": {"process": {"mlockall": true}},"X0zQESeeT8uJ9kVXvHpl-w": {"process":

0评论2023-03-08659

50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。本文向你推荐 50 个 Bootstrap 的插件,可以考虑在你下一个项目中使用它们。1. Boots

0评论2023-03-08629

Bootstrap资源 bootstrap官方文档
官方网站:http://getbootstrap.com/http://twitter.github.com/bootstrap/index.html 官方博客:http://blog.getbootstrap.com/  中文文档:http://wrongwaycn.github.com/bootstrap/docs/index.html  图标:Font Awesomehttp://fortawesome.github.com

0评论2023-03-08321

bootstrap bootstrap检验
bootstrap是简洁灵活的用于搭建web页面的Html,Css工具集。---是一组简洁强大的前端开发框架。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架。bootstrap中的js框架依赖于jquery,因此jquery要在bootstrap之前引进一般要把CS

0评论2023-03-08325

002-BootStrap基本模板 bootstrap 模型
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式,表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度),页面初始缩放值理想宽度/可见宽度--meta name="vie

0评论2023-03-08506

003-BootStrap完整模板 bootstrap demo
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式,表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度),页面初始缩放值理想宽度/可见宽度--!--视口的作用

0评论2023-03-08910

nginx 下 bootstrap fa 字体异常问题
server {listen 8082;#server_name192.168.16.88; #root/home/ywt/workspace/kuF/web/statics;#autoindex on; #autoindex_exact_size off; #autoindex_localtime on; # } 原配置如上,实际图标加载出来乱七八糟; 经过具体分析,实际css文件正常加载,字体

0评论2023-03-08960

bootstrap 响应式布局
先上点媒体查询css(某个著名的”段子“),跟bootstrap无关:htmlheadstylebody {background-color: white;}@media screen and (max-width: 960px){body {background-color: red;}}@media screen and (max-width: 768px){body {background-color: yellow;}}@

0评论2023-03-08482

bootstrap bootstrap用什么软件
bootstrap:简易模版:meta http-equiv='X-UA-Compatible' content='IE=edge' //让IE浏览器运行最新的渲染模式//meta name='renderer' content='webkit'让部分国产浏览器默认采用高速模式渲染页面meta name='viewport' content='width=device-width,initail-

0评论2023-03-08809

bootstrap怎样让按钮或者组件左右对齐 bootstrap怎么调整组件的位置
1.登录页的form表单可以是使用margin:0 auto的方式,居中对齐 2.div可以使用pull-right, text-center, pull-left 3.按钮或者p标签可以使用text-right, text-center, text-left

0评论2023-03-08949

更多推荐