本文介绍如何利用 Ext.NET MVC 中的 model 进行高效前后台数据交互，通过创建自定义模型简化类型转换过程，并展示如何在视图中绑定模型。
敏捷思维学习Ext.Net MVC--3.3文本字段与后台的高级通信（model）
上节我们介绍了文本字段与后台的基本通信，这种通信方法是所用web网站Form表单通信的基本方法，可以满足大多数前后台数据交互的需求，但是当数据更加复杂时，前台提交过来的数据需要经过复杂的类型转换才能在后台使用，有没有跟好的方法来进行数据交互呢？
我们MVC中的model这时就派上了用场。
一、在工程model文件夹中新建FormModel类文件，打开新建文件在命名空间下添加以下类：
public class TextFieldEmail
{
[Field(FieldLabel = "邮箱")]//(1)
public string Email//(2)
{
get;
set;
}
}
注意添加对Ext.Net和Ext.Net.Mvc的引用。
（1）设置文本字段标签为“邮箱”。（2）在类中新建属性“Email”。
二、在FormController中添加函数
public ActionResult TextFieldFor()
{
return View();
}
其中TextFieldFor为访问该网页的路由。
三、右键添加View端文件TextFieldFor.cshtml并将其中的内容替换如下：
@model ExtNetMvcExample.Models.TextFieldEmail//(1)
@{
Layout = null;
var X = Html.X();//(2)
}
<!DOCTYPE html>
<html>
<head>
<title>TextFieldFor</title>
</head>
<body>
@Html.X().ResourceManager()
@(
Html.X().FormPanel()
.Title("强类型文本字段")
.Width(300)
.ID("formPanltf")
.Height(300)
.Margin(10)
.Items(
X.TextFieldFor(m=>m.Email)//(3)
//.Name("email")//(4)
//.FieldLabel("邮箱")//(5)
.MinLength(8).MinLengthText("长度不能小于8个字符")
.MaxLength(40).MaxLengthText("最大不能超过40个字符")
.AllowBlank(false)
.Vtype("email")
.VtypeText("无效的Email账户")
.EmptyText("请输入您的Email")
.Grow(true)
.GrowMin(140)
.StripCharsRe("/^(aitch)*$/"),
X.Button()
.ID("Text_submit")
.Text("提交")
.Disable(true)
.FormBind(true)
.DirectClickUrl(Url.Action("TextFildForSubmit")//(6)
)
)
)
</body>
</html>
（1）在页面中引用强类型TextFieldEmail。（2）将X赋值为Html.X()，在下面的编程中可以使用X代替Html.X()减少代码量。（3）使用TextFieldFor可以根据类中的属性自动生成文本字段，自动生成的文本字段包括字段的名称（4），字段的标签（5），这两个属性就无需重新设置了，其中m=>m.Email为lambda表达式，随着学习的日渐深入我们会在使用中加强对lambda表达式的介绍，这是一个与函数的委托紧密关联的强大的工具。（6）设置提交的路由为TextFildForSubmit。
四、在FormController中添加处理提交数据的函数如下：
public ActionResult TextFildForSubmit(TextFieldEmail TFEmail)//(1)
{
string message = TFEmail.Email;//(2)
X.Msg.Alert("Employee", message).Show();
return this.Direct();
}
（1）传递过来的数据以类TextFieldEmail的格式接收，就无需再进行复杂的类型转换，需要的数据直接从类中获取即可（2）。
在没有改变页面布局的情况下大大提高了通信效率，可以看到运行的效果如下图所示：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
