`
南山忍者
  • 浏览: 85760 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqGrid在ASP.NET MVC 3中的实现

    博客分类:
  • HTML
阅读更多

 

【说明】:本文阐述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所示

 


【备注】欢迎指正和讨论

【结束】

分享到:
评论

相关推荐

    jqGrid for ASP.NET MVC 4.0

    在 ASP.NET MVC 4.0 框架中集成 jqGrid,可以构建功能丰富的数据管理界面,为用户提供交互式的表格体验。 首先,让我们深入了解一下 ASP.NET MVC 4.0。这是 Microsoft 提供的一个开源框架,用于构建动态、数据驱动...

    jqGrid in ASP.NET MVC 3 and Razor.zip

    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表格操作

    实例讲解在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例子"中,我们将深入探讨如何将jqGrid与ASP.NET框架结合,以及与SQL Server 2008数据库(具体示例使用AdventureWorks数据库)进行交互。 首先,ASP.NET是微软开发的一种Web应用程序框架,...

    ASP.NET MVC JQGRID 增删改查 实例

    在这个实例中,我们将深入探讨如何在ASP.NET MVC中集成JQGrid进行数据的增删改查操作。 **一、JQGrid简介** JQGrid是一款基于jQuery的表格插件,它提供了丰富的数据展示和操作功能,如分页、排序、过滤、编辑和搜索...

    asp.net MVC5 + Bootstrap 增删改查分页(最新)

    asp.net MVC5 + Bootstrap 增删改查分页(重点是里面的table及分页用法)。另外说一下项目用到了bootstrap-table,bootstrap-dialog,bootstrap-daterangepicker组件,很不错的几个组件

    jqGrid dome asp.net

    在 jqGridASPNET_3_8_1_0 这个文件名中,我们可以推测这是 jqGrid 版本 3.8.1.0 的 ASP.NET 示例代码。版本号表明这是一个较旧的版本,因为当前 jqGrid 已经发展到了更高的版本。尽管如此,旧版本的示例仍然有学习...

    ASP.NET MVC+EF6+Bootstrap开发C#源代码

    一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架源代码! 采用主流框架,容易上手,简单易学,学习成本低。可完全实现二次开发、基本满足80%项目需求。 可以帮助解决.NET项目70%的重复工作,让开发更多关注业务...

    asp.net mvc add edit delete

    "Add, Edit, Delete"是任何数据管理界面的基本功能,这些功能在ASP.NET MVC中通过CRUD(创建、读取、更新、删除)操作实现。下面将详细介绍如何在ASP.NET MVC中实现这些功能。 首先,我们需要一个数据库模型(Model...

    jqGrid + ASP.NET+MYSQL(MSSQL)示例源码

    jqGrid 是一个用来显示网格数据的jQuery插件,本示例演示C#下使用jqGrid+MySQL和jqGrid+MSSQL显示datatable,以及在ASP.NET MVC下使用jqGrid的源码范例。

    ASP.NET jqGRID 控件 源代码 示例

    在ASP.NET中,你可以创建一个Web服务(如ASMX服务)或者使用MVC控制器来响应jqGrid的数据请求。例如,在`Data.asmx`中定义一个名为`GetGridData`的方法,返回JSON格式的数据: ```csharp [WebMethod] public string...

    jQuery ASP.Net MVC Controls源码

    jQuery ASP.Net MVC ...一个ASP.Net MVC兼容包基础上完成控制jQuery和jqGrid框架。 * Ajax的分页,编辑,分格,批量更新 * 标准widgets,如DatePicker * 还有更多- 所有.NET Fluent-like配置和intellisense支持。

    jqgrid-sample:ASP.NET MVC 中的 JQuery Grid 示例项目

    在ASP.NET MVC框架中,jqGrid提供了一个强大的客户端与服务器端数据交互的解决方案。 **ASP.NET MVC框架** ASP.NET MVC(Model-View-Controller)是微软提供的一种用于构建可维护性和测试性强的Web应用程序的开发...

    mvc分页,MVCPAGER,asp.net

    5. **jqGrid**:在提供的文件`jqgrid-asp.net-mvc-master`中,我们看到的是jqGrid的ASP.NET MVC实现。jqGrid是一个强大的jQuery插件,用于创建交互式的网格视图,它也支持分页。虽然它不是MVCPAGER,但可以作为替代...

    asp.net + jqgrid

    4. 数据绑定:在ASP.NET中,jqGrid可以通过AJAX获取服务器端的数据,实现动态加载。这通常涉及到使用ASP.NET MVC的Action方法返回JSON或XML数据,然后在客户端使用jqGrid的`url`参数指定数据源。 5. jqGrid配置:...

    ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    - 在实现过程中可能遇到的问题还包括页面布局问题,例如左侧空白的处理,这可能与jqGrid本身的样式设置有关。 2. jquery Datatables在*** MVC中的实现 - Datatables同样是jQuery的一个插件,提供丰富的数据表格...

    jqGrid MVC demo(含jqChart)

    在这个`MVC demo`中,我们看到的是将`jqGrid`集成到ASP.NET MVC框架的应用实例,同时还有`jqChart`的使用,这是一个用于创建图表的jQuery插件。 **ASP.NET MVC框架** ASP.NET MVC是一种模型-视图-控制器(Model-...

    jquery jqGridASPNET_MVC_3_8_1_0.zip

    本文将围绕"jqGridASPNET_MVC_3_8_1_0.zip"这个压缩包,详细阐述jqGrid在ASP.NET MVC 3.8.1.0版本中的应用和关键知识点。 一、jqGrid简介 jqGrid是一款基于jQuery的数据网格组件,它提供了强大的数据操作功能,如...

Global site tag (gtag.js) - Google Analytics