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

最新推荐文章于 2020-11-27 01:41:21 发布
最新推荐文章于 2020-11-27 01:41:21 发布
阅读量312 收藏
点赞数
分类专栏： MVC操作类

文章于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了

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

Andrewniu
关注
专栏目录
C# MVC4+EasyUI框架增删改查
03-29
你下载了要修改数据库连接，还有把字段改成你的任意一张表的字段，不然会操作错误的，数据操作页面和职位管理页面2个都是调用了同一个ashx文件，不过2个页面的写法有点不同，刚学MVC不久
ASP.NET EasyUI实现增删改查
北国的雪
01-10 4582
C# EasyUI增删改差 ,ASP.NET
ASP.NET MVC5+EF6+EasyUI 后台管理系统（5）-EF增删改查
博客已经搬家到：ymnets.cnblogs.com 不再更新此博客
11-29 2548
系列目录 前言 为了符合后面更新后的重构系统，文章于2016-11-1日重写 回顾上一节的解决方案，我们看出了解决方案中类库的关系 这里要说明一点MVC!=三层 他们大约是这样的一种关系 代码实现 上一节我们在EF添加了一个实体，这次我们来看看怎么操作这个实体，下面我们创建IDAL,DAL,IBLL,BLL的代码： 新建一个SysSampleController的控制器
ASP.NET MVC5+EF6+EasyUI 后台管理系统（80）-自由桌面
weixin_34059951的博客
11-03 135
系列目录 前言 这次我们来做一个有趣的事情，有朋友跟做了很远，找我要自由桌面的代码，这次我们将演示自由桌面的代码。 自由桌面：用户可以随意增删改桌面的布局、个数（只留自己需要看到的数据），这次纯属EasyUI前端 当然您抛弃EasyUI你同样也能为你的系统桌面定制有趣自由布局 结果预览   实现思路 本次实现主要用到EasyUI一个非常不常用的组件Draggable（拖...
Ext JS 学习(1) Ext.MessageBox.show()方法的使用
lvjian700的博客
10-28 6783
.Ext.MessageBox.show()方法   功能很强大，采用config配置形式，比前面的方法使用更方便。   参数很多，在此列举最常用的配置参数：1.animEl:对话框弹出和关闭时的动画效果，比如设置为“id1”，则从id1处弹出并产生动画，收缩则相反2.buttons:弹出框按钮的设置，主要有以下几种：Ext.Msg.OK,                           
微信后台 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统.zip
最新发布
03-13
客户关系管理系统（CRM）： 用于管理与客户之间的关系，包括客户信息、沟通记录、销售机会跟踪等。CRM系统有助于企业更好地理解客户需求，提高客户满意度和保留率。 医院管理系统： 用于管理医院或医疗机构的患者...
ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享
10-21
总的来说，这个后台管理系统利用了ASP.NET MVC4的灵活性和强大的路由、模型绑定等功能，结合Entity Framework 5进行数据访问，使用EasyUI构建用户界面，以及Unity 2.x实现依赖注入，提升了代码的可维护性和可扩展性...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统
06-25
### 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统 #### 一、ASP.NET MVC 基础 ASP.NET MVC 是一种用于构建动态Web应用程序的框架，它遵循模型-视图-控制器(Model-View-Controller)设计模式。通过将...
ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统
12-27
综合以上技术，"ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统"是一个采用现代Web开发技术构建的高效、安全且易维护的后台管理解决方案。通过MVC5，开发者可以构建清晰的业务逻辑结构；EF6简化了数据库...
Ext.MessageBox.show()方法的使用
jilijelon
11-18 2838
Ext.MessageBox.show()方法    功能很强大，采用config配置形式，比前面的方法使用更方便。    参数很多，在此列举最常用的配置参数： 1.animEl:对话框弹出和关闭时的动画效果，比如设置为“id1”，则从id1处弹出并产生动画，收缩则相反 2.buttons:弹出框按钮的设置，主要有以下几种：Ext.Msg.OK,
C#easyui实现增删改查
widenstage的专栏
04-25 6295
上文，我们使用pb，c#WinForm，c#WebForm分别实现了增删改查，本文，我们C#easyui来实现一下。首先，说明一点，WebForm和easyui基本是一样，代码基本雷同，就是一个使用了服务器控件，一个使用easyui，排版有点不一样，服务器端的代码没有什么变化。数据库仍然采用sqlserver，表仍然采用table_test，字段不说了，参考前文。 首先，在vs中创建一个ASP.
[asp.net] easyui行内编辑实现增删改查
XYZ
07-02 1245
easyui行内编辑功能强大，可以将增删改查操作都放在一个页面上进行，因此大大减少了冗余代码。笔者参考他人做的增删改查的实例效果如下图。具体实现如下：1.前端代码Show.html&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta http-equiv="pragm...
【WINAPI】MessageBox细解（三）
liyackl的博客
11-27 809
MessageBox()我们习以为常的函数内部也隐藏着许多秘密。让我们开始揭秘他们吧。这个第三部分就来讲讲ServiceMessageBox()的内部实现。
关于messagebox的使用
u012432043的专栏
01-28 1198
今天调试程序，需要弹出一个信息提示框，就想用messagebox，但是总是提示各种错误，现将自己遇到的问题和解决方法总结如下： 1.一开始提示messagebox找不到字符，然后根据网上的方法加入了#include“windows.h” 2.然后我就按照MFC下的编程习惯，直接敲入messagebox("string");提示：不能接受1个参数 3.然后我就从网上搜索了一下，发现MFC对me
学习日记13、ajax同时提交from表单和多个参数
weixin_30781631的博客
04-06 186
if ($("form").valid()) { $.ajax({ url: "@Url.Action("EditCusAndCusCard")", type: "Post", data: $("form").serialize()+"&"+ $.p...
JQuery学习记录
藏何的专栏
07-06 425
1、each循环方法，将集合中的数据
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（14）-EasyUI缺陷修复与扩展...
weixin_34362790的博客
11-23 100
系列目录 不知不觉已经过了13讲，（本来还要讲多一讲是，数据验证之自定义验证，基于园友还是对权限这块比较敢兴趣，讲不讲验证还是看大家的反映），我们应该对系统有一个小结。首先这是一个团队开发项目，基于接口编程，我们从EasyUI搭建系统的框架开始，开始了一个样例程序对EasyUI的DataGrid进行了操作，并实现Unity的注入到容器，使程序 的性能大大提升，代码质量上升，更佳利于单元测试，使用...
EasyUi+mvc增删改查
wanglei_smartfish的专栏
08-24 2972
1.首先得下载EasyUi包。 2.前端html代码如下： @*     For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860 *@ @{     ViewBag.Title = "拍卖会列表";     Layout
Asp.net MVC 学习之路-003（增删改查，后端手工，前端生成）
weixin_33758863的博客
03-09 2075
时间：2017-03-09 Asp.net Mvc实现增删改查 1， 创建数据库 可参考我写的EntityFramework实现过程：http://www.jianshu.com/nb/10166743 基于EF-ModelFirst思想在项目models文件夹下新建一个ADO.NET实体数据模型，完成实体和...
ASP.NET MVC4+EF5+EasyUI后台管理系统的前端框架构建源码
"ASP.NET MVC4+EF5+EasyUI+Unity2.x后台管理系统前端页面框架构建源码分享" 本文将详细介绍如何使用ASP.NET MVC4、Entity Framework 5（EF5）、EasyUI和Unity 2.x依赖注入框架构建一个后台管理系统的前端页面框架。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值