基于ASP.NET MVC PV3与ExtJS2.0的开发(CRUD)

1、本系列文章为原创，如有转载请注明作者（cmsoft）和出处（博客园）；
2、本系列文章不在讲述asp.net mvc与ExtJs相关的基础知识，如要了解基本知识的请参考我以前的文章。
先看效果图：

看上去很酷吧，呵呵：）
以上功能主要有以下几个文件组成：
显示、删除功能实现
1.ExtJs的Grid显示（CMS.js）

CMS.js
  1/**//*
  2 * Ext JS Library 2.0
  3 * Copyright(c) 2006-2007, Ext JS, LLC.
  4 * licensing@extjs.com
  5 * 
  6 * http://extjs.com/license
  7 */
  8Ext.util.CSS.swapStyleSheet("theme","http://localhost/PoloSoft/Resources/css/xtheme-gray.css");
  9Ext.onReady(function(){
 10       Ext.QuickTips.init();
 11       var myUrl='http://localhost/PoloSoft/';
 12      // create the Data Store
 13        var ds = new Ext.data.GroupingStore({
 14        // load using script tags for cross domain, if the data in on the same domain as
 15        // this page, an HttpProxy would be better
 16        proxy: new Ext.data.HttpProxy({
 17            url: myUrl+'Admin/CmsDataSource'
 18        }),
 19
 20        // create reader that reads the project records
 21        reader: new Ext.data.JsonReader(
 22        {
 23            totalProperty: "results",     // The property which contains the total dataset size (optional)
 24            root: "rows",                         // The property which contains an Array of row objects
 25            id: "id"                                    // The property within each row object that provides an ID for the record (optional)
 26        },[
 27            {name:'ID',                              type:'int'},
 28            {name:'CATALOG_NAME',  type:'string'},
 29            {name:'TITLE',                        type:'string'},
 30            {name:'AUTHOR',                 type:'string'},
 31            {name:'CREATE_TIME',         type:'string'},
 32            {name:'NEWS_FROM',         type:'string'}
 33         ]),
 34        groupField:'CATALOG_NAME',
 35
 36        // turn on remote sorting
 37        remoteSort: false
 38    });
 39    ds.setDefaultSort('CREATE_TIME', 'desc');
 40
 41    // formate ms json date formate
 42    function renderDate(value, p, record){
 43       var jsondate = record.data.CREATE_TIME;
 44//       var s = "";           // 声明变量
 45       jsondate = eval("new " + jsondate.substr(1,jsondate.length-2));   // 创建 Date 对象
 46//       s += jsondate.getYear()+ "-";                  // 获取年份
 47//       s += (jsondate.getMonth() + 1) + "-";   // 获取月份
 48//       s += jsondate.getDate() ;                         // 获取日
 49//       return(s);    
 50        return jsondate.toLocaleDateString();
 51    }
 52
 53    // the column model has information about grid columns
 54    // dataIndex maps the column to the specific data field in
 55    // the data store
 56    var nm = new Ext.grid.RowNumberer();
 57    var sm = new Ext.grid.CheckboxSelectionModel();  // add checkbox column
 58    var cm = new Ext.grid.ColumnModel([nm,sm,
 59        {id:'ID',header:"编号",dataIndex: 'ID', width: 40, align:'center'},
 60        {header:"所属板块",dataIndex: 'CATALOG_NAME',  width: 70,align:'center'  },
 61        {header:"标题",dataIndex: 'TITLE',     width:200, align:'left'},
 62        {header:"作者",dataIndex: 'AUTHOR',  width:50, align:'center'},
 63        {header:"来源",  dataIndex: 'NEWS_FROM',width: 50, align:'center'},
 64        {header:"发布时间",  dataIndex: 'CREATE_TIME', renderer: renderDate,width: 50, align:'center'}
 65    ]);
 66
 67    //hide column
 68   cm.setHidden(2, !cm.isHidden(2));   //隐藏编号列
 69
 70  // by default columns are sortable
 71  // cm.defaultSortable = true;
 72   var gdCMS = new Ext.grid.GridPanel({
 73        el:'cms-grid',
 74        title:'信息数据一览表',
 75        iconCls: 'icon-grid',
 76        layout:'fit',
 77        bodyStyle:'width:100%',
 78        height:605,
 79        monitorWindowResize:true,
 80        monitorResize:true,
 81        autoScroll:true,
 82        store: ds,
 83        cm: cm,
 84        sm: sm,
 85        trackMouseOver:true,
 86        loadMask: {msg:'正在加载数据，请稍侯……'},
 87        viewConfig: {
 88            enableRowBody:true,
 89            getRowClass : function(record, rowIndex, p, ds){
 90                return 'x-grid3-row-collapsed';
 91            }
 92        },
 93        view: new Ext.grid.GroupingView({
 94            forceFit:true,
 95            groupTextTpl: '{text} ({[values.rs.length]}条记录)'
 96        }),
 97         bbar: new Ext.PagingToolbar({
 98            pageSize: 25,
 99            store: ds,
            displayInfo: true,
            displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
            emptyMsg: "无显示数据"
        }),
        tbar:[
        {
            id:'btnAdd',
            text:'新增',
            tooltip:'新增',
            iconCls:'add',
            handler: function(){window.location.href=myUrl+'Admin/Add';}
        },
         {
            id:'btnAdd',
            text:'编辑',
            tooltip:'编辑',
            iconCls:'edit',
            handler: doEdit
        },
        {
            id:'btnDel',
            text:'删除',
            tooltip:'批量删除',
            iconCls:'remove',
            handler:doDel
        },
            new Ext.app.SearchField({
                store: ds,
                width:320,
                emptyText:'搜索信息'
            })
        ]
    });
    
    
    gdCMS.render();
    
    // trigger the data store load
    ds.load({params:{start:0, limit:25}});
    
    
    function doEdit()
    {
        var row=gdCMS.getSelections();
        if(row.length==1)
        {
          var id = row[0].get("ID");
          window.location.href=myUrl+'Admin/Edit?id='+id;  
        }                   
        else
        {
          Ext.MessageBox.alert("提示","请选1条记录进行编辑！");
        }
    }
       
    function doDel()
    {
        Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);
    }  
    function showResult(btn){
         if(btn=='yes'){
          var row=gdCMS.getSelections();
          var jsonData="";
          for(var i=0,len=row.length;i<len;i++){
            var id = row[i].get("ID");
            if(i==0)
              jsonData =id;                                 //这样处理是为了删除的Lambda语句方便
            else
              jsonData = jsonData + ","+ id;   //这样处理是为了删除的Lambda语句方便
          }
          jsonData=","+jsonData+",";           //这样处理是为了删除的Lambda语句方便
          var conn = new Ext.data.Connection();
          conn.request({
            url:myUrl+"Admin/Delete",
            params:{idList:jsonData},
            method: 'post',
            scope: this,
            callback:function(options,success, response){ 
           if(success){   
              Ext.MessageBox.alert("提示","所选记录成功删除！");
              ds.load({params:{start:0, limit:25}});     
            }    
            else     
                {Ext.MessageBox.alert("提示","所选记录删除失败！");}     
            }  
          })
         }
    };
});

