在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中，已经搭建好了Repository层，本篇就剩下增删改查的界面了......今天的阳光真特么好，写完本篇，好出去在阳光下溜溜狗、散散步什么的，正所谓文武之道一张一弛，走神了，进入正题。

首先是一个View Model，在这里定义验证规则，提交和保存数据的时候还必须和领域模型映射。

using System;

using System.ComponentModel.DataAnnotations;


namespace MvcApplication3.Models

{

    public class ProductVm

    {

        public int Id { get; set; }


        [Required(ErrorMessage = "必填")]

        [Display(Name = "名称")]

        [StringLength(6,  ErrorMessage = "最大长度6位")]

        public string Name { get; set; }


        [Required(ErrorMessage = "必填")]

        [Display(Name = "分类")]

        [StringLength(6, ErrorMessage = "最大长度6位")]

        public string Category { get; set; }


        [Required(ErrorMessage = "必填")]

        [Display(Name = "价格")]

        [Range(typeof(Decimal), "0", "9999", ErrorMessage = "{0} 必须是数字介于 {1} 和 {2}之间.")]

        public decimal Price { get; set; }

    }

}

创建HomeController

using System.Linq;

using System.Web.Mvc;

using MvcApplication3.Models;


namespace MvcApplication3.Controllers

{

    public class ProductController : Controller

    {

        static readonly IProductRepository repository = new ProductRepository();


        #region 显示查询


        /// <summary>

        /// 显示主界面

        /// </summary>

        /// <returns></returns>

        public ActionResult Index()

        {

            return View();

        }


        private string _name = string.Empty; //用来接收查询中有关Name的值

        private string _category = string.Empty;//用来接收查询中有关Category的值


        /// <summary>

        /// 根据查询参数获取所有产品，以json返回

        /// </summary>

        /// <returns></returns>

        public ActionResult GetProdutJson()

        {

            //page和rows是datagrid传递的默认参数

            int pageIndex = int.Parse(Request["page"]);

            int pageSize = int.Parse(Request["rows"]);


            //如果查询中包括Name

            if (!string.IsNullOrEmpty(Request["name"]))

            {

                _name = Request["name"];

            }


            //如果查询中包括Category

            if (!string.IsNullOrEmpty(Request["category"]))

            {

                _category = Request["category"];

            }


            //初始化查询实例

            var queryParams = new ProductParam

            {

                PageIndex = pageIndex,

                PageSize = pageSize,

                Name = _name,

                Category = _category

            };


            //根据查询实例查找对应的数据

            int totalNum = 0;

            var products = repository.LoadProductPageData(queryParams, out totalNum);


            //投影出需要传递给datagrid的数据

            var result = from p in products

                select new {p.Id, p.Name, p.Category, p.Price};


            //datagrid所需要的格式{total:10, rows=[]}

            var jsonResult = new {total = totalNum, rows = result};


            return Json(jsonResult, JsonRequestBehavior.AllowGet);

        }


        #endregion


        #region 添加


        /// <summary>

        /// 添加显示，返回一个强类型部分视图

        /// </summary>

        /// <returns></returns>

        public ActionResult AddProduct()

        {

            return PartialView("_AddProduct", new ProductVm());

        }


        /// <summary>

        /// 添加提交

        /// </summary>

        /// <returns></returns>

