开源框架完美组合之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='/" + 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='/Article/Admin/" + id + "/' style='width:100%;height:100%;'/>", closable: true }); } }
<body class="easyui-layout">
<div region="north" border="false" style="height: 100px; #E0ECFF;">
<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>
<a href="#" onclick="showChangePasswordWin();">修改密码</a> <a href="/Home/LogOut/">
退出系统</a>
<a href="http://member.webweb.com/" target="_blank">空间管理</a>
<a href="http://new.cnzz.com/" target="_blank">站长在线</a>
</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="#E0ECFF;
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"> <strong>服务器名</strong>：<%=System.Environment.MachineName%> </td> <td width="50%" style="height: 24px"> <b>服务器端口：</b><%= HttpContext.Current.Request.ServerVariables["Server_Port"].ToString() %> </td> </tr> <tr bgcolor="#f9fbf0"> <td width="50%" style="height: 23px"> <b>脚本解释引擎：</b><%=System.Environment.Version%> </td> <td width="50%" style="height: 23px"> <b> 站点物理路径：</b><%=HttpContext.Current.Request.PhysicalApplicationPath.ToString() %> </td> </tr> <tr bgcolor="#f9fbf0"> <td width="50%" style="height: 23px"> <b>服务器CPU个数：</b><%=System.Environment.ProcessorCount %> </td> <td width="50%" style="height: 23px"> <b>服务器IIS版本：</b><%=Request.ServerVariables["SERVER_SOFTWARE"]%> </td> </tr> <tr bgcolor="#f9fbf0"> <td width="50%"> <b>开机运行时长</b>：<%=(System.Environment.TickCount/3600000).ToString("N2")%> 小时 </td> <td width="50%"> <b> 服务器时间：</b><%=DateTime.Now.ToString() %> </td> </tr> <tr bgcolor="#f9fbf0"> <td colspan="2"> <b>服务器操作系统：</b><span> <%=System.Environment.OSVersion.ToString()%></span> </td> </tr> <tr bgcolor="#f9fbf0"> <td colspan="2"> </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（转）的更多相关文章
- [转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo
热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...
- Spring.Net+Nhibernate+Asp.Net Mvc 框架
搭建你的Spring.Net+Nhibernate+Asp.Net Mvc 框架 (一)搭建你的环境 使用这套框架不是很长时间.但也基本应用了几个项目中了.在此和大家分享一下我是怎样一步一步搭建此框架 ...
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作
/****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立
上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发
进行本文之前需要在数据库用户表里面增加一条用户数据,直接手动添加即可,未安全考虑密码一定要使用Md5加密后的,这里提供666666的Md5密文为(c831b04de153469d),本文完成登录模块的 ...
- Spring.Net+NHibernate+asp.net mvc + easyui
毕业4个月的入手项目..前段时间在公司一直做的维护..为了弄明白自己也就跟着写了一个,目前也正在学习:不对的或者是有更好的还请各位赐教. 在学习的过程中主要参考::http://www.cnblogs ...
- 下一个系列学习列表Spring.net+NHibernate+MVC
开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo 刘冬.NET 2011-08-19 ...
- Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架
Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架 初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相关资料,了解了框 ...
随机推荐
- Ant+Jmeter自动化接口测试的部署 及 部署过程中的坑
一.环境准备: 1.Jdk1.6或以上:http://www.oracle.com/technetwork/java/javase/downloads/index.html 配置环境变量-系统变 ...
- js闭包实例汇总
本文是通过实例来帮助大家深刻理解js闭包,是篇非常不错的文章,这里推荐给大家,有需要的小伙伴可以参考下 Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取 ...
- Xshell不能使用退格、删除键进行删除的解决方法
xshell在输入命令时,如果敲错字母了的时候,想通过按退格键删除敲错的字母,却在屏幕显示出了“^H”,退格不行,再按删除键,却显示出“^[[3~”,怎么着就是删除不了输错的字母. 修改办法:文件-- ...
- Python中List的append引用赋值问题处理
Python中的对象之间赋值时是按引用传递的,如果需要拷贝对象,需要使用标准库中的copy模块. 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2. copy.deep ...
- java:合并两个排序的整数数组A和B变成一个新的数组。新数组也要有序。
合并两个排序的整数数组A和B变成一个新的数组.新数组也要有序. 样例 1: 输入: A=[1], B=[1] 输出:[1,1] 样例解释: 返回合并后的数组. 样例 2: 输入: A=[1,2,3,4 ...
- Codeforces Round #359 (Div. 2) D - Kay and Snowflake
D - Kay and Snowflake 题目大意:给你一棵数q个询问,每个询问给你一个顶点编号,要你求以这个点为根的子树的重心是哪个节点. 定义:一棵树的顶点数为n,将重心去掉了以后所有子树的顶点 ...
- Lineage逻辑回归分类算法
Lineage逻辑回归分类算法 线性回归和逻辑回归参考文章: http://blog.csdn.net/viewcode/article/details/8794401 http://www.cnbl ...
- BZOJ1042 [HAOI2008]硬币购物 完全背包 容斥原理
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1042 题目概括 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了t ...
- 2.2博客系统 |FileField字段 |Media配置
基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...
- 【Java】 剑指offer(1) 找出数组中重复的数字
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 在一个长度为n的数组里的所有数字都在0到n-1的范围内.数组中某些数字 ...