2.Controller实现CmsDataSource

AdminController.cs
 1CMSDataContext db = new CMSDataContext();
 2        public object  GetCMSInfo(int? start,int? limit)
 3        {
 4            var query = from p in db.CMS_INFOs
 5                       join m in db.CMS_CATALOGs on p.CATALOG_ID equals m.CATALOG_ID
 6                       select new { 
 7                                                ID=p.ID, 
 8                                                CATALOG_NAME=m.CATALOG_NAME, 
 9                                                TITLE=p.TITLE, 
                                                NEWS_FROM=p.NEWS_FROM, 
                                                AUTHOR=p.AUTHOR, 
                                                CREATE_TIME=p.CREATE_TIME 
                                            };
            ViewData["totalCount"] = query.Count();
            int PageNum = start.Value / limit.Value;  //共有页数 
            int PageSize = limit.Value;
            query = query.Skip(PageSize * PageNum).Take(PageSize);  //当前页记录
            return query.ToList();
            //return news.OrderByDescending(c => c.CREATE_TIME).ToList();
        }

 public  ActionResult CmsDataSource(int? start,int? limit)
        {
            ViewData["CMS"] = GetCMSInfo(start.Value,limit.Value);
            return View(ViewData["CMS"]);
        }

3.删除方法

AdminController.cs
 1 public bool Delete(string idList)
 2        {
 3            bool result = false;
 4            try
 5            {
 6                var query = from p in db.CMS_INFOs
 7                               where idList.IndexOf(","+p.ID+",") >= 0
 8                               select p;
 9                db.CMS_INFOs.DeleteAllOnSubmit(query);
                db.SubmitChanges();
                result = true;
            }
            catch
            {
                result = false;
            }
           
            return result;
        }

4.编辑和新增功能

Code
 1 public ActionResult Modify(int? id)
 2        {
 3            string resultJson;
 4            try
 5            {
 6                CMS_INFO cms = db.CMS_INFOs.First(c=>c.ID==id.Value);
 7                cms.AUTHOR = Request.Form["author"];
 8                cms.CATALOG_ID = int.Parse(Request.Form["catalogID"]);
 9                cms.CREATE_TIME = DateTime.Parse(Request.Form["createDate"]);
                cms.NEWS_CONTENT = Request.Form["content"];
                cms.NEWS_FROM = Request.Form["from"];
                cms.TITLE = Request.Form["title"];
                db.SubmitChanges();
                resultJson = @"{success: true}";
            }
            catch (Exception ex)
            {
                string msg = ex.Message;
                resultJson = @"{success: false,msg:'数据修改失败了！'}";
            }
            ViewData["resultJson"] = resultJson;
            return View("Modify");
        }

 public ActionResult Insert()
        {
            string resultJson;
            try
            {
                CMS_INFO cms = new CMS_INFO();
                cms.AUTHOR =Request.Form["author"];
                cms.CATALOG_ID = int.Parse(Request.Form["catalogID"]);
                cms.CREATE_TIME = DateTime.Parse(Request.Form["createDate"]);
                cms.NEWS_CONTENT = Request.Form["content"];
                cms.NEWS_FROM = Request.Form["from"];
                cms.TITLE = Request.Form["title"];
                db.CMS_INFOs.InsertOnSubmit(cms);
                db.SubmitChanges();
                resultJson=@"{success: true}";
            }
            catch(Exception ex)
            {
                string msg = ex.Message;
                resultJson = @"{success: false,msg:'数据保存失败了！'}";
            }
            ViewData["resultJson"] = resultJson;
            return View("Insert");
        }

具体的请看Sample,从这里下载（PoloSoft.bak是数据库备份文件，配置的时候请更改你的web.config文件）。
如有不明白的请在评论里提出，我将安排时间回答。