jqGrid在ASP.NET MVC 3中的实现

南山忍者

浏览: 85741 次
性别:
来自: 北京

最近访客更多访客>>

zhouguangrui

loris_jand

hillsoul

guolang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

jqGrid Demo jQuery VS2010

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