基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

    由于我们都在接触 ITOO项目,都使用了MVC+EasyUI,所以现在来说一下其中界面部分的一些使用知识，包括控件的赋值、取值、清空，以及相关的使用。

我们知道，一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等，这些界面控件的操作都有哪些不同，下面我们来逐一进行介绍。

1、单行文本框

使用easyui的控件，单行文本可以使用easyui-validatebox样式即可，类型为text的控件。

界面代码如下所示：

<input class="easyui-validatebox" type="text" id="Name" name="Name" />
或者
<input type="text" ID="txtLoginName" name="txtLoginName" style="width:100px"  />

赋值给界面控件代码如下：

$("#Name").val(info.Name);

获取界面控件的值代码如下：

var name = $("#Name").val();

如果是标签Lable控件，这需要把val 使用text替代即可，如下代码所示：

$("#Name").text(info.Name);

 对于easyui-validatebox样式的控件，一般来说，有几个常见属性可以设置他们的。

//必输项：
 <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input>

//格式的验证：
 <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"></input>
 <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'url'"></input>

//长度范围的验证：
 <input class="easyui-validatebox" data-options="validType:'length[1,3]'">

 

2、多行文本框

easyui的界面样式，可以使用easyui-validatebox，或者默认的textarea即可。

界面代码如下所示：

<textarea id="type_Remark" class="easyui-validatebox" required="true" style="height:100px;"></textarea>

或者

<textarea style="height:60px;width:200px" id="type_Remark" name="Remark"></textarea>

赋值给界面控件代码如下：

$("#type_Remark").val(json.Remark);

获取界面控件的值代码如下：

 var text = $("#type_Remark").val();    

 

3、密码文本框

密码文本框和常规的文本框一样，只是输入字符的时候，系统做了屏蔽显示而已，把它作为一个来独立说明，也是因为它也是常见输入的一种。

界面代码如下所示：

 <input type="password" name="password" style="width:260px;"></input>

赋值给界面控件代码如下：

var password = '123';
$("#Password").val(password)

获取界面控件的值代码如下：

            $("#btnLogin").click(function () {
                var postData = {
                    UserName: $("#UserName").val(),
                    Password: $("#Password").val(),
                    Code: $("#Code").val()
                };

 希望对大家有所帮助!