为什么80%的码农都做不了架构师？>>>   

几点说明

  1. 这里所谓的Asp.NET后台，是指Asp.NET页面的aspx.cs文件的代码
  2. 请不要直接复制代码，由于各人环境不同，可能会产生异常
  3. 本篇中的代码说明中，将省略之前文章中所描述过的内容
  4. 下一篇记录如何实现表单控件事件的侦听

最简单的提交与后台消息回复

IDE: VS2010 SP1

ExtJS版本：3.4.0

前台Html页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复</title><!-- Common Libs --><link href="../Common/ext-all.css" rel="stylesheet" type="text/css" /><script src="../Common/ext-base-debug.js" type="text/javascript"></script><script src="../Common/ext-all-debug-w-comments.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">Ext.onReady(function () {var frm = new Ext.FormPanel({renderTo: document.body,title: '『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复 —— http://www.cnblogs.com/sitemanager/',url: '../jsonresponse.aspx',autoWidth: 'true',buttons: [{text: 'Save',handler: function () {frm.getForm().submit({success: function (f, a) {Ext.Msg.alert('Success', 'It worked');},failure: function (f, a) {Ext.Msg.alert('Warning', 'Error');}});}}, {text: 'Reset',handler: function () {frm.getForm().reset();}}]});});
</script>
</body>
</html>

后台Asp.NET代码using System;namespace csdemo.extjs
{public partial class jsonresponse : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){Response.Write("{success: true}");}}
}

说明：

  1. buttons 配置项是用于配置表单按钮的，之后的操作都是利用表单按钮的handler来进行的
  2. frm.getForm().submit() 与 frm.getForm.reset() 分别对应于Html表单的submit与reset操作
  3. 使用getForm用于获取对应表单
  4. success 与 failure 分别对应表单提交的两个状态，其后可跟函数，我这里放的是匿名函数。

效果图

带有回执消息的实现

