JQuery EasyUi之界面设计

WindySky 2017-01-18

展开全文

前面介绍过JS了，就这样个人认为还不够用。

因为JS文件是死的，无法使用服务器代码，自然不够灵活。那么通过母版页就完善了这一点。那么下面举一个例子——控件赋值。

控件赋值

前面说过easyui的form自带验证、提交、重置与赋值，那么如何利用这个赋值呢？千篇一律的写赋值代码总是那么的令人厌烦，尤其是元素比较多的时候，用反射嘛又怕别人诟病，那么就用JS来负责这一切吧.

那么如何做到通用呢？那母版页就是不错的选择。

下面贴出母版页完整代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Form.master.cs" Inherits="Singer.Form" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/Scripts/jquery-easyui-1.2.5/themes/default/easyui.css" rel="stylesheet"
        type="text/css" />
    <link href="/Styles/form.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/jquery-easyui-1.2.5/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-easyui-1.2.5/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-easyui-1.2.5/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="/Scripts/common.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <script type="text/javascript">
        var ajaxUrl = '/Ajax/Common.ashx';
        //表单ID
        var id = '<%=Request.QueryString["ID"] %>';
        //是否自动加载表单，编辑用
        var autoLoad = '<%=Request.QueryString["autoLoad"] %>';
        //Ajax类型【页面名】
        var typeCode = "<%=System.IO.Path.GetFileName(HttpContext.Current.Request.Path) %>";
        $(function () {
            if ($.isFunction(window.setAjaxUrl)) {
                setAjaxUrl.call();
            }
            //加载数据
            if (autoLoad == 1 && id !== undefined && id != '') {
                $('#ff').form('load', ajaxUrl + '?autoLoad=1&Type=' + typeCode + '&id=' + id + "&_" + Math.floor(Math.random() * (1000 + 1)));
 
            }
        });
    </script>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</body>
</html>

从代码中可以看出:

页面上定义了3个全局JS变量，有注释，我就不赘述了。
setAjaxUrl函数在表单赋值加载前执行，可以实现用于更改上面的3个变量的值，或者作其他作用，建议命名为beforeFormLoad。
typeCode的值为页面名，比如“index.aspx”，提交给处理程序用于判断是哪个页面，以便返回对应的JSON数据。

后台处理逻辑

那么处理程序如何返回对应的JSON数据呢？先看看大体结构：

case "ADMINUSER_ADD.ASPX":
    #region 用户添加
    {
        if (context.Request["autoLoad"] == "1")
            context.Response.Write(db.TB_Admin.FirstOrDefault(p => p.ID == Convert.ToInt32(context.Request["id"])).ToJson());
        else
        {
            if (context.Request["id"].IsEmpty())
            {
                if (context.Request["AdminPassword"].Trim() == string.Empty)
                {
                    context.Response.Write("请输入密码！！");
                    return;
                }
                if (context.Request["AdminPassword"] != context.Request["AdminPassword2"])
                {
                    context.Response.Write("两次密码不一致！！");
                    return;
                }
                var isExist = db.TB_Admin.FirstOrDefault(p => p.AdminLogin == context.Request["AdminLogin"].Trim());
                if (isExist != null)
                {
                    context.Response.Write("用户名重复！！");
                    return;
                }
                TB_Admin singer = new TB_Admin()
                {
                    Defatulflag = context.Request["Defatulflag"] == "1" ? 1 : 0,
                    AdminLogin = context.Request["AdminLogin"].Trim(),
                    CreateBy = userID.ToString(),
                    CreateDate = DateTime.Now,
                    LastLoginDate = null,
                    Password = Utility.UserINFOManager.PasswordEncry(context.Request["AdminPassword"].Trim()),
                    RoleID = Convert.ToInt32(context.Request["RoleID"])
                };
                db.TB_Admin.InsertOnSubmit(singer);
                db.SubmitChanges();
            }
            else
            {
                var isExist = db.TB_Admin.FirstOrDefault(p => p.ID == Convert.ToInt32(context.Request["id"]));
                isExist.Defatulflag = context.Request["Defatulflag"] == "1" ? 1 : 0;
                isExist.AdminLogin = context.Request["AdminLogin"].Trim();
                isExist.RoleID = Convert.ToInt32(context.Request["RoleID"]);
                if (context.Request["AdminPassword"].Trim() != string.Empty)
                    isExist.Password = Utility.UserINFOManager.PasswordEncry(context.Request["AdminPassword"].Trim());
                db.SubmitChanges();
            }
            context.Response.Write("1");
            return;
        }
    }
    break;
    #endregion

