系列目录

文章于2016-12-17日重写

在第八讲中，我们已经做到了怎么样分页。这一讲主要讲增删改查。第六讲的代码已经给出，里面包含了增删改，大家可以下载下来看下。

这讲主要是，制作漂亮的工具栏，虽然easyui的datagrid已经自带可以设置工具栏，我们还是要提取出来，为以后权限控制做更好的准备。

先看一张界面调整后的效果图

大家只要加入以下HTML代码到index上就可以了

<div class="mvctool">

<input id="txtQuery" type="text" class="searchText">

<a id="btnQuery" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-search" style="padding-left: 20px;">查询</span></span></a><div class="datagrid-btn-separator"></div>

<a id="btnCreate" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-add" style="padding-left: 20px;">新增</span></span></a><div class="datagrid-btn-separator"></div>

<a id="btnEdit" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-edit" style="padding-left: 20px;">编辑</span></span></a><div class="datagrid-btn-separator"></div>

<a id="btnDetails" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-details" style="padding-left: 20px;">详细</span></span></a><div class="datagrid-btn-separator"></div>

<a id="btnDelete" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-remove" style="padding-left: 20px;">删除</span></span></a><div class="datagrid-btn-separator"></div>

<a id="btnExport" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-export" style="padding-left: 20px;">导出</span></span></a>

<a id="btnReload" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-reload" style="padding-left: 20px;">刷新</span></span></a>

</div>

有能力的朋友再优化一下样式

好，我们用jquery为按钮添加事件。增、删、改、查，把导出和刷新删掉吧。没用到

在index加入以下代码js代码

<script type="text/javascript">

    //ifram 返回

    function frameReturnByClose() {

        $("#modalwindow").window('close');

    }

    //iframe 返回并刷新

    function frameReturnByReload(flag) {

        if (flag)

            $("#List").datagrid('load');

        else

            $("#List").datagrid('reload');

    }

    //输出信息

    function frameReturnByMes(mes) {

        $.messageBox5s('提示', mes);

    }

    $(function () {

        $("#btnCreate").click(function () {

            $("#modalwindow").html("<iframe width='100%' height='98%' scrolling='no' frameborder='0'' src='/SysSample/Create'></iframe>");

            $("#modalwindow").window({ title: '新增', width: 700, height: 400, iconCls: 'icon-add' }).window('open');

        });

        $("#btnEdit").click(function () {

            var row = $('#List').datagrid('getSelected');

            if (row != null) {

                $("#modalwindow").html("<iframe width='100%' height='99%'  frameborder='0' src='/SysSample/Edit?id=" + row.Id + "&Ieguid=" + GetGuid() + "'></iframe>");

                $("#modalwindow").window({ title: '编辑', width: 700, height: 430, iconCls: 'icon-edit' }).window('open');

            } else { $.messageBox5s('提示', '请选择要操作的记录'); }

        });

        $("#btnDetails").click(function () {

            var row = $('#List').datagrid('getSelected');

            if (row != null) {

                $("#modalwindow").html("<iframe width='100%' height='98%' scrolling='no' frameborder='0' src='/SysSample/Details?id=" + row.Id + "&Ieguid=" + GetGuid() + "'></iframe>");

                $("#modalwindow").window({ title: '详细', width: 500, height: 300, iconCls: 'icon-details' }).window('open');

            } else { $.messageBox5s('提示', '请选择要操作的记录'); }

            });

        $("#btnQuery").click(function () {

            var queryStr = $("#txtQuery").val();

            //如果查询条件为空默认查询全部

            if (queryStr == null) {

                queryStr = "%";

            }

            $('#List').datagrid({

                url: '/SysSample/GetList?queryStr=' + encodeURI(queryStr)

            });

        });

        $("#btnDelete").click(function () {

            var row = $('#List').datagrid('getSelected');

            if (row != null) {

                $.messager.confirm('提示', '确定删除', function (r) {

                        if (r) {

                            $.post("/SysSample/Delete?id=" + row.Id, function (data) {

                                if (data.type == 1)

                                    $("#List").datagrid('load');

                                $.messageBox5s('提示', data.message);

                            }, "json");

                        }

                    });

            } else { $.messageBox5s('提示', '请选择要操作的记录'); }

            });

    });

</script>

里面用到了easyui 的window

所以我们在Index顶部加入一个层来包含弹出window，我们把增加，修改的视图放在iframe里面，然后附加到window里面弹出

<div id="modalwindow" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>

<div class="mvctool">................

关于$.messageBox5s是我扩展easyui的message控件的结果，扩展如下

/**

* 在iframe中调用，在父窗口中出提示框(herf方式不用调父窗口)

*/

$.extend({

    messageBox5s: function (title, msg) {

        $.messager.show({

            title: title, msg: msg, timeout: 5000, showType: 'slide', style: {

                left: '',

                right: 5,

                top: '',

                bottom: -document.body.scrollTop - document.documentElement.scrollTop+5

            }

        });

    }

});