前台代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复</title><!-- Common Libs --><link href="../Common/ext-all.css" rel="stylesheet" type="text/css" /><script src="../Common/ext-base-debug.js" type="text/javascript"></script><script src="../Common/ext-all-debug-w-comments.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">Ext.onReady(function () {// Provides attractive and customizable tooltips for any element. Ext.QuickTips.init();var classesStore = new Ext.data.SimpleStore({fields: ['id', 'class'],data: [['0', 'ExtJS 3.3.0'], ['1', 'ExtJS 3.4.0'], ['2', 'ExtJS 4.0']]});var frm = new Ext.FormPanel({renderTo: document.body,title: '『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复 —— http://www.cnblogs.com/sitemanager/',url: '../jsonresponse.aspx',autoWidth: 'true',buttons: [{text: 'Save',handler: function () {frm.getForm().submit({success: function (form, action) {frm.getForm().findField('title').setValue(action.result.title);frm.getForm().findField('author').setValue(action.result.author);frm.getForm().findField('email').setValue(action.result.email);frm.getForm().findField('site').setValue(action.result.site);frm.getForm().findField('contentEssay').setValue(action.result.contentEssay);Ext.Msg.alert('Success', 'Loaded all!');},failure: function (form, action) {Ext.Msg.alert('Warning', action.result.errorMsg);}});}}, {text: 'Reset',handler: function () {frm.getForm().reset();}}],items: [{xtype: 'textfield',fieldLabel: '文章标题',name: 'title',// Specify false to validate that the value's length is > 0 (defaults to true)allowBlank: 'false',width: 300,// A config object containing one or more event handlers to be added to this object during initialization.listeners: {specialkey: function (f, e) {if (e.getKey() == e.ENTER) {Ext.Msg.alert('Listen Success!', e.getKey);}}}}, {xtype: 'textfield',fieldLabel: '作者',name: 'author',width: 300}, {xtype: 'textfield',fieldLabel: '邮箱',name: 'email',// The error text to display when the email validation function returns false. vtype: 'emailText',allowBlank: 'true',width: 300}, {xtype: 'textfield',fieldLabel: '主页',name: 'site',// The error text to display when the url validation function returns false. vtype: 'urlText',allowBlank: 'true',width: 300}, {xtype: 'numberfield',fieldLabel: '发布次数',name: 'publishNumber',width: 300}, {xtype: 'combo',fieldLabel: '文章分类',name: 'class',/* Acceptable values are: * 'remote' : Default * Automatically loads the store the first time the trigger is clicked. If you do not want the store to be automatically loaded the first time the trigger is clicked, set to 'local' and manually load the store. To force a requery of the store every time the trigger is clicked see lastQuery. * 'local' : * ComboBox loads local data */mode: 'local',// The data source to which this combo is bound (defaults to undefined).store: classesStore,// The underlying data field name to bind to this ComboBoxdisplayField: 'class',width: 300}, {xtype: 'datefield',fieldLabel: '发布日期',name: 'publishDate',// An array of days to disable, 0 based (defaults to null).// disable Sunday and Saturday:disabledDays: [0, 6],width: 300}, {xtype: 'timefield',fieldLabel: '发布时间',increment: 15,name: 'publishTime',width: 300}, {xtype: 'radio',boxLabel: '随笔',fieldLabel: '文章类型',// Radio grouping is handled automatically by the browser if you give each radio in a group the same name.name: 'essayClass',width: 300}, {xtype: 'radio',boxLabel: '文章',name: 'essayClass',width: 300}, {xtype: 'checkbox',fieldLabel: '发布到首页',name: 'publishToSiteHome',width: 300}, {xtype: 'textarea',fieldLabel: '摘要',name: 'abstractEssay',width: 500,allowBlank: 'true',autoScroll: 'true',height: 30}, {// Provides a lightweight HTML Editor component.xtype: 'htmleditor',fieldLabel: '正文',name: 'contentEssay',width: 500,allowBlank: 'false',autoScroll: 'true',height: 300}]});});
</script>
</body>
</html>

后台代码using System;
using System.Web.Script.Serialization;namespace csdemo.extjs
{public partial class jsonresponse : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){int resMode;JavaScriptSerializer js = new JavaScriptSerializer();responseMsg resMsg = new responseMsg();resMode = 2;switch (resMode){case 1:resMsg.success = false;resMsg.errorMsg = "Test the Error Message";Response.Write(js.Serialize(resMsg));break;case 2:blogEssay bl = new blogEssay();bl.success = true;bl.title = "『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复";bl.author = "Aaron";bl.contentEssay = "test";bl.site = "http://www.cnblogs.com/sitemanager/";Response.Write(js.Serialize(bl));break;default:resMsg.success = false;resMsg.errorMsg = "请先传入参数!";Response.Write(js.Serialize(resMsg));break;}}}public class responseMsg{private bool _success;public bool success{get { return _success; }set { _success = value; }}private string _errorMsg;public string errorMsg{get { return _errorMsg; }set { _errorMsg = value; }}}public class blogEssay : responseMsg{private string _title;public string title{get { return _title; }set { _title = value; }}private string _author;public string author{get { return _author; }set { _author = value; }}private string _email;public string email{get { return _email; }set { _email = value; }}private string _site;public string site{get { return _site; }set { _site = value; }}private int _publishNumber;public int publishNumber{get { return _publishNumber; }set { _publishNumber = value; }}private string _abstractEssay;public string abstractEssay{get { return _abstractEssay; }set { _abstractEssay = value; }}private DateTime _publishDate;public DateTime publishDate{get { return _publishDate; }set { _publishDate = value; }}private string _contentEssay;public string contentEssay{get { return _contentEssay; }set { _contentEssay = value; }}}
}

