在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 显示查询

        /// 

        /// 显示主界面

        /// 

        /// 

        public ActionResult Index()

        {

            return View();

        }

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

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

        /// 

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

        /// 

        /// 

        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 添加

        /// 

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

        /// 

        /// 

        public ActionResult AddProduct()

        {

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

        }

        /// 

        /// 添加提交

        /// 

        /// 

        [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 修改

        /// 

        /// 修改显示

        /// 

        /// 

        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);

        }

        /// 

        /// 修改提交

        /// 

        /// 

        /// 

        [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 删除

        /// 

        /// 删除

        /// 

        /// 

        [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。

    utf-8" />

    viewport" content="width=device-width" />

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

    ~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

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

    ~/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") 

    @RenderBody()

    @RenderSection("scripts", required: false)

用到了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";

}

class="addContent" id="addContent">

class="editContent" id="editContent">

tb" style="padding: 3px">

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

        
class="form-group">

            class="sr-only" for="name">名称

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

        
class="form-group">

            class="sr-only" for="category">分类

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

        button" id="btnSearch" class="btn btn-primary" value="搜索" /> 

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

class="ctable" id="ctable">

    tt">