文档章节

ASP.net+MVC2+EasyUI搭建一个简单表格示例

guoliang
 guoliang
发布于 2013/10/10 21:15
字数 532
阅读 8977
收藏 5

一个非常基础的小例子,主要是利用VS2010提供的MVC框架,后台是ASP.NET,前台是EasyUI,然后利用EasyUI的datagrid来显示一个表格的数据。

1.首先创建MVC项目。VS2010自带MVC2(虽然已经比较老了),所以直接新建一个项目如图:

生成的一个基本应用,目录结构默认如下所示:

2.添加EasyUI的脚本和css文件。EasyUI可以从:http://www.jeasyui.com/download/index.php地址下载。直接把下载下来的文件夹拖到Scripts下面。如图:

3.在/View/Home/Index.aspx里面添加对EasyUI的引用。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <meta charset="UTF-8"/>
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../Scripts/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../../Scripts/easyui/themes/icon.css"/>
    <script type="text/javascript" src="../../Scripts/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../../Scripts/easyui/jquery.easyui.min.js"></script>
4.在Index.aspx中添加一个table标签和一段配置datagrid表格的js代码。如下面的代码:其中url是指用来获取数据的地址,当前为Home/Test。而columns则是配置datagrid的列。
<table id="tbl" >
        
    </table>
    <script>
            $('#tbl').datagrid({
                title: 'DataGrid - ContextMenu',
                url:'Home/Test',
                width: 700,
                height: 'auto',
                fitColumns: true,
                columns: [[
            { field: 'aa', title: 'Item ID', width: 80 },
            { field: 'cc', title: 'Product ID', width: 120 }
            ]]
            });
        $('#tbl').datagrid('load');
5.在/Controllers/HomeController.cs中添加一个Action,名字为Test。即添加如下代码:
public ActionResult Test()
{
            stu s = new stu(10,10);
            List<stu> ss = new List<stu>();
            ss.Add(s);
            ss.Add(new stu(2, 3));
            JsonResult res = Json(ss);
            return res;
}

简历一个stu类的列表,然后添加了两行数据,并且用Json格式化,最后返回。

上例中用到的stu类的定义很简单:
public class stu 
{
        public stu(int a, int c)
        {
            aa = a; cc = c;
        }
        public int aa;
        public int cc;
}
这样,就可以在浏览器中运行了,结果如下:

最后吐槽一句,虽然一个简单的例子,我也调试了很久,因为不知道需要用Json()这个函数来Json化对象,我还以为直接返回一个字符串就可以了。微软老喜欢包装各种类,没有教程的情况下要自己探索还真是蛋疼!

© 著作权归作者所有

上一篇: PAT 1030.Travel Plan
下一篇: alias带参数
guoliang
粉丝 26
博文 131
码字总数 27457
作品 0
杭州
程序员
私信 提问
Vue+Element UI 使用整理

一、环境搭建 Element UI框架+Vue开发搭建示例 二、UI使用示例、常见问 1.Vue element 二级菜单绑定示例 2.Vue element 表格获取选中项操作 3. Vue element表格分页数据加载示例 3.Vue Elem...

tianma3798
02/13
214
0
PDF 生成工具 – iTextSharp 入门

简介 随着各个行业的快速融合进互联网,大家都希望把提高效率寄托于软件行业,那么PDF这种统一化标准的文档,也必然在企业中占据一定的份额。 目前能够产生PDF工具很多,同时例如有 Apose(商...

RainyZou
2016/03/06
350
0
TableStore实战:DLA+SQL实时分析TableStore

一、实战背景 什么是DLA(DataLake Analytics数据湖)?他是无服务器化(Serverless)的云上交互式查询分析服务。作为分布式交互式分析服务,是表格存储计算生态的重要组成之一。为了使用户更...

潭潭
2018/12/27
0
0
springmvc 项目完整示例08 前台页面以及知识点总结

至此已经基本测试成功了,我们稍作完善,让它成为一个更加完整的项目 我们现在重新规划下逻辑 两个页面 一个登录页面 一个欢迎页面 登陆页面输入账号密码,登陆成功的话,跳转登陆成功 欢迎页面 ...

noteless
2016/02/24
0
0
D2 Crud,一款简单易用的表格组件

D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。 将 的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 实现,在实现并...

FaryEver
2018/09/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java 三元表达式

例子:C=A>B ? 100 :200; 这条语句的意思是,如果A>B的话,就将100赋给C,否则就将200赋给C;

无名氏的程序员
22分钟前
3
0
针对回流和重绘的渲染优化--公司分享

如果是你,你会如何实现浏览器内核,你认为的浏览器渲染的流程是怎么样的 工作开发中,你有做过哪些关于性能优化的工作(代码),或者目前的业务中有哪些是可以做优化的 浏览器渲染机制 什么...

莫西摩西
34分钟前
3
0
html:常见行内标签,常见块级标签,常见自闭合标签

本文转载于:专业的前端网站▷html:常见行内标签,常见块级标签,常见自闭合标签 本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用...

前端老手
42分钟前
3
0
终日乾乾,含章可贞@20191017

工龄7年,7年里换了两家公司,一次被动,一次主动。一次被动只有暖,一次主动冷暖皆有。第一次,只有遗憾,没有珍惜那段时光。第二次细说一下: 一、老公司 1、离职前,甲方三种态度:恭喜、...

sunny小喵
今天
4
0
zk中leader和follower启动时信息交互

QuorumPeer中读取节点状态信息,不同状态下设置不同角色 1 Leader启动Follower接收器LearnerCnxAcceptor LearnerCnxAcceptor负责接收非leader连接请求,线程中创建LearnerHandler处理器 2 Le...

writeademo
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部