说明：

  1. 使用getForm().findField(‘表单内控件的name属性').setValue(想要设置的值)
  2. a.result 代表后台回传来的结果集
  3. a.result.xxxx 表示结果集中的某个指定的JSON数据项名的值
  4. 使用JavaScriptSerializer对象来序列化相应类型为JSON数据格式，用于传回给前台

效果图

前台向后台传参数

前后代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复</title><!-- Common Libs --><link href="../Common/ext-all.css" rel="stylesheet" type="text/css" /><script src="../Common/ext-base-debug.js" type="text/javascript"></script><script src="../Common/ext-all-debug-w-comments.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">Ext.onReady(function () {// Provides attractive and customizable tooltips for any element. Ext.QuickTips.init();var classesStore = new Ext.data.SimpleStore({fields: ['id', 'class'],data: [['0', 'ExtJS 3.3.0'], ['1', 'ExtJS 3.4.0'], ['2', 'ExtJS 4.0']]});var frm = new Ext.FormPanel({renderTo: document.body,title: '『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复 —— http://www.cnblogs.com/sitemanager/',url: '../jsonresponse.aspx',autoWidth: 'true',buttons: [{text: '加载表单',handler: function () {frm.getForm().load({url: '../jsonresponse.aspx',params: {resMode: 3}});}}, {text: '参数互传',handler: function () {frm.getForm().submit({
 url: '../jsonresponse.aspx', params: { resMode: 4 },success: function (form, action) {Ext.Msg.alert("Success", action.result.errorMsg);},failure: function (form, action) {Ext.Msg.alert('Warning', action.result.errorMsg);}});}}, {text: 'Save',handler: function () {frm.getForm().submit({url: '../jsonresponse.aspx',params: {resMode: 1},success: function (form, action) {frm.getForm().findField('title').setValue(action.result.title);frm.getForm().findField('author').setValue(action.result.author);frm.getForm().findField('email').setValue(action.result.email);frm.getForm().findField('site').setValue(action.result.site);frm.getForm().findField('contentEssay').setValue(action.result.contentEssay);Ext.Msg.alert('Success', 'Loaded all!');},failure: function (form, action) {Ext.Msg.alert('Warning', action.result.errorMsg);}});}}, {text: 'Reset',handler: function () {frm.getForm().reset();}}],items: [{xtype: 'textfield',fieldLabel: '文章标题',name: 'title',// Specify false to validate that the value's length is > 0 (defaults to true)allowBlank: 'false',width: 300,// A config object containing one or more event handlers to be added to this object during initialization.listeners: {specialkey: function (f, e) {if (e.getKey() == e.ENTER) {Ext.Msg.alert('Listen Success!', e.getKey);}}}}, {xtype: 'textfield',fieldLabel: '作者',name: 'author',width: 300}, {xtype: 'textfield',fieldLabel: '邮箱',name: 'email',// The error text to display when the email validation function returns false. vtype: 'emailText',allowBlank: 'true',width: 300}, {xtype: 'textfield',fieldLabel: '主页',name: 'site',// The error text to display when the url validation function returns false. vtype: 'urlText',allowBlank: 'true',width: 300}, {xtype: 'numberfield',fieldLabel: '发布次数',name: 'publishNumber',width: 300}, {xtype: 'combo',fieldLabel: '文章分类',name: 'class',/* Acceptable values are: * 'remote' : Default * Automatically loads the store the first time the trigger is clicked. If you do not want the store to be automatically loaded the first time the trigger is clicked, set to 'local' and manually load the store. To force a requery of the store every time the trigger is clicked see lastQuery. * 'local' : * ComboBox loads local data */mode: 'local',// The data source to which this combo is bound (defaults to undefined).store: classesStore,// The underlying data field name to bind to this ComboBoxdisplayField: 'class',width: 300}, {xtype: 'datefield',fieldLabel: '发布日期',name: 'publishDate',// An array of days to disable, 0 based (defaults to null).// disable Sunday and Saturday:disabledDays: [0, 6],width: 300}, {xtype: 'timefield',fieldLabel: '发布时间',increment: 15,name: 'publishTime',width: 300}, {xtype: 'radio',boxLabel: '随笔',fieldLabel: '文章类型',// Radio grouping is handled automatically by the browser if you give each radio in a group the same name.name: 'essayClass',width: 300}, {xtype: 'radio',boxLabel: '文章',name: 'essayClass',width: 300}, {xtype: 'checkbox',fieldLabel: '发布到首页',name: 'publishToSiteHome',width: 300}, {xtype: 'textarea',fieldLabel: '摘要',name: 'abstractEssay',width: 500,allowBlank: 'true',autoScroll: 'true',height: 30}, {// Provides a lightweight HTML Editor component.xtype: 'htmleditor',fieldLabel: '正文',name: 'contentEssay',width: 500,allowBlank: 'false',autoScroll: 'true',height: 300}]});});
</script>
</body>
</html>

后台代码using System;
using System.Web.Script.Serialization;namespace csdemo.extjs
{public partial class jsonresponse : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){int resMode;JavaScriptSerializer js = new JavaScriptSerializer();responseMsg resMsg = new responseMsg();blogEssay bl = new blogEssay();if (Request["resMode"] != null){resMode = Convert.ToInt32(Request["resMode"]);}else{resMode = 2;}switch (resMode){case 1:resMsg.success = true;resMsg.errorMsg = "表单接收成功！";Response.Write(js.Serialize(resMsg));break;case 2:bl.success = true;bl.title = "『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复";bl.author = "Aaron";bl.contentEssay = "test";bl.site = "http://www.cnblogs.com/sitemanager/";Response.Write(js.Serialize(bl));break;case 3:resMsg.success = true;resMsg.errorMsg = "Thank you for your reading!";Response.Write(js.Serialize(resMsg));break;case 4:resMsg.success = true;resMsg.errorMsg = "参数传入成功！";Response.Write(js.Serialize(resMsg));break;default:resMsg.success = false;resMsg.errorMsg = "请先传入参数!";Response.Write(js.Serialize(resMsg));break;}}}public class responseMsg{private bool _success;public bool success{get { return _success; }set { _success = value; }}private string _errorMsg;public string errorMsg{get { return _errorMsg; }set { _errorMsg = value; }}}public class blogEssay : responseMsg{private string _title;public string title{get { return _title; }set { _title = value; }}private string _author;public string author{get { return _author; }set { _author = value; }}private string _email;public string email{get { return _email; }set { _email = value; }}private string _site;public string site{get { return _site; }set { _site = value; }}private int _publishNumber;public int publishNumber{get { return _publishNumber; }set { _publishNumber = value; }}private string _abstractEssay;public string abstractEssay{get { return _abstractEssay; }set { _abstractEssay = value; }}private DateTime _publishDate;public DateTime publishDate{get { return _publishDate; }set { _publishDate = value; }}private string _contentEssay;public string contentEssay{get { return _contentEssay; }set { _contentEssay = value; }}}
}

