ExtJS与.NET结合开发实例(Grid之新增——Form提交篇)_[Asp.Net教程]

Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/1/30 1:01:50
ExtJS与.NET结合开发实例(Grid之新增——Form提交篇)_[Asp.Net教程]

我的ExtJS与.NET结合开发实例系列：
1.ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)
2.ExtJS与.NET结合开发实例(Grid之批量删除篇)
感谢大家对两篇文章的关注，我将尽力帮助需要用到ExtJS开发的朋友去解决开发中遇到的问题.
言归正传，我们新增记录功能的步骤如下：
1.新建FORM
FORM的建立是用ExtJS实现在GridForProjectLists.js文件中的。注意的是，我同时做了个ExtJS的ComboBox
ComboBox实现: 1var storeDept = new Ext.data.Store({
2 proxy: new Ext.data.HttpProxy({
3 url:"../Projects/JsonDataSource/DepartmentInfo.aspx"
4 }),
5 // create reader that reads the project records
6 reader: new Ext.data.JsonReader({},[
7 {name:'Text',type:'string'},
8 {name:'Value',type:'string'}
9 ])
10 });
11 storeDept.load();
12
13 var storeStatus = new Ext.data.Store({
14 proxy: new Ext.data.HttpProxy({
15 url:"../Projects/JsonDataSource/GetProjectStatus.aspx"
16 }),
17 // create reader that reads the project records
18 reader: new Ext.data.JsonReader({},[
19 {name:'NAME',type:'string'},
20 {name:'CODE',type:'string'}
21 ])
22 });
23 storeStatus.load(); 这里的实现了两个ComboBox,一个是部门选择，一个是状态选择。我这里只说其中一个数据源的写法，即GetProjectStatus.aspx。
新建GetProjectStatus.aspx文件，代码如下：
GetProjectStatus.aspx
1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetProjectStatus.aspx.cs" Inherits="Web.Projects.JsonDataSource.GetProjectStatus" %>
2<%=strJsonSource %> 1using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Linq;
6using System.Web;
7using System.Web.Security;
8using System.Web.UI;
9using System.Web.UI.WebControls;
10using System.Web.UI.WebControls.WebParts;
11using System.Web.UI.HtmlControls;
12using System.Xml.Linq;
13using BusinessObject.Projects;
14using Database;
15using Web.Components;
16namespace Web.Projects.JsonDataSource
17{
18 public partial class GetProjectStatus : System.Web.UI.Page
19 {
20 protected string strJsonSource = string.Empty;
21 protected void Page_Load(object sender, EventArgs e)
22 {
23 GetJsonSouceString();
24 }
25
26 //这些不用我注释了吧，呵呵
27 private void GetJsonSouceString()
28 {
29 ProjectDictDataContext db = new ProjectDictDataContext();
30 var query = from p in db.PROJECT_DICTs
31 where p.DICT_TYPE == "003"
32 select new { p.NAME, p.CODE };
33 strJsonSource = query.ToJSON();
34 }
35 }
36}
37
接下来，回到GridForProjectLists.js文件上，我们实现FORM，代码如下：
Form表单实现
1var addForm = new Ext.FormPanel({
2 layout:'column',
3 items: [{
4 items: {
5 columnWidth:.5,
6 layout: 'form',
7 border:false,
8 items: [
9 {
10 xtype:'textfield',
11 fieldLabel: '      合同编号',
12 width:200,
13 name: 'contractno',
14 allowBlank:false
15 },
16 {
17 xtype:'textfield',
18 fieldLabel: '      项目名称',
19 width:200,
20 name: 'projectname',
21 allowBlank:false,
22 blankText: '项目名称不能为空！'
23 },
24 new Ext.form.ComboBox({
25 fieldLabel: '      所属部门',
26 name:'dept',
27 store: storeDept,
28 displayField:'Text',
29 valueField: 'Value',
30 hiddenName:'deptno',
31 width: 200,
32 //typeAhead: true,
33 mode: 'remote',
34 triggerAction: 'all',
35 emptyText:'请选择部门',
36 selectOnFocus:true//,
37 //applyT 'local-states'
38 })
39 ,{
40 xtype:'textfield',
41 fieldLabel: '      项目经理',
42 width:200,
43 name: 'projectmanager',
44 allowBlank:false
45 },
46
47 new Ext.form.DateField({
48 fieldLabel: '      预计开始时间',
49 name: 'startTime',
50 width:200
51 //allowBlank:false
52 }),
53 new Ext.form.DateField({
54 fieldLabel: '      实际开始时间',
55 name: 'RealStartTime',
56 width:200
57 //allowBlank:false
58 }),
59 new Ext.form.ComboBox({
60 fieldLabel: '      当前状态',
61 name:'Status', //用来取text
62 store: storeStatus,
63 displayField:'NAME',
64 valueField: 'CODE',
65 width: 200,
66 hiddenName:'StatusNo', //用来取value
67 //typeAhead: true,
68 mode: 'remote',
69 triggerAction: 'all',
70 emptyText:'请选择项目状态',
71 selectOnFocus:true
72 })
73 ]
74 }
75 }, {
76 items: {
77 columnWidth:.5,
78 layout: 'form',
79 border:false,
80 items: [
81 {
82 xtype:'textfield',
83 fieldLabel: '      项目编号',
84 width:200,
85 name: 'projectno',
86 allowBlank:false,
87 blankText: '项目编号不能为空！'
88 },{
89 xtype:'textfield',
90 fieldLabel: '      项目简称',
91 width:200,
92 name: 'projectalias'
93 },{
94 //右边空一格
95 },
96 {
97 xtype:'textfield',
98 fieldLabel: '      开发经理',
99 width:200,
100 name: 'projectleader'
101 },
102 new Ext.form.DateField({
103 fieldLabel: '      预计结束时间',
104 name: 'endTime',
105 width:200
106 //allowBlank:false
107 }),
108 new Ext.form.DateField({
109 fieldLabel: '      实际结束时间',
110 name: 'RealEndTime',
111 width:200
112 //allowBlank:false
113 })
114 ]
115 }
116 }]
117 }); 在第一篇文章中，提到ADD的按钮需要实现showAddPanel的方法，代码如下：
新增的界面
1 function showAddPanel(){
2 // create the window on the first click and reuse on subsequent clicks
3 newwin = new Ext.Window({
4 xtype:'window',
5 buttonAlign : 'right',
6 closable:true,
7 layout:'fit',
8 modal: 'true',
9 width:700,
10 height:450,
11 closeAction:'hide',
12 plain: true,
13 items: new Ext.TabPanel({
14 activeTab: 0,
15 width:683,
16 height:253,
17 defaults:{bodyStyle:'padding:10px'},
18 xtype:'tabpanel',
19 plain:true,
20 defaults:{ frame:true},
21 closable:true,
22 items:[{
23 title: '基本信息',
24 layout:'column',
25 cls:'x-plain',
26 items:[
27 addForm
28 ]
29 },{
30 title: '跟踪信息',
31 layout:'fit',
32 cls:'x-plain',
33 items: [
34 gdNewProjectTracks
35 ]
36 },{
37 title: '备注',
38 cls:'x-plain',
39 layout:'fit',
40 items: {
41 xtype:'htmleditor',
42 id:'memo',
43 fieldLabel:'备注'
44 }
45 }]}),
46 buttons: [{
47 id:'btnSave',
48 text:'保存',
49 handler:doSave,
50 disabled:false
51 },{
52 text: '取消',
53 handler: function(){
54 newwin.hide();
55 }
56 }]
57 });
58 newwin.show(this);
59 } Form实现的最后一步是提交按钮的实现：
Submit
1 function doSave()
2 {
3 Ext.MessageBox.show({
4 msg: '正在保存数据, 请稍侯',
5 progressText: '正在保存中',
6 width:300,
7 wait:true,
8 waitConfig: {interval:200},
9 icon:'ext-mb-save',
10 nimEl: 'btnSave'
11 });
12
13 addForm.getForm().submit({
14 url:'../Projects/OperProjects/AddProjectBaseInfo.aspx',
15 method:'POST',
16 success: function(form, action){
17 Ext.MessageBox.hide();
18 Ext.MessageBox.alert('提示', '数据保存成功！');
19 newwin.hide();
20 ds.load({params:{start:0, limit:25}});
21 },
22 failure: function(form, action){
23 Ext.MessageBox.hide();
24 Ext.MessageBox.show({
25 title:'错误',
26 msg: '数据保存失败！',
27 buttons: Ext.Msg.OK,
28 icon: Ext.MessageBox.ERROR
29 });
30 }
31 });
32 }