从上面代码可以看出：

通过Type参数，可以获取请求的页面。
通过autoLoad参数，可以判断是否是加载赋值。注意FirstOrDefault函数，是获取第一条数据，然后通过ToJson方法（自己定义的扩展方法）转换为JSON数据。
通过id参数，可以判断是否为编辑。
以上使用的是LINQ to SQL，个人认为使用LINQ to SQl开发小项目还是挺快的。关于LINQ to SQL的具体使用，就不说了。顺便送大家一段服务器分页通用代码（仅支持LINQ2SQL），如果觉得性能不行，请自己用存储过程实现，这里不考虑性能：

/// <summary>
/// 当前页
/// </summary>
private int pageIndex = Convert.ToInt32(HttpContext.Current.Request["page"] ?? "1");
/// <summary>
/// 每页显示记录数
/// </summary>
private int pageSize = Convert.ToInt32(HttpContext.Current.Request["rows"] ?? "1");
/// <summary>
/// 获取分页JSON
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="data"></param>
/// <returns></returns>
private string GetPageingJson<T>(IQueryable<T> data)
{
    return string.Format("{{\"total\":\"{0}\",\"rows\":{1}}}", data.Count(), data.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToJson());
}

相比使用各种.NET Ajax框架，我还是喜欢按上面这种模式，虽然很多Ajax框架可以实现js调用C#方法，可以调用WebService，可以操作服务器控件，但是我仍然痴迷上面的模式，因为个人觉得这样精简、易控制、一目了然、没有ViewState、没有服务器控件、甚至没有Cookie和Session（需要实现接口）。。。。

前端HTML

刚才贴的后台处理逻辑是用户管理的编辑界面，那么前端HTML呢？如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/Form.Master" AutoEventWireup="true"
    CodeBehind="AdminUser_Add.aspx.cs" Inherits="Singer.WebPages.RoleManagement.AdminUser_Add" %>
  
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="easyui-layout" style="text-align: left; height: 270px;" fit="true">
        <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
            <form id="ff" method="post">
            <input type="hidden" name="id" value="<%=Request.QueryString["ID"] %>" />
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <label for="AdminLogin">
                            登录名：</label>
                    </td>
                    <td>
                        <input class="easyui-validatebox" style="width: 300px;" type="text" required="true"
                            validtype="length[0,20]" name="AdminLogin"></input>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="RoleID">
                            所属角色：</label>
                    </td>
                    <td>
                        <input class="easyui-combobox" valuefield="ID" textfield="RoleName" panelheight="auto"
                            editable="false" style="width: 300px;" url="/Ajax/Common.ashx?Type=GetRoles"
                            required="true" name="RoleID"></input>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style='color: Red'>
                        在编辑时，输入管理员密码表示重新设置密码。
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="AdminPassword">
                            密码：</label>
                    </td>
                    <td>
                        <input class="easyui-validatebox" style="width: 300px;" type="text" validtype="length[6,20]"
                            id='txtPassword' name="AdminPassword"></input>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="AdminPassword2">
                            确认密码：</label>
                    </td>
                    <td>
                        <input class="easyui-validatebox" style="width: 300px;" type="text" validtype="length[6,20]"
                            id='txtPassword2' name="AdminPassword2"></input>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="Defatulflag">
                            是否上架：</label>
                    </td>
                    <td>
                        <input type="checkbox" name="Defatulflag" class="easyui-validatebox" type="text"
                            required="true" value="1" />
                    </td>
                </tr>
            </table>
            </form>
        </div>
        <div region="south" border="false" style="text-align: right; padding: 5px 5px 5px 0;">
            <a class="easyui-linkbutton" iconcls="icon-save" href="javascript:void(0)" onclick="javascript:submitForm();">
                提交</a> <%--<a class="easyui-linkbutton" iconcls="icon-no" href="javascript:void(0)" onclick="$('#ff').form('clear');">
                    重置</a>--%>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            if (autoLoad == 1) {
                $('#txtPassword').keypress(function () {
                    if ($(this).val().length > 0) {
                        $('#txtPassword2').validatebox({
                            required: true
                        });
                    }
                }).change(function () {
                    if ($(this).val().length > 0) {
                        $('#txtPassword2').validatebox({
                            required: true
                        });
                    } else {
                        $('#txtPassword2').validatebox({
                            required: false
                        });
                    }
                });
  
            } else {
                $('#txtPassword,#txtPassword2').validatebox({
                    required: true
                }); ;
            }
        });
    </script>
</asp:Content>