一步一步搭框架(asp.netmvc+easyui+sqlserver)-02

我们期望简洁带前台代码，如下：

<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>

为了这样简洁的前台，我们需要准备：

1、通用的布局模板_Layout.cshtml。

<!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>

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;

}

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) });

}

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(',');

}

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({

                    url: "getGuid",

                    type: "post",

                    async: false,

                    success: function (text, textStatus) {

                        guid = text;

                    }

                });

            }

            return guid;

        }

        if (hasQueryString(key)) //从地址栏返回

            return getQueryString(key);

        if (settings.currentRow && settings.currentRow[key])//从当前行返回

            return settings.currentRow[key];

        if (settings.paramFrom) { //从指定控件返回

            var ctrl = mini.get(settings.paramFrom);

            if (ctrl == undefined) {

                $.messager.alert({ title: 'UI出错', msg: "Id为" + settings.paramFrom + "的控件不存在！", icon: "error" });

                return;

            }

            else if (ctrl.showCheckBox) {

                return getValues(ctrl.getCheckedNodes(), key);

            }

            else if (ctrl.getSelecteds)

                return getValues(ctrl.getSelecteds(), key);

            else if (ctrl.getValue)

                return ctrl.getValue();

        }

        return e;

    });

    settings[pty] = result;

    return result;

}

//转化为全路径

function changeToFullUrl(settings) {

    var url = settings.url;

    if (url.indexOf('/') == 0 || url.indexOf("http://") == 0 || url.indexOf('?') == 0 || url == "")

        return url;

    currentUrlPathName = window.location.pathname;

    var currentPathNameParts = currentUrlPathName.split('/');

    var pathNameParts = url.split('?')[0].split('/');

    if (currentPathNameParts[currentPathNameParts.length - 1] == "")

        currentPathNameParts.pop(); //去掉一个反斜线

    if (pathNameParts[pathNameParts.length - 1] == "")

        pathNameParts.pop(); //去掉一个反斜线

    var index = currentPathNameParts.length - 1;

    for (var i = 0; i < pathNameParts.length; i++) {

        if (pathNameParts[i] == "..") {

            index = index - 1;

            if (index <= 0) {

                $.messager.alert({ title: "系统异常", msg: "Url错误：" + url + "！", icon: "error" });

return;

            }

            continue;

        }

        if (index < currentPathNameParts.length)

            currentPathNameParts[index] = pathNameParts[i];

        else

            currentPathNameParts.push(pathNameParts[i]);

        index = index + 1;

    }

    var length = currentPathNameParts.length;

    for (var i = index; i < length; i++) {

        currentPathNameParts.pop();

    }

    var result = currentPathNameParts.join('/');

    if (url.indexOf('?') > 0)

        result += url.substring(url.indexOf('?'));

    settings.url = result;

}

以上是目前的全部前台代码。

一步一步搭框架(asp.netmvc+easyui+sqlserver)-02的更多相关文章

  1. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-03

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-03 我们期望简洁的后台代码,如下: using System; using System.Collections.Gener ...

  2. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-01

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-01 要搭建的框架是企业级开发框架,适用用企业管理信息系统的开发,如:OA.HR等 1.框架名称:sampleFrame. 2 ...

  3. (转) 一步一步学习ASP.NET 5 (四）- ASP.NET MVC 6四大特性

    转发:微软MVP 卢建晖 的文章,希望对大家有帮助.原文:http://blog.csdn.net/kinfey/article/details/44459625 编者语 : 昨晚写好的文章居然csd ...

  4. ASP.NET MVC 3 Model【通过一简单实例一步一步的介绍】

    今天主要讲Model的两个方面: 1. ASP.Net MVC 3 Model 简介 通过一简单的事例一步一步的介绍 2. ASP.Net MVC 3 Model 的一些验证 MVC 中 Model ...

  5. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](一)

    前言 大家好,我是Rector 从今天开始,Rector将为大家推出一个关于创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar]的文章系列, ...

  6. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](四)

    前言 上一篇<一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](三)>,我们完成了: * 引用SqlSugar * ...

  7. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](三)

    前言 上一篇<一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](二)>我们通过如下操作: 创建实体及工具类 创建Re ...

  8. #使用abp框架与vue一步一步写我是月老的小工具（2） 后台搭建初体验

    #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验 一.续上前言 关于这个小玩意的产品思考,假设我暂时把他叫我是月老热心人 这是一个没有中心的关系链,每个人进入以后都是以自己为中 ...

  9. 3、带你一步一步学习ASP.NET Core中的配置之Configuration

    如果你是刚接触ASP.NET Core的学习的话,你会注意到:在ASP.NET Core项目中,看不到.NET Fraemwork时代中的web.config文件和app.config文件了.那么你肯 ...

随机推荐

  1. html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  2. Pattern Recognition for Cell-free DNA - Github

    一直都没有找到生信领域简单易懂的机器学习案例,这回算是逮到一个了:机器学习识别cfDNA OpenGene/CfdnaPattern

  3. android JNI开发

    1.NDK简介 NDK(Native Development Kit)NDK提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so和java应用一起打包成apk.NDK集成了交叉 ...

  4. sqoop、flume 安装

    sqoop安装步骤 1.上传解压tar包 tar -zxvf  sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz 2.修改配置文件 进入 sqoop/conf/ c ...

  5. torrent

    The World's Largest BitTorrent System

  6. 利用node来下载图片到本地

      本文是针对于知道图片地址的下载图片方法. 同时也是我的处男作(额,怪怪的〜);不要在意这些细节. 最近在弄项目迁移,需要把http的链接全换成https的:以前的cms不支持http的协议,然后就 ...

  7. Scala学习（二）

    二.Scala基础 1.变量:三种修饰符 -> ①val 常亮②var 变量③lazy val 惰性变量求值 2.类型 3.代码块 Block {exp1;exp2} 或 { exp1 exp2 ...

  8. Redis常用命令入门4：集合类型

    集合类型 之前我们已经介绍过了最基本的字符串类型.散列类型.列表类型,下面我们一起学习一下集合类型. 集合类型也是体现redis一个比较高价值的一个类型了.因为Redis的集合类型,所以我们可以很容易 ...

  9. Windows Store App 网络通信 HttpWebRequest

    如果希望更好地控制HTTP请求,可以使用System.Net类库中的HttpWebRequest类,该类对HTTP协议进行了完整的封装,并且提供了很多对HTTP协议中的 Header.Content和 ...

  10. 在MyEclipse中配置Tomcat服务器

    http://wenku.baidu.com/link?url=j0rrOEvt10zgsJVWX3wuV26uVc2fz5MhIusvLWzvK_KZWMKq60wuDaMnHGck0PR6sCrU ...