钢鬃の野猪人通过本文主要向大家介绍了easyui asp.net mvc,asp net mvc,asp net mvc 4,asp net mvc 5,pro asp net mvc 4等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
我们要搭建的框架是企业级开发框架，适用用企业管理信息系统的开发，如：OA、HR等
1、框架名称：sampleFrame。
2、搭建原则：最少知识原则。
3、先定义一个简单的编码规范：除类名和接口名外，其余首字母小写。
4、准备开发环境：vs2010及以上（mvc4）、sqlserver、jquery2.0和easyui1.4.5
首先来看一下列表页面的效果图：
我们期望简洁带前台代码，如下：
<table id="dataGrid" class="easyui-datagrid" url="getList" toolbar="#toolbar">
<thead>
<tr>
<th field="customerId" sortable="true" data-options="sortable:true" width="50">
customerId
</th>
<th field="companyName" data-options="sortable:true" width="50">
companyName
</th>
<th field="phone" width="50">
phone
</th>
<th field="address" width="50">
address
</th>
</tr>
</thead>
</table>
<div id="toolbar">
<div>
<a class="easyui-linkbutton" iconcls="icon-add" onclick="add();">添加</a>
<a class="easyui-linkbutton" iconcls="icon-edit" onclick="edit();">修改</a>
<a class="easyui-linkbutton" iconcls="icon-remove" onclick="del();">删除</a>
</div>
<div>
<input id="queryBox" class="easyui-textbox" buttonicon="icon-search" style="width: 200px;"
data-options="onClickButton:function(){loadList(loadListSettings);}" />
<a class="easyui-linkbutton" iconcls="icon-find" onclick="showQueryWindow();">
详细查询</a>
</div>
</div>
<script type="text/javascript">
var loadListSettings = { searchFields: "customerId,companyName", prompt: "请输入客户Id或公司名称" };
</script>
<script type="text/javascript">
pageInit();
</script>
</div>
为了这样简洁的前台，我们需要准备：
1、通用的布局模板_Layout.cshtml。base.css、base.js、defaultSettings.js、tool.js和private.js见后面
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<link href='/webResource/easyui/themes/default/easyui.css' rel='stylesheet' type='text/css' />
<link href='/webResource/easyui/themes/icon.css' rel='stylesheet' type='text/css' />
<link href='/webResource/base.css' rel='stylesheet' type='text/css' />
<script src="/webResource/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/webResource/jquery/json2.js" type="text/javascript"></script>
<script src="/webResource/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/webResource/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/webResource/tool.js" type="text/javascript"></script>
<script src="/webResource/base.js" type="text/javascript"></script>
<script src="/webResource/defaultSettings.js" type="text/javascript"></script>
<script src="/webResource/private.js" type="text/javascript"></script>
@RenderSection("scripts", required: false)
</head>
<body style="width: 100%; height: 100%; margin: 0px;">
@RenderBody()
</body>
</html>
</div>
2、平台样式表base.css
.icon-find
{
background: url('icons/find.png') no-repeat center center;
}
.datagrid-toolbar div:nth-child(1)
{
float: left;
width: 60%;
}
.datagrid-toolbar div:nth-child(2)
{
margin-left: 60%;
margin-right: 10px;
width: auto;
text-align: right;
}
</div>
3、基本方法脚本base.js
//取消自动渲染
$.parser.auto = false;
function pageInit() {
//改变控件默认值
$.fn.linkbutton.defaults.plain = true;
$.fn.datagrid.defaults.fit = true;
$.fn.datagrid.defaults.fitColumns = true;
$.fn.datagrid.defaults.pagination = true;
//显示ajax异常信息
$(document).ajaxError(function (event, xhr, options, exc) {
$.messager.alert({ title: '异步请求出错', msg: xhr.responseText, icon: "error" });
});
//地址栏传参允许中文
jQuery(document).ajaxSend(function (event, request, options) {
options.url = encodeURI(options.url);
});
$.parser.parse();
}
function loadList(settings) {
var settings = $.extend(true, {}, loadListDefaultSettings, settings);
if ($("#" + settings.gridId).length == 0)
$.messager.alert({ title: "系统异常", msg: "DataGrid：" + settings.gridId + "不存在！", icon: "error" });
var quickQueryData = [];
if ($("#" + settings.queryBoxId).length > 0) {
var val = $("#" + settings.queryBoxId).textbox("getValue");
if (settings.searchFields && val) {
var keys = settings.searchFields.split(',');
for (i = 0, len = keys.length; i < len; i++) {
quickQueryData.push({ field: keys[i], method: 'inLike', value: val });
}
}
}
var queryData = []; //详细查询预留
//加载数据
$("#" + settings.gridId).datagrid("load", { quickQueryData: JSON.stringify(quickQueryData), queryData: JSON.stringify(queryData) });
}
</div>
4、基本脚本默认值defaultSettings.js
//查询参数设置
var loadListDefaultSettings = {
url: "getList",
gridId: "dataGrid",
queryWindowId: "queryWindow",
queryBoxId: "queryBox",
searchFields: "Name",
addQueryString: true,
prompt: "请输入"
};
5、可能需要使用的工具方法tool.js
//判断是否包含地址栏参数
function hasQueryString(key, url) {
if (typeof (url) == "undefined")
url = window.location.search;
var re = new RegExp("[?&]" + key + "=([^\\&]*)", "i");
var a = re.exec(url);
if (a == null) return false;
return true;
}
//获取地址栏参数,如果参数不存在则返回空字符串
function getQueryString(key, url) {
if (typeof (url) == "undefined")
url = window.location.search;
var re = new RegExp("[?&]" + key + "=([^\\&]*)", "i");
var a = re.exec(url);
if (a == null) return "";
return a[1];
}
//将当前地址栏参数加入到url
function addUrlSearch(url) {
var newParams = [];
var paramKeys = window.location.search.replace('?', '').split('&');
for (var i = 0; i < paramKeys.length; i++) {
var key = paramKeys[i].split('=')[0];
if (key == "" || key == "_t" || key == "_winid" || key == "isTab")
continue;
if (!hasQueryString(key, url))
newParams.push(paramKeys[i]);
}
if (url.indexOf('?') >= 0)
return url + "&" + newParams.join('&');
else
return url + "?" + newParams.join('&');
}
//url增加参数
function addSearch(url, key, value) {
if (!hasQueryString(key, url)) {
if (url.indexOf('?') >= 0)
return url + "&" + key + "=" + value;
else
return url + "?" + key + "=" + value;
}
else
return url;
}
//获取数组中对象的某个值，逗号分隔
function getValues(rows, attr) {
var fieldValues = [];
for (var i = 0; i < rows.length; i++) {
if (rows[i] != null)
fieldValues.push(rows[i][attr]);
}
return fieldValues.join(',');
}
</div>
6、可能需要使用的私有方法private.js，此文件包含的方法专供base.js使用，开发web时禁止使用
//替换掉Url中的{}参数
function replaceUrl(settings, pty) {
if (!pty)
pty = "url";
if (!settings[pty])
return;
var str = settings[pty];
var guid = "";
var result = str.replace(/\{[0-9a-zA-Z_]*\}/g, function (e) {
var key = e.substring(1, e.length - 1);
if (key == "GUID") {
if (!guid) {
$.ajax({