        [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult AddProduct(ProductVm productVm)

        {

            if (ModelState.IsValid)

            {

                Product dbProduct = new Product();

                dbProduct.Name = productVm.Name;

                dbProduct.Category = productVm.Category;

                dbProduct.Price = productVm.Price;


                repository.Add(dbProduct);

                return Json(new { msg = true });

            }

            else

            {

                return PartialView("_AddProduct", new ProductVm());

            }

        }

        #endregion


        #region 修改


        /// <summary>

        /// 修改显示

        /// </summary>

        /// <returns></returns>

        public ActionResult EditProduct(int id)

        {

            var dbProduct = repository.GetById(id);

            ProductVm productVm = new ProductVm();

            productVm.Id = dbProduct.Id;

            productVm.Name = dbProduct.Name;

            productVm.Category = dbProduct.Category;

            productVm.Price = dbProduct.Price;


            return PartialView("_EditProduct", productVm);

        }


        /// <summary>

        /// 修改提交

        /// </summary>

        /// <param name="productVm"></param>

        /// <returns></returns>

        [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult EditProduct(ProductVm productVm)

        {

            if (ModelState.IsValid)

            {

                var dbProduct = repository.GetById(productVm.Id);

                dbProduct.Name = productVm.Name;

                dbProduct.Category = productVm.Category;

                dbProduct.Price = productVm.Price;


                repository.Update(dbProduct);

                return Json(new { msg = true });

            }

            else

            {

                return PartialView("_EditProduct", productVm);

            }

        }

        #endregion


        #region 删除


        /// <summary>

        /// 删除

        /// </summary>

        /// <returns></returns>

        [HttpPost]

        public ActionResult DeleteProducts()

        {

            //获取前台传来的Id字符串

            var strIds = Request["ids"];


            //去除最后一位分隔符

            strIds = strIds.Substring(0, strIds.Length - 1);


            //把字符串转换成数组

            string[] ids = strIds.Split('_');


            repository.DeleteBatch(ids);

            return Json(new { msg = true });

        }

        #endregion

    }

}

在前台页面会使用jQuery EasyUI的datagrid显示数据和分页,而datagrid在向服务端发送异步请求的时候默认带了page和rows这2个参数。GetProdutJson方法用来获取查询、分页后的json格式。在前台，当页面初次加载的时候，不带任何查询数据，服务端只要接收page和rows这2个参数，把它们封装成一个类。

namespace MvcApplication3.Models

{

    public class PageParam

    {

        public int PageSize { get; set; }

        public int PageIndex { get; set; }

    }

}

而当在前台输入搜索条件的时候，搜索条件参数以及page和rows这2个参数都传值给了服务端，为此我们再封装一个派生于PageParam的类。

namespace MvcApplication3.Models

{

    public class ProductParam : PageParam

    {

        public string Name { get; set; }

        public string Category { get; set; }

    }

}

所以，在GetProdutJson方法内，最终是把从前台接收到的分页参数或查询参数，实例化成ProductParam的一个实例，再把该实例作为实参传值给Repository的LoadProductPageData方法。

主界面Home/Index.cshtml

进入主界面Home/Index.cshtml之前，先设置_Layout.cshtml。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

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

    <link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <link href="~/Content/themes/icon.css" rel="stylesheet" />

    <link href="~/Content/themes/gray/easyui.css" rel="stylesheet" />

    @RenderSection("styles", required:false)

    @Scripts.Render("~/bundles/modernizr")

    @Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/jqueryui")

    @Scripts.Render("~/bundles/jqueryval")

    <script src="~/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

    @RenderBody()



    @RenderSection("scripts", required: false)


</body>

</html>

用到了bootstrap, jQuery EasyUI, jQuery等相关的css,js文件，该有的要有，顺序要放对。

Product/Index.cshtml需要呈现的包括：

○ 添加区域：放在一个div中,div中再放一个iframe，需要的时候通过iframe链接到添加页面
○ 修改区域：放在一个div中,div中再放一个iframe，需要的时候通过iframe链接到修改页面
○ 搜索区域：使用bootstrap显示元素
○ 列表区域：使用datagrid显示，支持分页

Product/Index.cshtml需要承担的工作包括：

○ 页面加载的时候隐藏添加和修改区域
○ 限制搜索区域有关名称和类别的长度
○ 页面加载显示全部数据列表
○ 点击搜索按钮显示符合搜素条件的数据列表
○ 点击清空按钮让搜索条件清空
○ datagrid添加：让添加区域内的iframe指向ProductController的AddProduct方法，渲染强类型添加视图
○ datagrid修改：让修改区域内的iframe指向ProductController的EditProduct方法,渲染强类型修改视图，并传递当前Product的Id
○ datagrid删除：支持批量删除，把勾选行所在的Id拼接成"1_2_"的形式传递给PrductContrlller的DeleteProduct方法，返回json
○ 提供给子视图页面调用的添加成功、添加取消、修改成功、修改取消方法，Home/Index.cshtml为父页面，添加和修改区域内的iframe指向的视图页面是子页面

@{

    ViewBag.Title = "Index";

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

}


<!--添加开始-->

<div class="addContent" id="addContent">

    <iframe id="frameAdd" src="" scrolling="yes" frameborder="0" height="100%" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>

</div>

<!--添加结束-->


<!--编辑开始-->

<div class="editContent" id="editContent">

    <iframe id="frameEdit" src="" scrolling="yes" frameborder="0" height="100%" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>

</div>

<!--编辑结束-->


<!--搜索开始-->

<div id="tb" style="padding: 3px">

    <form class="form-inline" role="form">

        <div class="form-group">

            <label class="sr-only" for="name">名称</label>

            <input type="text" class="form-control" name="name" id="name" placeholder="输入名称" maxlength="6" />

        </div>

        <div class="form-group">

            <label class="sr-only" for="category">分类</label>

            <input type="text" class="form-control" name="category" id="category" placeholder="输入分类" maxlength="6"  />

        </div>

        <input type="button" id="btnSearch" class="btn btn-primary" value="搜索" />&nbsp;

        <input type="button" id="emptySearch" class="btn btn-default" value="清空" />

    </form>

</div>

<!--搜索结束—>


<!--表格开始-->

<div class="ctable" id="ctable">

    <table id="tt"></table>

</div>

<!--表格结束-->


@section scripts

{

    <script src="~/Scripts/jquery.easyui.min.js"></script>

    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

        $(function() {

            //隐藏元素

            initialHide();


            //限制搜索条件中名称和分类的长度

            limitInputLength($('#name'));

            limitInputLength($('#category'));


            //显示列表

            initData();


            //搜索

            $('#tb').on("click", "#btnSearch", function () {

                initData(initQuery());

            });


            //清空搜索

            $('#emptySearch').on("click", function () {

                emptySearch();

            });

        });


        //显示列表

        function initData(params) {

            $('#tt').datagrid({

                url: '@Url.Action("GetProdutJson", "Product")',

                height: 360,

                width: 900,

                fitColumns: false,

                nowrap: true,

                showFooter: true,

                idField: 'ID',

                loadMsg: '正在加载信息...',

                pagination: true,

                singleSelect: false,

                queryParams: params,

                pageSize: 10,

                pageNumber: 1,

                pageList: [10, 20, 30],

                columns: [//p.Id, p.Name, p.Category, p.Price

                    [

                        { field: 'ck', checkbox: true, align: 'center', width: 30 },

                        { field: 'Id', title: '编号', align: 'center' },

                        { field: 'Name', title: '名称', align: 'center' },

                        { field: 'Price', title: '价格', align: 'center' },

                        { field: 'Category', title: '分类', align: 'center' }

                    ]

                ],

                toolbar: [

                    {

                        id: 'btnAdd',

                        text: '添加',

                        iconCls: 'icon-add',

                        handler: function () {

                            showAdd();

                        }

                    }, '-', {

                        id: 'btnUpdate',

                        text: '修改',

                        iconCls: 'icon-edit',

                        handler: function () {

                            var rows = $('#tt').datagrid("getSelections");

                            if (rows.length != 1) {

                                $.messager.alert("提示", "只能选择一行进行编辑");

                                return;

                            }

                            showEdit(rows[0].Id);

                        }

                    }, '-', {

                        id: 'btnDelete',

                        text: '删除',

                        iconCls: 'icon-remove',

                        handler: function () {

                            var rows = $('#tt').datagrid("getSelections");

                            if (rows.length < 1) {

                                $.messager.alert("提示", "请选一行删除");

                                return;

                            }

                            $.messager.confirm("提示信息", "确定要删除吗？", function (r) {

                                if (r) {

                                    var strIds = "";

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

                                        strIds += rows[i].Id + '_'; //1_2_3

                                    }

                                    $.post("@Url.Action("DeleteProducts", "Product")", { ids: strIds }, function (data) {

                                        if (data.msg) {

                                            $.messager.alert("提示", "删除成功");

                                            initData();

                                            $('#tt').datagrid("clearSelections");

                                        }

                                    });

                                }

                            });

                        }

                    }

                ],

                OnBeforeLoad: function (param) {

                    return true;

                }

            });

            }


            //添加

            function showAdd() {

                $("#frameAdd").attr("src", "@Url.Action("AddProduct", "Product")");

                $("#addContent").css("display", "block");

            }


            //修改

            function showEdit(productId) {

                var url = "/Product/EditProduct?id=" + productId;

                $("#frameEdit").attr("src", url);

                $('.addContent').css("display", "none");

                $("#editContent").css("display", "block");

            }


        //隐藏元素

        function initialHide() {

            $('.addContent').css("display", "none");

            $('.editContent').css("display", "none");

        }


        //限制文本框长度

        function limitInputLength(_input) {

            var _max = _input.attr('maxlength');

            _input.bind('keyup change', function () {

                if ($(this).val().length > _max) {

                    ($(this).val($(this).val().substring(0, _max)));

                }

            });

        }


        //子窗口添加成功后调用

        function refreshAfterAdd() {

            initData();

            $('#tt').datagrid("clearSelections");

            $("#addContent").css("display", "none");

        }


        //子窗口取消添加调用

        function cancelAdd() {

            $('.addContent').css("display", "none");

            $('#tt').datagrid("clearSelections");

        }


        //子窗口修改成功后调用

        function refreshAfterEdit() {

            initData();

            $('#tt').datagrid("clearSelections");

            $("#editContent").css("display", "none");

        }


        //子窗口取消修改调用

        function candelEdit() {

            $("#editContent").css("display", "none");

            $('#tt').datagrid("clearSelections");

        }


        //获取查询表单的值组成json

        function initQuery() {

            var queryParams = {

                name: $('#name').val(),

                category: $('#category').val()

            };

            return queryParams;

        }


        //清空搜索条件

        function emptySearch() {

            $('#name').val("");

            $('#category').val("");

        }

    </script>

}

添加强类型视图页Product/_AddProduct.cshtml

是一个针对ProductVm强类型视图。添加成功或取消都会调用父视图提供的方法。

@model MvcApplication3.Models.ProductVm


@{

    ViewBag.Title = "_AddProduct";

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

}


@section styles

{

    <style type="text/css">

        .errormsg {

            color: red;

        }


         .vcenter {

            display: table-cell;

            vertical-align: middle;

            float: none;

            border: 0px solid red;

            height: 38px;

        }


         .bk {

            background-color: #F8F8F8;

            padding: 2px;

            border-radius: 5px;

        }


         form {

             width: 900px;

             /*height: 450px;*/

         }


         .control-label {

             position: relative;

             top: 5px;

         }


         .col-sm-6 {

             height: 40px;

         }


         .col-sm-2 {

             height: 40px;

         }


         .col-sm-4 {

             height: 40px;

         }


         #wrapper {

             width: 550px;

             clear: both;

             float: left;

             margin-top: 10px;

         }

    </style>

}


<div id="wrapper">


        @using (Html.BeginForm("AddProduct", "Product", FormMethod.Post, new { id = "addForm", @class = "form-horizontal", role = "form" }))

        {

            @Html.AntiForgeryToken()


            <div class="form-group">

                 @Html.LabelFor(s => s.Name,new { @class="col-sm-2 control-label" })

                <div class="col-sm-6">

                    @Html.TextBoxFor(s => s.Name,new { @class="form-control input-sm"})&nbsp;

                </div>

                <div class="col-sm-4 vcenter">

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

                </div>

            </div>


            <div class="form-group bk">

                @Html.LabelFor(s => s.Price,new { @class="col-sm-2 control-label" })

                <div class="col-sm-6">

                    @Html.TextBoxFor(s => s.Price,new { @class="form-control input-sm"})&nbsp;

                </div>

                <div class="col-sm-4 vcenter">

                    @Html.ValidationMessageFor(s => s.Price)

                </div>

            </div>


            <div class="form-group">

                @Html.LabelFor(s => s.Category,new { @class="col-sm-2 control-label" })

                <div class="col-sm-6">

                    @Html.TextBoxFor(s => s.Category,new { @class="form-control input-sm"}) &nbsp;

                </div>

                <div class="col-sm-4 vcenter">

                    @Html.ValidationMessageFor(s => s.Category)

                </div>

            </div>


            <div class="form-group bk">

                <div style="text-align: center;" class="col-sm-6 col-sm-offset-2">

                    <input type="button" id="up" class="btn btn-primary" value="添加"/>

                    &nbsp;&nbsp;

                    <input type="button" id="cancel" class="btn btn-default" value="取消"/>

                </div>

            </div>

        }

</div>


@section scripts

