首页 > 代码库 > [转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

[转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力。由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI。它有完整的demo和强大AIP手册,使我在开发过程中得心应手。以下是这篇博文Demo程序的演示效果:

  解决方案如图1所示

图1

 

  Domain:领域模型

  Dao:持久层

  Service:服务层

  WebSite:表示层

  Common:通用类

 

  首页如图2所示,可以选择中文和English。

图2

 

  英文首页如图3所示

图3

 

  公司简介效果如图4所示

图4

 

  后台登陆页面如图5所示

图5

 

 

  后台首页如图6所示

图6

 

  后台首页的代码html为:

 

function showChangePasswordWin() {             $(#winPassword).window(open);         }
        function changePassword() {             var oldPassword = $("#iptOldPassword").val();             if (oldPassword == "") {                 $.messager.alert(提示, 请输入旧密码!);                 return;             }
            var password = $("#iptPassword").val();             if (password == "") {                 $.messager.alert(提示, 请输入新密码!);                 return;             }
            var newPassword = $("#iptNewPassword").val();             if (newPassword == "") {                 $.messager.alert(提示, 请确认密码!);                 return;             }
            if (newPassword != password) {                 $.messager.alert(提示, 两次密码不一致,请重新输入!);                 return;             }             var parm = { password: password, oldPassword: oldPassword };             $.ajax({                 type: "POST",                 url: "/Home/ChangedPassword/",                 data: parm,                 success: function (msg) {                     if (msg.IsSuccess) {                         $.messager.alert(提示, 修改成功!, "info", function () {                             $(#winPassword).window(close);                             $("#iptOldPassword").val("");                             $("#iptPassword").val("");                             $("#iptNewPassword").val("");                         });                     } else {                         $.messager.alert(提示, 密码错误,请重新输入!, "info");                     }                 },                 error: function () {                     $.messager.alert(错误, 修改失败!, "error");                 }             });         }
        function showTab(url, title) {             var tab = $(#tab);             if (tab.tabs(exists, title)) {                 tab.tabs(select, title);             }             else {                 tab.tabs(add, {                     title: title,                     content: "<iframe scrolling=‘yes‘ frameborder=‘0‘ src=http://www.mamicode.com/‘/"                         + url + "/Index/‘ style=‘width:100%;height:100%;‘/>",                     closable: true                 });
            }         }
        function showArticle(id, title) {             var tab = $(#tab);             if (tab.tabs(exists, title)) {                 tab.tabs(select, title);             }             else {                 tab.tabs(add, {                     title: title,                     content: "<iframe scrolling=‘yes‘ frameborder=‘0‘ src=http://www.mamicode.com/‘/Article/Admin/"                        + id + "/‘ style=‘width:100%;height:100%;‘/>",                     closable: true                 });             }         }
 
 
<body class="easyui-layout">     <div region="north" border="false" style="height: 100px; ">         <div style="height: 80px; clear: both;">             <div style="width: 150px;">             </div>             <div style="text-align: center; width: 150px; line-height: 80px;">                <img alt="logo" src="/Images/logo_small.jpg" onclick="window.open(‘/Index.html‘)" />             </div>         </div>         <div style="height: 20px;text-align:right">         <div>         登陆用户:<a href="#" onclick=""><%= ((dynamic)ViewData["User"]).Name %></a>&nbsp;&nbsp;                 <a href="#" onclick="showChangePasswordWin();">修改密码</a>&nbsp;&nbsp; <a href="/Home/LogOut/">                     退出系统</a>                     &nbsp;&nbsp;<a href="http://member.webweb.com/" target="_blank">空间管理</a>&nbsp;&nbsp;                     <a href="http://new.cnzz.com/" target="_blank">站长在线</a>&nbsp;&nbsp;&nbsp;&nbsp;                     </div>         </div>     </div>     <div region="west" split="true" title="<font color=‘#993333‘>系统菜单</font>" style="width: 150px;">         <div class="easyui-accordion" fit="true" border="false" style="             background-repeat: repeat-x;">             <div title="资料管理" style="overflow: auto;">                 <table border="0" cellspacing="1" cellpadding="1" align="center">                     <tr>                         <td height="23">                             <a href="#" onclick="showTab(‘Forum‘,$(this).html());">版块管理</a>                         </td>                     </tr>                     <tr>                         <td height="23">                             <a href="#" onclick="showTab(‘Category‘,$(this).html());">分类管理</a>                         </td>                     </tr>                 </table>             </div>             <% foreach (var item in (this.ViewData["CategoryList"] as IList<Domain.Category>).GroupBy(g => g.Forum))                { %>             <div title="<%= item.Key.Name %>" style="overflow: auto;">                 <table border="0" cellspacing="1" cellpadding="1" align="center">                     <%foreach (var value in item)                       {  %>                     <tr>                         <td height="23">                             <a href="#" onclick="showArticle(‘<%= value.ID %>‘,$(this).html());"><%= value.Name %></a>                         </td>                     </tr>                     <% } %>                 </table>             </div>             <% } %>             <div title="系统管理" style="overflow: auto;">                 <table border="0" cellspacing="1" cellpadding="1" align="center">                     <tr>                         <td height="23">                             <a href="#" onclick="showTab(‘UserInfo‘,$(this).html());">管理员用户管理</a>                         </td>                     </tr>                 </table>             </div>         </div>     </div>     <div region="south" border="false" style="height: 20px; background: #A9FACD; text-align: center;         line-height: 20px; background-image: url(/Images/bg_bottom.gif);">         Copy Right ®2010-2011</div>     <div region="center">         <div id="tab" class="easyui-tabs" fit="true" border="false">             <div title="首页" style="padding: 20px; overflow: hidden;">                 <table width="98%" border="0" cellpadding="3" align="center" cellspacing="0" bgcolor="#F1EAE0">                     <tr>                         <td width="100%" bgcolor="#cccccc" height="5">                         </td>                     </tr>                     <tr>                         <td width="100%" class="change_td" style="cursor: hand">                             服务器参数                         </td>                     </tr>                 </table>                 <table cellspacing="1" cellpadding="3" width="98%" align="center" bgcolor="#ffffff"                     border="0">                     <tbody>                         <tr>                             <td class="th1" align="center" colspan="2" style="height: 25px">                                 服务器信息统计                             </td>                         </tr>                         <tr bgcolor="#f9fbf0">                             <td width="50%" style="height: 24px">                                 &nbsp;<strong>服务器名</strong><%=System.Environment.MachineName%>                             </td>                             <td width="50%" style="height: 24px">                                 &nbsp;<b>服务器端口:</b><%= HttpContext.Current.Request.ServerVariables["Server_Port"].ToString() %>                             </td>                         </tr>                         <tr bgcolor="#f9fbf0">                             <td width="50%" style="height: 23px">                                 &nbsp;<b>脚本解释引擎:</b><%=System.Environment.Version%>                             </td>                             <td width="50%" style="height: 23px">                                 <b>&nbsp;站点物理路径:</b><%=HttpContext.Current.Request.PhysicalApplicationPath.ToString() %>                             </td>                         </tr>                         <tr bgcolor="#f9fbf0">                             <td width="50%" style="height: 23px">                                 &nbsp;<b>服务器CPU个数:</b><%=System.Environment.ProcessorCount %>                             </td>                             <td width="50%" style="height: 23px">                                 &nbsp;<b>服务器IIS版本:</b><%=Request.ServerVariables["SERVER_SOFTWARE"]%>                             </td>                         </tr>                         <tr bgcolor="#f9fbf0">                             <td width="50%">                                 &nbsp;<b>开机运行时长</b><%=(System.Environment.TickCount/3600000).ToString("N2")%>                                 小时                             </td>                             <td width="50%">                                 <b>&nbsp;服务器时间:</b><%=DateTime.Now.ToString() %>                             </td>                         </tr>                         <tr bgcolor="#f9fbf0">                             <td colspan="2">                                 &nbsp;<b>服务器操作系统:</b><span>                                     <%=System.Environment.OSVersion.ToString()%></span>                             </td>                         </tr>                         <tr bgcolor="#f9fbf0">                             <td colspan="2">                                 &nbsp;                             </td>                         </tr>                     </tbody>                 </table>             </div>         </div>     </div>     <div id="winPassword" class="easyui-window" closed="true" modal="true" title="修改密码"         style="width: 280px; height: 160px;" collapsible="false" minimizable="false"         maximizable="false">         <div class="easyui-layout" fit="true">             <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">                 <table>                     <tr>                         <td>                             旧密码:                         </td>                         <td>                             <input type="password" id="iptOldPassword" />                         </td>                     </tr>                     <tr>                         <td>                             新密码:                         </td>                         <td>                             <input type="password" id="iptPassword" />                         </td>                     </tr>                     <tr>                         <td>                             确认密码:                         </td>                         <td>                             <input type="password" id="iptNewPassword" />                         </td>                     </tr>                 </table>             </div>             <div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">                 <a class="easyui-linkbutton" iconcls="icon-ok" href="javascript:void(0)" onclick="changePassword()">                     确定</a> <a class="easyui-linkbutton" iconcls="icon-cancel" href="javascript:void(0)"                         onclick="$(‘#winPassword‘).window(‘close‘);">取消</a>             </div>         </div>     </div> </body>

 

 

  可以进行版块和分类的管理,如图7和图8所示。

图7

 

 

图8

 

  选择列表模式的分类可以添加列表内容,如图9所示。

图9

 

  easyUI的datagrid代码如下:

  

$(#grid).datagrid({                 title: <%= ((Domain.Category)this.ViewData["entity"]).Name %>信息,                 iconCls: icon-save,                 nowrap: false,                 striped: true,                 url: /Article/LoadAllByPage/,                 sortName: CreateDate,                 sortOrder: desc,                 remoteSort: true,                 fitColumns: true,                 fit: true,                 idField: ID,                 queryParams: { categoryId: <%= ((Domain.Category)this.ViewData["entity"]).ID %> },                 frozenColumns: [[                     { field: ID, checkbox: true }                 ]],
                columns: [[                     { field: CreateDate, title: 建立日期, width: 100,                         formatter: function (value, rec) {                             return eval("new " + value.substr(1, value.length - 2)).toLocaleDateString();                         }                     },                     { field: Name, title: 中文标题, width: 80, align: right },                     { field: NameEn, title: 英文标题, width: 80, align: right },                     { field: IsFirst, title: 是否置顶, width: 40, align: right,                         formatter: function (value, rec) {                             return value ? : ;                         }                     },                     { field: IsEnabled, title: 状态, width: 40, align: right,                         formatter: function (value, rec) {                             return value ? 显示 : 隐藏;                         }                     },                     { field: From, title: 来源, width: 80, align: right },                     { field: ViewCount, title: 浏览次数, width: 40, align: left },                     { field: UpdateDate, title: 最后更新日期, width: 100,                         formatter: function (value, rec) {                             return eval("new " + value.substr(1, value.length - 2)).toLocaleDateString();                         }                     }                 ]],                 pagination: true,                 rownumbers: true,                 toolbar: [-, {                     id: btnSave,                     text: 添加,                     iconCls: icon-add,                     handler: function () {                         this.href = /Article/View/?categoryId=<%= ((Domain.Category)this.ViewData["entity"]).ID %>;                     }                 }, -, {                     id: btnUpdate,                     text: 修改,                     iconCls: icon-save,                     handler: function () {
                        var row = $(#grid).datagrid(getSelected);                         if (row) {                             this.href = /Article/View/ + row.ID + /?categoryId=<%= ((Domain.Category)this.ViewData["entity"]).ID %>;                         }                         else {                             $.messager.alert(提示, 请选择要修改的数据);                             return;                         }
                    }                 }, -, {                     id: btnDelete,                     text: 删除,                     disabled: false,                     iconCls: icon-cut,                     handler: function () {
                        var rows = $(#grid).datagrid(getSelections);                         if (!rows || rows.length == 0) {                             $.messager.alert(提示, 请选择要删除的数据);                             return;                         }                         var parm;                         $.each(rows, function (i, n) {                             if (i == 0) {                                 parm = "idList=" + n.ID;                             }                             else {                                 parm += "&idList=" + n.ID;                             }                         });                         $.messager.confirm(提示, 是否删除这些数据?, function (r) {                             if (!r) {                                 return;                             }
                            $.ajax({                                 type: "POST",                                 url: "/Article/Delete/",                                 data: parm,                                 success: function (msg) {                                     if (msg.IsSuccess) {                                         $.messager.alert(提示, 删除成功!, "info", function () {                                             $(#grid).datagrid("reload");                                         });                                     }                                 },                                 error: function () {                                     $.messager.alert(错误, 删除失败!, "error");                                 }                             });                         });                     }                 }, -]

 

  Controller的载入JSON数据的代码为:

  

        [Authorize]         public ActionResult LoadAllByPage(Guid categoryId, int page, int rows, string order, string sort)         {             long total = 0;             var list = this.ArticleManager.LoadAllByPage(out total, categoryId, page, rows, order, sort).Select(entity => new             {                 entity.Name,                 entity.NameEn,                 entity.ID,                 entity.CreateDate,                 entity.UpdateDate,                 entity.IsEnabled,                 entity.IsFirst,                 entity.ViewCount,                 entity.From,                 CategoryId = entity.Category.ID,                 CategoryName = entity.Category.Name             });
            var result = new { total = total, rows = list.ToList() };
            return Json(result);         }

 

  

  开发环境为VS2010,数据库是根据NHibernate的方言任意配置,我使用的是SQLite数据库。

 

    <!--SQLite-->     <add key="provider" value="System.Data.SQLite" />     <add key="connectionString" value="Data Source=|DataDirectory|DataBase.db;Version=3;FailIfMissing=False;" />     <add key="dialect" value="NHibernate.Dialect.SQLiteDialect" />     <add key="driver_class" value="NHibernate.Driver.SQLite20Driver" />
    <!--自动建表-->     <add key="hbm2ddl.auto" value="update" />

  

 

  代码下载

  作者:刘冬.NET

  出处:http://www.cnblogs.com/GoodHelper/archive/2011/08/19/SpringNetFramework_Step3.html

  欢迎转载,但须保留版权

[转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo