文档章节

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

guoliang
 guoliang
发布于 2013/10/10 21:15
字数 532
阅读 8916
收藏 5
点赞 2
评论 0

一个非常基础的小例子,主要是利用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化对象,我还以为直接返回一个字符串就可以了。微软老喜欢包装各种类,没有教程的情况下要自己探索还真是蛋疼!

© 著作权归作者所有

共有 人打赏支持
guoliang
粉丝 26
博文 131
码字总数 27457
作品 0
杭州
程序员
PDF 生成工具 – iTextSharp 入门

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

RainyZou
2016/03/06
275
0
springmvc 项目完整示例08 前台页面以及知识点总结

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

noteless
2016/02/24
0
0
基于 React 的表格组件--v-format-table

还在为管理后台繁杂的表格页面烦恼吗? 不,让v-format-table来拯救你吧! 基于reactjs的表格组件,统一只要传入一个表头数组和一个内容数组,即可生成一个表格; 并支持format回调函数,可格...

北京d路飞
2017/09/17
149
1
共同编写 Smart 2.0 开发指南

1 工具 1.1 准备开发工具 描述开发 Smart 应用所需要的开发工具及其安装步骤,包括:IDE、JDK、Maven、Git 等。 有必要时可使用截图,但不要大量使用。 需突出开发工具的版本号,以免误导用户...

黄勇
2014/01/05
0
13
jQuery.bsgrid 1.32 发布,更多简单实用功能及扩展

jQuery.bsgrid 简单易用的jQuery Grid插件 jquery bsgrid,A simple jQuery Grid plugin with pagation, export and easy to expand. 一个简单易用的jQuery Grid插件,内置提供多套皮肤且非常......

bs2004
2015/01/23
3.6K
18
轻量级 XLSX Excel 电子表格库--PHP_XLSXWriter

PHP_XLSXWriter 是一个用 PHP 开发的轻量级 XLSX Excel 电子表格库,有着相对较低的内存占用。 它设计为使用(Office 2007+)xlsx 格式输出 Excel 电子表格,只支持基本功能: 支持 PHP 5.2....

匿名
2016/12/23
909
2
使用Apache POI写的一个生成/解析 Excel的工具类

2016年10月24日15:47:51 更新,发布了最新版本,修改了一些BUG。另外在最后加上了调用的示例代码 2016年10月24日15:49:33更新:补充了反射工具类ReflectUtils.java 2016年10月27日09:12:27 ...

十月阳光
2015/08/04
0
7
10.11杭州Clouder lab 十分钟搭建共享应用1:函数计算及表格存储操作说明

欢迎大家来到无服务器(Serverless)编程的阿里云clouder lab实验课参与学习。 这几年,共享经济越来越火,大到共享汽车、共享电动车,小到共享雨伞,共享充电宝。人人参与,人人收益是共享经...

rocaltair
2017/10/10
0
0
Sql Server Report Service 使用简单说明

ReportServices做为报表服务器,结合sql直接访问数据库提供基本的报表格式设置显示,可以快速开发报表,主要包含两部分内容: 1.ReportServices服务器配置搭建,承载报表的运行平台 2.设计报...

VOLVO之悦
2017/01/20
0
0
开发工具总结(5)之Markdown语法总结及工具介绍

一、快捷键 二、基本语法 (一)对字体设置斜体、粗体、删除线,语法如下: (二)分级标题,两种写法,如下所示: 写法1: 写法2: (三)链接(这个操作比较多,需要多了解一下) (1)插入...

AWeiLoveAndroid
2017/12/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前端基础

1. get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是...

wenxingjun
23分钟前
0
0
Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
今天
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
今天
6
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部