一步一步搭框架(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. 【c#】对象转json字符串/字符串转Json对象

    using Newtonsoft.Json; 一.Hashtable => Json Hashtable hash = new Hashtable(); hash.Add("key1& ...

  2. ime-mode

    2016-08-18 ime-mode 用户输入法控制,主要是防止用户输入文本符号等(比如电话号码输入时) (设定值) auto･･･和没设定一样 active･･･激活本地输入法(如中文),用户可以 ...

  3. Caché数据库学习笔记（5）

    目录 Cache数据库方法的RESTful封装 ================================================================ 因为对web serv ...

  4. 在myeclipse2014使用git上传github

    简介 首先在myeclipse中安装github客户端插件,这里就不说了,跟安装svn客户端插件一样的步骤 1.选中要push到github的工程右键team->share project-&g ...

  5. InventSumDelta表的作用

    https://groups.google.com/forum/#!topic/microsoft.public.axapta.programming/rRfbJo9M0dk The purpose ...

  6. biweb添加新的模块

    1.例如添加一个新闻模块,首先去纯净的项目的根目录复制出一个news文件夹到项目外 2.打开dreamweaver, 编辑 ->查找和替换 例如 新模块 叫 我的新闻,英文名叫mynews,则进 ...

  7. sass2:

    ass学习笔记2 今天介绍sass在重用代码时最具威力的两个功能.一个是嵌套(Nesting),一个混合(Mixin). 我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上,而这定义过 ...

  8. MYSQL5.7版本sql_mode=only_full_group_by问题

    具体出错提示: [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggr ...

  9. CentOS 7 Mysql yum源

    CentOS 7 安装Mysqlrpm -ivh http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpmyum install m ...

  10. asp.net和js读取文件的MD5值的方法

    前言 文件的md5值,即文件签名,为了验证文件的正确性,是否被恶意篡改等.每个文件有一个唯一的md5值. 最近公司开发的app文件包的校验就有用到文件md5值. 一.asp.net获取 ①和上传文件一 ...