$.extend({

    messageBox10s: function (title, msg) {

        $.messager.show({

            title: title, msg: msg, height: 'auto', width: 'auto', timeout: 10000, showType: 'slide', style: {

                left: '',

                right: 5,

                top: '',

                bottom: -document.body.scrollTop - document.documentElement.scrollTop + 5

            }

        });

    }

});

$.extend({

    show_alert: function (strTitle, strMsg) {

        $.messager.alert(strTitle, strMsg);

    }

});

/**

* panel关闭时回收内存，主要用于layout使用iframe嵌入网页时的内存泄漏问题

*/

$.fn.panel.defaults.onBeforeDestroy = function () {

    var frame = $('iframe', this);

    try {

        // alert('销毁，清理内存');

        if (frame.length > 0) {

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

                frame[i].contentWindow.document.write('');

                frame[i].contentWindow.close();

            }

            frame.remove();

            if ($.browser.msie) {

                CollectGarbage();

            }

        }

    } catch (e) {

    }

};

jquery.easyui.plus.js

创建jquery.easyui.plus.js放到scripts目录下，引入即可

编译预览一下，点击下，新增和编辑，好，有效果了

此时我们创建增加，和编辑的action和view

这里是SysSampleController的代码

using System.Collections.Generic;

using System.Linq;

using System.Web.Mvc;

using App.Common;

using App.IBLL;

using App.Models.Sys;

using Microsoft.Practices.Unity;

namespace App.Admin.Controllers

{

    public class SysSampleController :Controller

    {

        /// <summary>

        /// 业务层注入

        /// </summary>

        [Dependency]

        public ISysSampleBLL m_BLL { get; set; }

        public ActionResult Index()

        {

            return View();

        }

        public JsonResult GetList(GridPager pager, string queryStr)

        {

            List<SysSampleModel> list = m_BLL.GetList(ref pager);

            var json = new

            {

                total = pager.totalRows,

                rows = (from r in list

                        select new SysSampleModel()

                        {

                            Id = r.Id,

                            Name = r.Name,

                            Age = r.Age,

                            Bir = r.Bir,

                            Photo = r.Photo,

                            Note = r.Note,

                            CreateTime = r.CreateTime,

                        }).ToArray()

            };

            return Json(json, JsonRequestBehavior.AllowGet);

        }

        #region 创建

        public ActionResult Create()

        {

            return View();

        }

        [HttpPost]

        public JsonResult Create(SysSampleModel model)

        {

                if (m_BLL.Create(model))

                {

                    return Json(, JsonRequestBehavior.AllowGet);

                }

                else

                {

                    return Json(, JsonRequestBehavior.AllowGet);

                }

        }

        #endregion

        #region 修改

        public ActionResult Edit(string id)

        {

            SysSampleModel entity = m_BLL.GetById(id);

            return View(entity);

        }

        [HttpPost]

        public JsonResult Edit(SysSampleModel model)

        {

                if (m_BLL.Edit(model))

                {

                    return Json(, JsonRequestBehavior.AllowGet);

                }

                else

                {

                    return Json(, JsonRequestBehavior.AllowGet);

                }

        }

        #endregion

        #region 详细

        public ActionResult Details(string id)

        {

            SysSampleModel entity = m_BLL.GetById(id);

            return View(entity);

        }

        #endregion

        #region 删除

        [HttpPost]

        public JsonResult Delete(string id)

        {

            if (!string.IsNullOrWhiteSpace(id))

            {

                if (m_BLL.Delete(id))

                {

                    return Json(, JsonRequestBehavior.AllowGet);

                }

                else

                {

                    return Json(, JsonRequestBehavior.AllowGet);

                }

            }

            else

            {

                return Json(, JsonRequestBehavior.AllowGet);

            }

        }

        #endregion

    }

}

SysSampleController

在创建视图之前，我们先创建一个模板页，打开views下面的Shared创建

<!DOCTYPE html>

<html>

<head>

    <title>Main</title>

    @Styles.Render("~/Content/themes/blue/css")

    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>

     <script src="@Url.Content("~/Scripts/jquery.easyui.plus.js")"></script>

    @Styles.Render("~/Content/css")

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

</head>

<body>

        @RenderBody()

</body>

</html>

_Index_LayoutEdit.cshtml

我们以后的弹出窗口全部要用到这个模版，这个模版页主要是引入了数据编辑和校验
下面创建Create视图

@model App.Models.Sys.SysSampleModel

@using App.Common;

@using App.Models.Sys;

@using App.Admin;

@{

     ViewBag.Title = "创建";

    Layout = "~/Views/Shared/_Index_LayoutEdit.cshtml";

}

<script type="text/javascript">

    $(function () {

        $("#btnSave").click(function () {

                $.ajax({

                    url: "/SysSample/Create",

                    type: "Post",

                    data: $("#CreateForm").serialize(),

                    dataType: "json",

                    success: function (data) {

                        if (data == 1) {

                            window.parent.frameReturnByMes("成功");

                            window.parent.frameReturnByReload(true);

                            window.parent.frameReturnByClose()

                        }

                        else {

                            window.parent.frameReturnByMes("失败");

                        }

                    }

                });

        });

    });

    </script>