{

    <script type="text/javascript">

        $(function() {

            //提交

            $('#up').on('click', function () {

                if ($('#addForm').valid()) {

                    $.ajax({

                        cache: false,

                        url: '@Url.Action("AddProduct","Product")',

                        type: 'POST',

                        dataType: 'json',

                        data: $('#addForm').serialize(),

                        success: function (data) {

                            if (data.msg) {

                                $('input[type=text]').val("");

                                self.parent.refreshAfterAdd();


                            }

                        },

                        error: function (xhr, status) {

                            alert("添加失败，状态码：" + status);

                        }

                    });

                }

            });


            //点击取消按钮关闭窗口

            $('#cancel').on('click', function () {

                $('input[type=text]').val("");

                self.parent.cancelAdd();

            });

        });

    </script>

}

如果添加验证失败，客户端适时报错：

添加验证成功，添加区域隐藏，列表多了新添加的数据：

修改强类型视图页Product/_EditProduct.cshtml

是一个针对ProductVm强类型视图。修改成功或取消都会调用父视图提供的方法。

@model MvcApplication3.Models.ProductVm


@{

    ViewBag.Title = "_EditProduct";

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

}



@section styles

{

    <style type="text/css">

        .errormsg {

            color: red;

        }


         .vcenter {

            display: table-cell;

            vertical-align: middle;

            float: none;

            border: 0px solid red;

            height: 38px;

        }


         .bk {

            background-color: #F8F8F8;

            padding: 2px;

            border-radius: 5px;

        }


         form {

             width: 900px;

             /*height: 450px;*/

         }


         .control-label {

             position: relative;

             top: 5px;

         }


         .col-sm-6 {

             height: 40px;

         }



         .col-sm-2 {

             height: 40px;

         }


         .col-sm-4 {

             height: 40px;

         }


         #wrapper {

             width: 550px;

             clear: both;

             float: left;

             margin-top: 10px;

         }

    </style>

}


<div id="wrapper">


    @using (Html.BeginForm("EditProduct", "Product", FormMethod.Post, new { id = "editForm", @class = "form-horizontal", role = "form" }))

    {

        @Html.AntiForgeryToken()

        @Html.HiddenFor(s => s.Id)

        <div class="form-group">

            @Html.LabelFor(s => s.Name,new { @class="col-sm-2 control-label" })

            <div class="col-sm-6">

                @Html.TextBoxFor(s => s.Name,new { @class="form-control input-sm"})&nbsp;

            </div>

            <div class="col-sm-4 vcenter">

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

            </div>

        </div>


        <div class="form-group bk">

            @Html.LabelFor(s => s.Price,new { @class="col-sm-2 control-label" })

            <div class="col-sm-6">

                @Html.TextBoxFor(s => s.Price,new { @class="form-control input-sm"})&nbsp;

            </div>

            <div class="col-sm-4 vcenter">

                @Html.ValidationMessageFor(s => s.Price)

            </div>

        </div>


        <div class="form-group">

            @Html.LabelFor(s => s.Category,new { @class="col-sm-2 control-label" })

            <div class="col-sm-6">

                @Html.TextBoxFor(s => s.Category,new { @class="form-control input-sm"}) &nbsp;

            </div>

            <div class="col-sm-4 vcenter">

                @Html.ValidationMessageFor(s => s.Category)

            </div>

        </div>



        <div class="form-group bk">

            <div style="text-align: center;" class="col-sm-6 col-sm-offset-2">

                <input type="button" id="up" class="btn btn-primary" value="修改"/>

                &nbsp;&nbsp;

                <input type="button" id="cancel" class="btn btn-default" value="取消"/>

            </div>

        </div>

    }


</div>


@section scripts

{

    <script type="text/javascript">

        $(function() {

            //提交

            $('#up').on('click', function () {

                if ($('#editForm').valid()) {

                    $.ajax({

                        cache: false,

                        url: '@Url.Action("EditProduct","Product")',

                        type: 'POST',

                        dataType: 'json',

                        data: $('#editForm').serialize(),

                        success: function (data) {

                            if (data.msg) {

                                self.parent.refreshAfterEdit();

                            }

                        },

                        error: function (xhr, status) {

                            alert("修改失败，状态码：" + status);

                        }

                    });

                }

            });


            //点击取消按钮关闭窗口

            $('#cancel').on('click', function () {

                self.parent.candelEdit();

            });

        });

    </script>

}

如果修改验证失败，客户端适时报错：

修改验证成功，修改区域隐藏，取消勾选，列表中是修改的数据：