- 浏览: 85760 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
午刀十:
那如果把真正的值传回到服务器?你现在显示的是name,如何传回 ...
jqGrid中下拉框的实现(The realization of select in jqGrid via C#) -
sunyux:
我也遇到了同样的问题. 在你的帮助下,把问题结局了.谢谢你分享 ...
未能加载文件或程序集“file:///C:\Program Files (x86)\SAP BusinessObjects\Crystal Reports fo -
南山忍者:
zzq007 写道
public static Stri ...
2012华为机试(北京) -
zzq007:
public static String isP ...
2012华为机试(北京) -
zzq007:
可以使用StringBuffer吗?
使用StringBuff ...
2012华为机试(北京)
【说明】:本文阐述jqGrid在ASP.NET MVC 3中的实现。
使用的开发工具如下:VS2010、Oracle11g。
【本文的源代码见附件!!】
言归正传,开始讲如何实现Demo。
第一步:右击“VS2010”,以“管理员身份运行”。如图1所示:
图1
【说明】:因为我的程序会部署在IIS上,所以需要以管理员身份运行程序。
若不知IIS为何物,请百度orGoogle
若不知如何开启/使用IIS,请参考:如何开启/使用IIS
第二步:建立ASP.NET MVC 3的应用程序,solution的我们称之为:LearnjqGrid。如图2所示:
图2
第三步:建立“Common”、“Domain”两个文件夹。其中,Common用于封装连接数据库的类,Domain用于存放对Model的操作方法。目录结构如图3所示:
图 3
第四步:创建Model、连接数据库、相应操作方法。
【说明】:本人使用的是Oracle 自带的scott用户的表。如何开启/使用scott用户,请参考:scott用户解锁
(1) 在Common文件之下创建数据库连接类--OracleManager.cs
代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Oracle.DataAccess.Client; //不要忘记此引用 namespace LearnjqGrid.Common { public static class OracleManager { //scott用户的默认密码为:tiger private static readonly string connectionStr = @"User Id=scott; Password=tiger; Data Source=(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST = localhost)(PORT = 1521))(CONNECT_DATA =(SERVER = DEDICATED)(SERVICE_NAME = ORCL)))"; public static OracleConnection GetOracleConnection() { OracleConnection conn = new OracleConnection(); conn.ConnectionString = connectionStr; conn.Open(); return conn; } } }
【说明】:在引用“Oracle.DataAccess.Client”之前,需要在程序中添加Oracle.DataAccess.dll。
(2)scott用户下有一个DEPT表(即,部门表),我们就使用该表。在Models的AccountModels.cs中添加DEPT的模型,代码如下:
/** * 部门表的Model * **/ public class DepementModel { public int DEPTNO { get; set; } // NUMBER(2) not null, public string DNAME { get; set; } // VARCHAR2(14), public string LOC { get; set; } //VARCHAR2(13) }
(3)在Domain文件夹下建立:DepartmentDomain.cs。具体实现代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using LearnjqGrid.Models; //不要忘记引入 using LearnjqGrid.Common; //不要忘记 using Oracle.DataAccess.Client; //不要忘记 namespace LearnjqGrid.Domain { public class DepartMentDomain { /** * 获取所有数据 * * */ public List<object> GetAllDeptmentInfo() { List<object> returnList = new List<object>(); int itemNo = 1; string sqlString = " select t.* from dept t "; OracleConnection connection = OracleManager.GetOracleConnection(); try { OracleCommand command = new OracleCommand(); command.CommandText = sqlString; command.Connection = connection; OracleDataReader reader = command.ExecuteReader(); while (reader.Read()) { DepementModel deptmentModel = new DepementModel(); if (!Convert.IsDBNull(reader["DEPTNO"])) { deptmentModel.DEPTNO = reader.GetInt32(reader.GetOrdinal("DEPTNO")); } if (!Convert.IsDBNull(reader["DNAME"])) { deptmentModel.DNAME = reader.GetString(reader.GetOrdinal("DNAME")); } if (!Convert.IsDBNull(reader["LOC"])) { deptmentModel.LOC = reader.GetString(reader.GetOrdinal("LOC")); } var row = new { id = itemNo, cell = new string[] { deptmentModel.DEPTNO.ToString(), deptmentModel.DNAME, deptmentModel.LOC } }; returnList.Add(row); itemNo++; } return returnList; } catch (Exception e) { throw new Exception("Error take place at :domain.BasicDict.GetAllDrugMedicalInfo,Error Message:" + e.Message); } finally { if (connection != null) { connection.Close(); } } } } }
第五步:创建Controller。
(1) 在Controller文件下建立:DepartmentController.cs,并在在文件中加入以下GetAllDepartmentInfo()方法。
DepartmentController.cs代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Script.Serialization; //不要忘记引用 using LearnjqGrid.Domain; //不要忘记引用 using LearnjqGrid.Models; //不要忘记引用 namespace LearnjqGrid.Controllers { public class DepartmentController : Controller { // // GET: /Department/ public ActionResult Index() { return View(); }//The end of method /** * 获得所有部门信息 * */ public string GetAllDepartmentInfo() { List<object> list = new List<object>(); DepartMentDomain departmentDomain = new DepartMentDomain(); var returnstr = new { success = "false", message = "", data = list }; try { list = departmentDomain.GetAllDeptmentInfo(); returnstr = new { success = "true", message = "", data = list }; return new JavaScriptSerializer().Serialize(returnstr); } catch (Exception e) { returnstr = new { success = "false", message = "方法发生了异常,异常内容:" + Environment.NewLine + e.Message, data = list }; return new JavaScriptSerializer().Serialize(returnstr); } } }//Tne end of class }// The end of namaspace
(2)将光标放在Index()方法内,点击右键,选择“Add View”,如图4所示:
图 4
View按默认名称即可。如图5所示
图 5
创建完成之后,在View文件夹之下,会出现相应的View,如图6所示
图 6
第六步:编写View代码。
(1)引入gqGrid的js文件。根据自己的需求,引入相应的js文件。我的引用如图7所示。其中这些文件我已经添加到附件中,大家可以下载。
图 7
(2)在Views/Shared/Site.Master(母版)中添加引用。母版的代码如下:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> <!DOCTYPE html> <html> <head id="Head1" runat="server"> <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> <link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <link href="../../Content/themes/base/layout-default-latest.css" rel="stylesheet" type="text/css" /> <script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.ui.datepicker-zh-CN.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.cookie.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.hotkeys.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jstree.js") %>" type="text/javascript"></script> <link href="../../Content/themes/base/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <link href="../../Content/themes/base/ui.multiselect.css" rel="stylesheet" type="text/css" /> <script src="<%: Url.Content("~/Scripts/jquery.layout.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.layout-latest.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/grid.locale-cn.js") %>" type="text/javascript"></script> <script type="text/javascript"> $.jgrid.no_legacy_api = true; $.jgrid.useJSON = true; </script> <script src="<%: Url.Content("~/Scripts/ui.multiselect.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqGrid.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.tablednd.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.contextmenu.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/grid.custom.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/grid.common.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/Common/RuntimeUtility.js") %>" type="text/javascript"></script> </head> <body> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> </body> </html>
(3)编写View实现代码
Index.aspx的代码如下:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 部门信息 </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="<%: Url.Content("~/Scripts/DepartMent/department.js") %>" type="text/javascript"></script> <div id="header_div"> <h1>部门信息查询</h1> </div> <div id="main_div"> </div> <div id="table_div"> <table id="DepetmentTable" /> <div id="DepetmentTable_pager" /> </div> </asp:Content>
在Index.aspx中引用了一js文件,
<script src="<%: Url.Content("~/Scripts/DepartMent/department.js") %>" type="text/javascript"></script>
此文件是在Scripts文件夹下建立的一个js文件。如图8所示:
图 8
该js(department.js)文件的代码:
$(function () { $("#DepetmentTable").jqGrid({ url: '/LearnjqGrid/Department/GetAllDepartmentInfo', // postData: { // DictType: function () { return $("#DictType").val(); }, // DictCode: function () { return $("#DictCode").val(); } // }, //datatype: "json", 为了使进入界面时不显示数据,注释 datatype: "json", loadonce: true, //用于实现分页功能 colNames: ['部门编号', '部门名称', 'LOC'], colModel: [ { name: 'DEPTNO', index: 'DEPTNO', sortable: false, align: 'left', width: 100, editable: true, edittype: 'text' }, { name: 'DNAME', index: 'DNAME', sortable: false, width: 110, editable: true, edittype: 'text' }, { name: 'LOC', index: 'LOC', sortable: false, width: 120, editable: true, edittype: 'text'}], rowNum: 10, rowList: [10, 20, 25], pager: jQuery('#DepetmentTable_pager'), sortname: 'DEPTNO', viewrecords: true, rownumbers: true, sortorder: "asc", caption: "数据", width: 'auto', height: 200, imgpath: '', jsonReader: { root: "data" } }); $("#DepetmentTable").jqGrid('navGrid', '#DepetmentTable_pager', { edit: false, add: false, del: false }); });
第七步:使用IIS“运行”程序。
右击项目,选择属性,如图9所示。
图 9
建立虚拟目录:图10所示
图 10
第八步:运行程序。
(1)在项目中点击右键,选择“重新生成”
(2)在浏览器中输入:http://localhost/LearnjqGrid/Department/Index,便可以访问
第九步:运行结果如图11所示
图 11
额,不没有调试。。。。。
调试之后的界面如图12所示
【备注】欢迎指正和讨论
【结束】
- Scripts.rar (528 KB)
- 下载次数: 5
- LearnjqGrid.rar (2.3 MB)
- 下载次数: 6
发表评论
-
html+CSS制作照片墙
2013-05-09 21:38 3874今天看到一个比较漂亮的照片墙,所以就跟学 ... -
HTML与CSS3编写menu
2013-04-15 23:07 1241在网上看到很多做的非常漂亮的menu, ... -
VS2010支持CSS3
2013-02-27 23:24 1405在VS2010中,对CSS验证支持只有CS ... -
前台的界面开发相关
2013-02-19 20:40 835自己前端开发笔记!(2013-2-19) 1、 ... -
界面中常用的颜色代码
2013-01-10 10:23 4颜色代码I: <!-- [if gte mso ... -
控件使用(fieldset 、GroupBox、Radio)
2012-12-26 13:36 1068在做桌面应用程序时,经常会用到GroupBox控件,使用 ...
相关推荐
在 ASP.NET MVC 4.0 框架中集成 jqGrid,可以构建功能丰富的数据管理界面,为用户提供交互式的表格体验。 首先,让我们深入了解一下 ASP.NET MVC 4.0。这是 Microsoft 提供的一个开源框架,用于构建动态、数据驱动...
jqGrid in ASP.NET MVC 3 and Razor.zipjqGrid in ASP.NET MVC 3 and Razor.zipjqGrid in ASP.NET MVC 3 and Razor.zip
实例讲解在ASP.NET MVC模式通过jQgrid表格操作 文章来自学IT网:http://www.xueit.com/asp.net/show-9768-3.aspx实例讲解在ASP.NET MVC模式通过jQgrid表格操作 文章来自学IT网:...
在这个"jqGrid的asp.net例子"中,我们将深入探讨如何将jqGrid与ASP.NET框架结合,以及与SQL Server 2008数据库(具体示例使用AdventureWorks数据库)进行交互。 首先,ASP.NET是微软开发的一种Web应用程序框架,...
在这个实例中,我们将深入探讨如何在ASP.NET MVC中集成JQGrid进行数据的增删改查操作。 **一、JQGrid简介** JQGrid是一款基于jQuery的表格插件,它提供了丰富的数据展示和操作功能,如分页、排序、过滤、编辑和搜索...
asp.net MVC5 + Bootstrap 增删改查分页(重点是里面的table及分页用法)。另外说一下项目用到了bootstrap-table,bootstrap-dialog,bootstrap-daterangepicker组件,很不错的几个组件
在 jqGridASPNET_3_8_1_0 这个文件名中,我们可以推测这是 jqGrid 版本 3.8.1.0 的 ASP.NET 示例代码。版本号表明这是一个较旧的版本,因为当前 jqGrid 已经发展到了更高的版本。尽管如此,旧版本的示例仍然有学习...
一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架源代码! 采用主流框架,容易上手,简单易学,学习成本低。可完全实现二次开发、基本满足80%项目需求。 可以帮助解决.NET项目70%的重复工作,让开发更多关注业务...
"Add, Edit, Delete"是任何数据管理界面的基本功能,这些功能在ASP.NET MVC中通过CRUD(创建、读取、更新、删除)操作实现。下面将详细介绍如何在ASP.NET MVC中实现这些功能。 首先,我们需要一个数据库模型(Model...
jqGrid 是一个用来显示网格数据的jQuery插件,本示例演示C#下使用jqGrid+MySQL和jqGrid+MSSQL显示datatable,以及在ASP.NET MVC下使用jqGrid的源码范例。
在ASP.NET中,你可以创建一个Web服务(如ASMX服务)或者使用MVC控制器来响应jqGrid的数据请求。例如,在`Data.asmx`中定义一个名为`GetGridData`的方法,返回JSON格式的数据: ```csharp [WebMethod] public string...
jQuery ASP.Net MVC ...一个ASP.Net MVC兼容包基础上完成控制jQuery和jqGrid框架。 * Ajax的分页,编辑,分格,批量更新 * 标准widgets,如DatePicker * 还有更多- 所有.NET Fluent-like配置和intellisense支持。
在ASP.NET MVC框架中,jqGrid提供了一个强大的客户端与服务器端数据交互的解决方案。 **ASP.NET MVC框架** ASP.NET MVC(Model-View-Controller)是微软提供的一种用于构建可维护性和测试性强的Web应用程序的开发...
5. **jqGrid**:在提供的文件`jqgrid-asp.net-mvc-master`中,我们看到的是jqGrid的ASP.NET MVC实现。jqGrid是一个强大的jQuery插件,用于创建交互式的网格视图,它也支持分页。虽然它不是MVCPAGER,但可以作为替代...
4. 数据绑定:在ASP.NET中,jqGrid可以通过AJAX获取服务器端的数据,实现动态加载。这通常涉及到使用ASP.NET MVC的Action方法返回JSON或XML数据,然后在客户端使用jqGrid的`url`参数指定数据源。 5. jqGrid配置:...
- 在实现过程中可能遇到的问题还包括页面布局问题,例如左侧空白的处理,这可能与jqGrid本身的样式设置有关。 2. jquery Datatables在*** MVC中的实现 - Datatables同样是jQuery的一个插件,提供丰富的数据表格...
在这个`MVC demo`中,我们看到的是将`jqGrid`集成到ASP.NET MVC框架的应用实例,同时还有`jqChart`的使用,这是一个用于创建图表的jQuery插件。 **ASP.NET MVC框架** ASP.NET MVC是一种模型-视图-控制器(Model-...
本文将围绕"jqGridASPNET_MVC_3_8_1_0.zip"这个压缩包,详细阐述jqGrid在ASP.NET MVC 3.8.1.0版本中的应用和关键知识点。 一、jqGrid简介 jqGrid是一款基于jQuery的数据网格组件,它提供了强大的数据操作功能,如...