敏捷思维学习Ext.Net MVC--3.2Form表单之文本字段与后台通信的基本方式
文本字段与后台通信的基本方式
一、修改View中代码如下:
@Html.X().ResourceManager()
@(
Html.X().FormPanel()
.Title("文本字段")
.Width(300)
.ID("formPanltf")
.Height(300)
.Items(
Html.X().TextField()
.Name("email")//(1)
.FieldLabel("邮箱")
.MinLength(8).MinLengthText("长度不能小于8个字符")
.MaxLength(40).MaxLengthText("最大不能超过40个字符")
.AllowBlank(false)
.Vtype("email")
.VtypeText("无效的Email账户")
.EmptyText("请输入您的Email")
.Grow(true)
.GrowMin(140)
.StripCharsRe("/^(aitch)*$/"),
Html.X().Button()//(2)
.ID("Text_submit")//(3)
.Text("提交")
.Disable(true) //(4)
.FormBind(true) //(5)
.DirectClickUrl(Url.Action("TextFildSubmit")//(6)
)
)
)
(1)设置文本字段的名称为“email”,这在controller中读取的时候作为读取内容的依据。(2)增加提交按钮。(3)设置提交按钮的ID唯一识别号,这是必须的。(4)设置提交按钮不能使用为真。(5)设置与Form表单绑定,只有当Form表单验证通过后按钮才是有效的。(6)设置提交路由。
二、修改后台controller代码
在FormController中添加以下函数:
public ActionResult TextFildSubmit()//(1)
{
string message = Request["email"].ToString();//(2)
X.Msg.Alert("Employee",message ).Show();//(3)
return this.Direct();//(4)
}
注意在添加函数前先添加对Ext.Net和Ext.Net.Mvc的引用,如下:
using Ext.Net.MVC;
using Ext.Net;
(1)设置提交路由即“TextFildSubmit”,由于在同一controller下所以不需要其它设置。(2)使用Request读取Form提交时的内容,“email”作为查询依据将数据查找出来。(3)新建一个信息提示框,将接受到的信息加入进去。(4)返回这个信息提示框到View端。
如下图所示当文本框输入不符合验证条件时提交按钮无法使用。
当输入内容符合验证条件后,提交按钮即可使用,点击提交后返回提交内容的提示框如下图所示:
(2)Request对象
Request对象,可以称之为请求对象。该对象是HttpRequest类的一个实例,用于提供对当前页面请求的访问,其中包括标题、Cookie、查询字符串、表单等,在后台(controller)中尅使用此类来读取浏览器已经发送的内容。当用户打开前端页面通过Form表单中的文本字段向后台发送请求时,就会将请求打包,包含用户、用户的计算机、页面、查询字符串、表单以及浏览器的相关信息。Web服务器就会收到这样一个封装好的请求。我们这里用到的暂时只有查询表单这个属性。Form表单将文本字段名称Name(email)和输入的文本内容Text(aaaaaaaa@163.com)打包成一对一的类似哈希表的结构(这里是email:“aaaaaaaa@163.com”),然后在Controller中通过Request["email"]读取出其键值:“aaaaaaaa@163.com”。