敏捷思维学习Ext.Net MVC--3.4Form表单组件之数字字段
3.2节介绍的前台与后台通信的基本方式是为了帮助我们理解,前后端数据是如何传递的,在我们实际的程序开发中我们一般不会这么做,我们一般采用更加高效的强类型方法进行数据传递,在以后的文章中如不特别说明我们都是采取强类型方法通信。
一、在工程Model文件夹中的FromModel类文件中添加如下类:
public class NumberFieldSalary
{
[Field(FieldLabel="工资")]//(1)
public Decimal Salary//(2)
{
get;
set;
}
}
(1)设置数字字段标签为“工资”,(2)在类中新建属性Salary。
二、在FormController中添加函数
public ActionResult NumberField()
{
return View();
}
其中NumberField为该网页的路由
三、右键添加View端文件NumberField并将其中的内容替换如下:
@model ExtNetMvcExample.Models.NumberFieldSalary
@{
Layout = null;
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<title>NumberField</title>
</head>
<body>
@X.ResourceManager()
@(X.FormPanel()
.Title("数字字段")
.Width(300)
.Height(300)
.Margin(10)
.Items(
X.NumberFieldFor(m=>m.Salary)
.DecimalPrecision(3)//(1)
.MinValue(0.001).MinText("最小数值为0.001")//(2)
.MaxValue(100000).MaxText("最大数值为100000"),//(3)
X.Button()
.ID("Text_submit")
.Text("提交")
.Disable(true)
.FormBind(true)
.DirectClickUrl(Url.Action("NumberFieldSubmit")//(4)
)
)
)
</body>
</html>
(1)该字段的小数位为三位,当输入大于三位时不会阻止你输入,但会自动保留三位小数。(2)定义了该字段最小输入数字为0.001,当输入数字小于0.001时就会提示MinText中定义的错误信息。(3)定义了该字段输入的最大数字为100000,如果输入数字大于100000时就会提示MaxText中定义的错误信息。(4)设置提交的路由为NumberFieldSubmit。
四、在FormController中添加处理提交数据的函数如下:
public ActionResult NumberFieldSubmit(NumberFieldSalary NFSalary)//(1)
{
decimal salary = NFSalary.Salary;//(2)
X.Msg.Alert("Employee", salary.ToString()).Show();
return this.Direct();
}
(1)前端传递过来的数据以类NumberFieldSalary的格式接收。(2)从NFSalary对象中获取小数型数据。
当输入数据小于0.001时如下图所示:
当提交数据后: