构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查

文章于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放到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(1, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(0, 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(1, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(0, 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(1, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    
                    return Json(0, JsonRequestBehavior.AllowGet);
                }
            }
            else
            {
                return Json(0, JsonRequestBehavior.AllowGet);
            }


        }
        #endregion
        
    }
}

在创建视图之前,我们先创建一个模板页,打开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>

我们以后的弹出窗口全部要用到这个模版,这个模版页主要是引入了数据编辑和校验 下面创建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>
}

总结

修改就把创建复制一份,保存的时候把url指到修改 详细就把保存去掉就可以了 查询,在Controller的GetList增加一个queryStr参数,在BLL判断是queryStr是否为空。不为空就用Linq写多个where,O了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

使用Go开发一个简单的服务器程序

最近有个小项目,需要一个简单的后台程序来支撑,本来想用Nodejs来做,但是由于本人js一直很菜,并且很讨厌callback,虽然我也很喜欢异步模型,但我一直都...

3586
来自专栏Golang语言社区

golang go语言 http包 和 高并发下的websocket

用golang 建立起一个http server 非常的简单,只要简单的几行代码: package main import ( " net/ht...

4997
来自专栏Golang语言社区

Golang语言调用百度帐号

1:你要注册一个开发者,创建应用,填写完基本信息之后就要填写回调地址了 2:选择右上角的管理控制台---选择左下角的 其他API -- 选择安全设置--授权回调...

35514
来自专栏守望轩

html页面表格导出到excel总结

最近一个项目需要把报表的表格导入excel,在网上找了一些方法,比较研究了一下,记在这里,备忘。 表格例子如下: <table id="tableExcel" ...

3999
来自专栏游戏杂谈

测试用户的网络环境

这个其实是一个hta文件,目的是测试用户本机请求资源、hosts文件、当前所处的位置。参考stone的checknetwork4qqfarm: http://c...

2231
来自专栏圣杰的专栏

ABP入门系列(5)——展现层实现增删改查

这一章节将通过完善Controller、View、ViewModel,来实现展现层的增删改查。最终实现效果如下图: ? 一、定义Controller ABP对A...

2555
来自专栏菩提树下的杨过

flash 显示 qq客服状态

前几天看到有园友写了一篇“ flash查看对方qq是否在线 ”,正好今天有一个朋友搞flash全站,想使用这个功能,但是有些小要求,点击图标后,要求弹出QQ对话...

20610
来自专栏Golang语言社区

使用Go开发一个简单的服务器程序

最近有个小项目,需要一个简单的后台程序来支撑,本来想用Nodejs来做,但是由于本人js一直很菜,并且很讨厌callback,虽然我也很喜欢异步模型,但我一直都...

3519
来自专栏Pythonista

博客园css样式代码

文章有一个好的排版,将能够增加阅读者对其内容的兴趣。本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引...

3542
来自专栏Golang语言社区

【Golang语言社区】GO语言启动exe文件并传递参数

大家好,我是社区主编彬哥,今天给大家带来的是关于go语言命令调用本地的exe,并传递参数启动,代码如下: package main import (...

3627

扫码关注云+社区

领取腾讯云代金券