一步一步搭框架(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. IDEA建立---- java web项目

    1.新建一个javaweb项目 2.给项目命名 3.建立完的项目结构大概是这样(在web 下新建 两个目录lib 和 classes) 4.找到project Structure---------&g ...

  2. Attendance

    1.打怪 福利好美味(色.... 努力是为了,遇到你时,可以不用因为种种而错过. 一公司的老板对一位职员说:“我出10万买你的老婆,你卖吗?” 职员微笑着说:“那我出15万买你老婆,你同意吗?” 老板 ...

  3. TortoiseGit编辑全局变量支持https

    在windows,右键,进入tortoisegit的设置窗口,在左边树形菜单选Git,然后店"编辑全局.gid/config"按钮 输入以下文字 [http] sslVerify ...

  4. python 执行execute遇到的问题

    1.如下方式去查询无法查询出结果,但直接在数据库查询中去查询是能查询到结果的,郁闷中,花了很久的时间才知道原来是双引号导致的 把:name="%s" 中的%s前后的双引号去掉就对了 ...

  5. Shell脚本快速入门

    最近看了下Shell脚本.曾经遇到很多现成的工具包里边就多次用到了Shell脚本.总之这东西的作用无非就是将一系列的操作进行整合. ·整合后使得一套工作更加模块化规范化. ·批量处理要比手动操作快得多 ...

  6. python错误类型

    在运行或编写一个程序时常会遇到错误异常,这时python会给你一个错误提示类名,告诉出现了什么样的问题(Python是面向对象语言,所以程序抛出的异常也是类).能很好的理解这些错误提示类名所代表的意思 ...

  7. box-sizing 属性、min-width属性、max-width属性

    1.box-sizing  这个属性是CSS3新增的属性.IE8开始兼容.box-sizing: border-box; border-box,就是边框的这个小盒.这个属性命令,width数值指的是b ...

  8. laravel cookie写入

            $cookie = cookie('cookie_name', 'value', 5);        $data = ['title'=>'hello world'];     ...

  9. Struts2_三种传参数方法

    1.通过属性传参数(Attr)UserAction.java package com.bebig.struts2.user.action;import com.opensymphony.xwork2. ...

  10. C++中的数组

    数组名作为参数时,传递的是数组的首地址, 主调函数中实参数组元素个数不应该少于形参数组的元素个数 把数组名作为参数时,一般不指定数组第一维的大小 即使指定,编译时也会被忽略的.