说明：

  1. 在submit()函数中，可以使用 url 来重新指定表单回传的目标页面
  2. 可以使用 params 来指定回传的参数，默认为post方式
  3. 有后台Asp.NET中，直接使用 Request[‘参数名 ']来获取传入的值
  4. 注意，从前台来的值，一般情况下是string型的，可能会需要进行一些格式上的转换后，才能使用

效果图

转载于:https://my.oschina.net/skyler/blog/706176

『ExtJS』表单（二）表单行为与Asp.NET页面的消息回复相关推荐

  1. 『ExtJS』表单（一）常用表单控件及内置验证

    几点说明 关于ExtJS的表单,我打算分为三个部分来写 常用表单控件及内置验证 -- 这里主要是JS代码 表单行为与Asp.NET页面的消息回复 -- 这里既有JS代码,与有C#代码,我主要是使用As ...

  2. 『ExtJS』01 001. ExtJS 4 类的定义

    为什么80%的码农都做不了架构师?>>>    ExtJS 4 类的定义 类的定义与类方法的调用 样例代码// Define new class 'Vehicle' under th ...

  3. 『ExtJS』01 009. ExtJS 4 方法重载

    为什么80%的码农都做不了架构师?>>>    在ExtJS中,使用Ext.override方法对已有类方法的重载. 如何去做 定义一个类,并给他一个方法 1: Ext.define ...

  4. ASP.NET MVC 2 学习笔记二: 表单的灵活提交

    ASP.NET MVC 2 学习笔记二:  表单的灵活提交 前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...

  5. 基于spring自动注入及AOP的表单二次提交验证

    2019独角兽企业重金招聘Python工程师标准>>> 这几天在网上闲逛,看到了几个关于spring的token二次提交问题,受到不少启发,于是自己动手根据自己公司的项目框架结构,制 ...

  6. DJango周总结二：模型层，单表，多表操作，连表操作，数据库操作，事务

    django周复习二  1,模型层:   1单表操作:    13个必会操作总结     返回QuerySet对象的方法有     all()     filter()     exclude()   ...

  7. 表单二维码怎么做？二维码怎么统计信息？

    通过二维码来统计信息是现在很多企业.社区等等经常会使用的一种方法,那么如何制作可以统计信息的表单二维码图片呢?下面教大家使用二维码生成器来在线制作二维码图片的方法,多种场景应用二维码在线生成,比如图片 ...

  8. ajax 泛微oa表单js_泛微oa流程表单二次开发新人注意事项，

    泛微oa流程表单二次开发新人注意事项, 1.泛微的PC端和手机端使用的jQuery代码通用吗? 答:根据实际操作情况,泛微的PC端和手机端使用的jQuery代码并不是通用的,pc端的代码有些不能在手机 ...

  9. java自定义表单系统_自定义表单二次开发

    自定义表单二次开发 === 自定义表单的页面和业务逻辑增强采用JS增强和Java增强实现.![输入图片说明](https://static.oschina.net/uploads/img/201804 ...

  10. html实现拖拽自定义表单,自定义表单（二）--拖拽（HTML版本）

    系列文章 自定义表单(一)--拖拽(JS版本) 自定义表单(二)--拖拽(HTML版本) 自定义表单(完)--(html5版本) 一.瞎扯 最近在折腾人工智能,今天写了段tensorflow,用来分辨 ...

最新文章

  1. c# 小票打印机打条形码_C#打印小票自带条形码打印
  2. Winform巧用窗体设计完成弹窗数值绑定-以重命名弹窗为例
  3. 使用photoview+viewpager实现图片缩放切换（类似微信朋友圈图片查看）
  4. 稳定和高质量是最好的选择
  5. tcpdump源码分析——抓包原理
  6. ASP.NET Core分布式项目实战（课程介绍，MVP，瀑布与敏捷）--学习笔记
  7. 从行驶的车上向上抛球，球真的会回到原地吗？
  8. （C语言版）链表（二）——实现单向循环链表创建、插入、删除、释放内存等简单操作
  9. python输出函数使用_python基本输入输出函数
  10. Annotation实战【自定义AbstractProcessor】
  11. java性能最好的mvc框架_详解Spring MVC的异步模式（高性能的关键）
  12. 织梦网站调用变量失败_(自适应手机版)响应式精密机械模具类网站织梦模板 织梦仪器模具加工设备网站模板下载...
  13. matlab平面电磁波入射_MATLAB仿真平面电磁波在不同媒介分界面上的入射
  14. 一张图告诉你，自学编程和科班程序员的差别在哪！网友：很真实
  15. 队列DID：以知识青年“上山下乡”为例
  16. Matlab读取fig文件并还原信号
  17. 怎么利用计算机求一元三次方程,一元三次方程怎么快速把解求出来？
  18. c语言单片机程序段,51单片机C语言编程基础及实例
  19. 【精美后台管理系统模版-＞UI界面欣赏】
  20. js常用效果代码封装

热门文章

  1. matlab深度学习之LSTM预测
  2. 国内首款性能最稳定ISO 14443B身份证读卡器芯片FSV9523国产替代MFRC523 国产NFC芯片 不缺货 性价比高 可提供软硬件DEMO
  3. 黑马程序员视频加源码
  4. 电脑无法安装SecoClient
  5. 基于python+boostrap的学校图书馆管理系统
  6. Java将视频文件、图片文件转Base64编码
  7. HTML简单的网页代码编写
  8. LabVIEW查找范例的使用举例
  9. 防止链接和二维码被微信拦截（被封锁、被屏蔽、被和谐）的最新方法——MaxJump
  10. 【基础教程】免疫算法【006期】