2.实现新增记录的功能
从刚才的doSave方法中发现，新增功能在AddProjectBaseInfo.aspx页面中实现,代码如下：

1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddProjectBaseInfo.aspx.cs" Inherits="Web.Projects.OperProjects.AddProjectBaseInfo" %>
2<%=strJson %>

AddProjectBaseInfo.aspx.cs
1using System;
2using System.Collections;
3using System.Configuration;
4using System.Data;
5using System.Linq;
6using System.Web;
7using System.Web.Security;
8using System.Web.UI;
9using System.Web.UI.HtmlControls;
10using System.Web.UI.WebControls;
11using System.Web.UI.WebControls.WebParts;
12using System.Xml.Linq;
13using BusinessObject.Projects;
14namespace Web.Projects.OperProjects
15{
16 public partial class AddProjectBaseInfo : System.Web.UI.Page
17 {
18 protected string strJson = string.Empty;
19 protected void Page_Load(object sender, EventArgs e)
20 {
21 AddProject();
22 }
23
24 private void AddProject()
25 {
26 //这里我就不校验数据正确性了
27 string ProjectName = Request.Form["projectname"];
28 string ContractNo = Request.Form["contractno"];
29 string ProjectNo = Request.Form["projectno"];
30 string DeptNo = Request.Form["deptno"];
31 string PM = Request.Form["projectmanager"];
32 string ProjectAlias = Request.Form["projectalias"];
33 string PL = Request.Form["projectleader"];
34 DateTime StartTime =DateTime.Parse(Request.Form["startTime"]);
35 DateTime EndTime =DateTime.Parse(Request.Form["endTime"]);
36 DateTime RealStartTime = DateTime.Parse(Request.Form["RealStartTime"]);
37 DateTime RealEndTime = DateTime.Parse(Request.Form["RealEndTime"]);
38 string Status = Request.Form["StatusNo"];
39 try
40 {
41 ProjectBaseInfoDataContext db = new ProjectBaseInfoDataContext();
42 PROJECT_BASE_INFO project = new PROJECT_BASE_INFO();
43 project.PROJECT_ALIAS = ProjectAlias;
44 project.PROJECT_CURRENT_STATUS = Status;
45 project.PROJECT_DEPT_NO = DeptNo;
46 project.PROJECT_FINISH_DATE = EndTime;
47 project.PROJECT_LEADER = PL;
48 project.PROJECT_MANAGER = PM;
49 project.PROJECT_NAME = ProjectName;
50 project.PROJECT_NO = ProjectNo;
51 project.PROJECT_REAL_FINISH_DATE = RealEndTime;
52 project.PROJECT_REAL_START_DATE = RealStartTime;
53 project.PROJECT_START_DATE = StartTime;
54 db.PROJECT_BASE_INFOs.InsertOnSubmit(project);
55 db.SubmitChanges();
56 strJson = @"{success: true}";
57 }
58 catch(Exception ex)
59 {
60 string strMsg = ex.Message;
61 strJson = @"{success: false}";
62 }
63 }
64
65 }
66}
67
需要注意的是AddProjectBaseInfo.aspx.cs中需要返回JSON格式的success的true/false给doSave方法中调用。至此，新增功能已实现。
实现效果图如下：

Form方式的编辑功能不再提供，大家可以参考新增功能来实现，欲知ExtJS的其它功能，且听下回分解……

来源:cnblogs

If you have any requirements, please contact webmaster。(如果有什么要求，请联系站长)

QQ:154298438
QQ:417480759