jqGrid在ASP.NET MVC 3中的实现

阅读更多

 

【说明】:本文阐述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 GetAllDeptmentInfo()
        {
            List returnList = new List();


            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 list = new List();
            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" %>





    <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    

    
                
            


 

(3)编写View实现代码

 

Index.aspx的代码如下:

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>


    部门信息





部门信息查询

 

 

在Index.aspx中引用了一js文件,

 此文件是在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

你可能感兴趣的:(jqGrid,Demo,jQuery,VS2010)