<div class="mvctool bgb">

    <a id="btnSave" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-save" style="padding-left: 20px;">保存</span></span></a>

</div>

@using (Html.BeginForm("Create", "SysSample", null, FormMethod.Post, new { Id = "CreateForm" }))

{

    @Html.ValidationSummary(true)

    <table class="fromEditTable setTextWidth300">

        <tbody>

            <tr>

                <td style="width:100px; text-align:right;">

                    @Html.LabelFor(model => model.Id)：

                </td>

                <td style="width:310px">

                    @Html.EditorFor(model => model.Id)

                </td>

                <td>@Html.ValidationMessageFor(model => model.Id)</td>

            </tr>

            <tr>

                <td style="width:100px; text-align:right;">

                    @Html.LabelFor(model => model.Name)：

                </td>

                <td>

                    @Html.EditorFor(model => model.Name)

                </td>

                <td>

                    @Html.ValidationMessageFor(model => model.Name)

                </td>

            </tr>

            <tr>

                <td style="width:100px; text-align:right;">

                    @Html.LabelFor(model => model.Age)：

                </td>

                <td>

                    @Html.EditorFor(model => model.Age)

                    </td>

                <td>

                    @Html.ValidationMessageFor(model => model.Age)

                </td>

            </tr>

            <tr>

                <td style="width:100px; text-align:right;">

                    @Html.LabelFor(model => model.Bir)：

                </td>

                <td>

                    @Html.TextBoxFor(model => model.Bir)

                    </td>

                <td>

                    @Html.ValidationMessageFor(model => model.Bir)

                </td>

            </tr>

            <tr>

                <td style="width:100px; text-align:right;">

                    @Html.LabelFor(model => model.Note)：

                </td>

                <td>

                    @Html.EditorFor(model => model.Note)

                    </td>

                <td>

                    @Html.ValidationMessageFor(model => model.Note)

                </td>

            </tr>

            <tr>

                <td style="width:100px; text-align:right;">

                    @Html.LabelFor(model => model.CreateTime)：

                </td>

                <td>

                    @Html.TextBoxFor(model => model.CreateTime)

                    </td>

                <td>

                    @Html.ValidationMessageFor(model => model.CreateTime)

                </td>

            </tr>

             <tr>

                <td style="width:100px; text-align:right;">

                    @Html.LabelFor(model => model.Photo)：

                </td>

                  <td>

                      @Html.TextBoxFor(model => model.Photo)

                    </td>

                <td>

                    @Html.ValidationMessageFor(model => model.Photo)

                </td>

            </tr>

        </tbody>

    </table>

}

Create

总结

修改就把创建复制一份，保存的时候把url指到修改

详细就把保存去掉就可以了

查询，在Controller的GetList增加一个queryStr参数，在BLL判断是queryStr是否为空。不为空就用Linq写多个where，O了

最新文章

  1. Linux下的几个好用的命令与参数
  2. 16进制ascii码转化为对应的字符,付ipmitool查询硬件信息
  3. IOS第18天(6,CAKeyframeAnimation关键帧动画）
  4. 矩阵（matrix）
  5. Sql 临时表
  6. C#_自动化测试1_模拟post,get_12306火车票网站自动登录工具
  7. Python中逗号作用的实例分析
  8. cf590A Median Smoothing
  9. 解决linux下oracle进入sqlplus环境中后退键显示^H、上下键无效与ctrl+l无法清屏等问题【weber出品必属精品】
  10. AngularJS中如何对Controller与Service进行分层设计与编码
  11. 【转】分享一份C语言写的简历
  12. shell学习笔记(一)
  13. ios 一步一步学会自定义地图吹出框(CalloutView)--&gt;(百度地图，高德地图,google地图)
  14. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown database &#39;user&#39;
  15. （1）Deep Learning之感知器
  16. 在Linux命令行中以图形化窗口打开文件夹
  17. 如何查杀stopped进程
  18. 破解爱奇艺优酷等Vip视频
  19. ssm项目中遇到微信用户名称带有表情，插入失败问题
  20. acm 2072

热门文章

  1. 如何一步一步用DDD设计一个电商网站（二）—— 项目架构
  2. 阿里签名中URLEncode于C#URLEncod不同之处
  3. 无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动，并且客户端端口与服务器端口相同。如果服务器位于远程计算机上，请检查。。。
  4. 让 windows 下的命令行程序 cmd.exe 用起来更顺手
  5. 获取Canvas当前坐标系矩阵
  6. JQuery（2）
  7. J a v a 的“多重继承”
  8. Spring（三）__aop编程
  9. Android Fragment 剖析
  10. BZOJ 3238: [Ahoi2013]差异 [后缀数组 单调栈]