ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）

ASP.NET MVC搭建项目后台UI框架—1、后台主框架
ASP.NET MVC搭建项目后台UI框架—2、菜单特效
ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

接着之前未写完的继续，本篇，我将讲解在此UI框架中和ASP.NET MVC4进行结合开发。效果如下：

这里，我将添加和修改用了两个不同的视图，当然也可以把添加和修改放到同一个视图中，但是要写一些业务逻辑代码来区分当前调用的是修改还是添加，根据添加和修改的不同，而对界面进行不同的操作。

添加控制器Customer，关于更新操作，我就不得不想吐槽一下NHibernate，他妹的，每次都要先load一次，然后再Update()一次，如果你直接save，它就把你表中有，但是界面上没有传过来的值全部更新为null了，相比之下EF就好多了。

 public class CustomerController : Controller{private string message = "<script>frameElement.api.opener.hidePublishWin('{0}', '{1}','{2}'); </script>"; //消息，是否关闭弹出窗，是否停留在当前分页（0，1）#region 客户管理主页public ActionResult Index(){return View();}/// <summary>/// 客户列表/// </summary>/// <param name="filter"></param>/// <returns></returns>
        [HttpPost]public JsonResult List(CustomerFilter filter){filter.PageSize = int.MaxValue;var dataSource = CustomerInfo.GetByFilter(filter);List<CustomerInfo> queryData = dataSource.ToList();var data = queryData.Select(u => new{ID = u.ID,CusCode = u.CusCode,CusName = u.CusName,BusssinessType = u.BusssinessType.GetDescription(false),Balance = u.Balance,CreditAmount = u.CreditAmount,Status = u.Status.GetDescription(false),Country = u.Country,CompanyName = u.CompanyName,Delivery = GetDeliveryList(u.ExpressCurInfoBy)});//构造成Json的格式传递var result = new { iTotalRecords = queryData.Count, iTotalDisplayRecords = 10, data = data };return Json(result, JsonRequestBehavior.AllowGet);}#region 添加客户/// <summary>/// 添加客户/// </summary>/// <param name="id"></param>/// <returns></returns>public ActionResult AddCustomer(){ViewBag.Title = "添加客户";return View();}/// <summary>/// 添加客户/// </summary>/// <param name="info"></param>/// <returns></returns>
        [HttpPost]public ActionResult AddCustomer(CustomerInfo info){string msg = string.Empty;if (ModelState.IsValid){try{info.Save();msg = "添加客户成功。";}catch (Exception ex){msg = "添加客户失败！" + ex.Message;ViewBag.Msg = string.Format(message, msg, false,"0");}ViewBag.Msg = string.Format(message, msg, true,"0");}return View();}#endregion#region 修改客户/// <summary>/// 修改客户/// </summary>/// <param name="id"></param>/// <returns></returns>public ActionResult UpdateCustomer(int id){ViewBag.Title = "修改客户";var result = CustomerInfo.Load(id);return View(result);}/// <summary>/// 修改客户/// </summary>/// <param name="info"></param>/// <returns></returns>
        [HttpPost]public ActionResult UpdateCustomer(CustomerInfo info){string msg = string.Empty;if (ModelState.IsValid){try{info.Update();msg = "修改客户成功。";}catch (Exception ex){msg = "修改客户失败！" + ex.Message;ViewBag.Msg = string.Format(message, msg, false,"1");}ViewBag.Msg = string.Format(message, msg, true,"1");}return View();}#endregion}

View Code

添加视图Index

@{ViewBag.Title = "客户信息";
}
<link href="~/libs/DataTables-1.10.6/media/css/jquery.dataTablesNew.css" rel="stylesheet" />
<script src="~/libs/DataTables-1.10.6/media/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTablesExt.js"></script>
<script type="text/javascript">//弹出框  var addDG, updateDG, matchDG;var w = 424, h = 520; //宽，高//添加记录function showPublishWin() {addDG = new $.dialog({id: "AddChannel",title: "添加客户",content: "url:/Customer/AddCustomer",width: w,height: h,max: false,min: false,lock: true,close: true,btnBar: false});addDG.show();}//修改记录function modifyRecord(id) {updateDG = new $.dialog({id: "UpdateCustomer",title: "修改客户",content: "url:/Customer/UpdateCustomer/" + id,width: w,height: h,max: false,min: false,lock: true,close: true,btnBar: false});updateDG.show();}//隐藏弹出框function hidePublishWin(msg, result, isStay) {var icon = "success.gif";if (result == "False") {icon = "error.gif";}$.dialog({title: "提示",icon: icon,titleIcon: 'lhgcore.gif',content: msg,lock: true,ok: true});if (result != "False") {if (addDG) {addDG.close();}if (updateDG) {updateDG.close();}if (matchDG) {matchDG.close();}if (isStay == 0) {reloadList();}else {reloadListNew();}}}function matchDelivery(id) {matchDG = new $.dialog({id: "UpdateCustomer",title: "客户匹配",content: "url:/Customer/DeliveryMatching/" + id,width: 800,height: h,max: false,min: false,lock: true,close: true,btnBar: false});matchDG.show();}//刷新，但是停留在当前分页function reloadListNew() {var tables = $('#table_local').dataTable().api();//获取DataTables的Api，详见 http://www.datatables.net/reference/api/
        tables.ajax.reload(null,false);}
</script>
<script type="text/javascript">$(function () {var h = $(document).height() - 258;var table = $("#table_local").dataTable({bProcessing: true,"scrollY": h,"scrollCollapse": "true","dom": 'ftr<"bottom"lip><"clear">',"bServerSide": false,                    //指定从服务器端获取数据
            sServerMethod: "POST",sAjaxSource: "@Url.Action("List", "Customer")","fnServerParams": function (aoData) {  //查询条件
                aoData.push({ "name": "CusCode", "value": $("#CusCode").val() },{ "name": "CusName", "value": $("#CusName").val() });},columns: [{ title: "1", "visible": false, "data": "ID" },{ "data": "CusCode", title: "客户代码" },{ "data": "CusName", title: "客户名称" },{ "data": "BusssinessType", title: "业务类型", width: "100" },{ "data": "Country", title: "国家", width: "200" },{ "data": "CompanyName", title: "公司名称", width: "200" },{ "data": "Delivery", title: "收货商", width: "150" },{ "data": "Balance", title: "账户余额", width: "150" },{ "data": "CreditAmount", title: "信用额度", width: "150" },{ "data": "Status", title: "是否启用", width: "100" },{"data": "ID", orderable: false, title: "操作", width: "140", "render": function (data, type, row, meta) { //自定义列var re = "<div style='text-align:center'><a style='visibility:visible' οnclick='modifyRecord(" + data + ")'>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";re = re + "<a style='visibility:visible' οnclick='matchDelivery(" + data + ")'>匹配</a></div>";return re;}}],paging: true,//分页
            ordering: true,//是否启用排序
            searching: true,//搜索
            language: {"sProcessing": "处理中...",lengthMenu: '每页显示：<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="15">15</option>'+ '<option value="20">20</option>' + '<option value="25">25</option>' + '<option value="30">30</option>' + '<option value="35">35</option>' + '<option value="40">40</option>',//左上角的分页大小显示。
                search: '<span class="label label-success">搜索：</span>',//右上角的搜索文本，可以写html标签
paginate: {//分页的样式内容。
                    previous: "上一页",next: "下一页",first: "",last: ""},zeroRecords: "暂无记录",//table tbody内容为空时，tbody的内容。//下面三者构成了总体的左下角的内容。
                info: "总共 <span class='pagesStyle'>(_PAGES_) </span>页，显示 _START_ -- _END_ ，共<span class='recordsStyle'> (_TOTAL_)</span> 条",//左下角的信息显示，大写的词为关键字。初始_MAX_ 条
                infoEmpty: "0条记录",//筛选为空时左下角的显示。
                infoFiltered: ""//筛选之后的左下角筛选提示，
            },pagingType: "full_numbers"//分页样式的类型
});//设置选中行样式
        $('#table_local tbody').on('click', 'tr', function () {if ($(this).hasClass('selected')) {$(this).removeClass('selected');}else {table.$('tr.selected').removeClass('selected');$(this).addClass('selected');}});});//查询 刷新function reloadList() {var tables = $('#table_local').dataTable().api();//获取DataTables的Api，详见 http://www.datatables.net/reference/api/
        tables.ajax.reload();}
</script>
<div class="areabx clear">@using (Html.BeginForm("List", null, FormMethod.Get, new { @clase = "form-inline", @role = "form" })){<div class="areabx_header">客户信息</div><ul class="formod mgt10"><li><span>客户代码：</span>@Html.TextBox("CusCode", "", new { @class = "trade-time wid153" })</li><li><span>客户名称：</span>@Html.TextBox("CusName", "", new { @class = "trade-time" })</li><li></li></ul><div class="botbtbx pdb0" style="margin-bottom: -30px;"><input type="button" value="添加客户" class="btn btn-primary" onclick="showPublishWin()" /><input type="button" value="查询" onclick="reloadList();" class="btn btn-primary"></div>}<div class="tob_box mgt15"><table id="table_local" class="display" cellspacing="0" cellpadding="0" border="0" style="width: 100%"></table></div>
</div>

View Code

添加AddCustomer视图，之前公司ASP.NET MVC的项目没有启用模型验证，界面验证代码都是自己js写的，我晕，那用ASP.NET MVC干嘛呢？使用框架就是要充分发挥框架优良的功能，尽可能高效快速的开发，并减少开发人员的代码量。

@model Core.Customer.CustomerInfo
@using ProjectBase.Utils
@Html.Raw(ViewBag.Msg)
<div class="areabx clear">
@*    <div class="areabx_header">@ViewBag.Title</div>*@<div class="tian_xi">@using (Html.BeginForm("AddCustomer", "Customer", FormMethod.Post, new { @clase = "form-inline", @role = "form", name = "from1" })){<table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr style="height: 40px;"><td style="width: 120px; text-align: right;">客户代码：</td><td>@Html.TextBoxFor(x => x.CusCode, new { @class = "trade-timen", @id = "cusCode" })<span class="wtps">* @Html.ValidationMessageFor(m => m.CusCode)</span></td></tr><tr style="height: 40px;"><td align="right">客户名称：</td><td>@Html.TextBoxFor(x => x.CusName, new { @class = "trade-timen", @id = "cusName" })<span class="wtps">* @Html.ValidationMessageFor(m => m.CusName)</span></td></tr><tr style="height: 40px;"><td align="right">手机：</td><td>@Html.TextBoxFor(x => x.Phone, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">电话：</td><td>@Html.TextBoxFor(x => x.Tel, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">邮箱：</td><td>@Html.TextBoxFor(x => x.Email, new { @class = "trade-timen", @id = "email" })<span class="wtps">@Html.ValidationMessageFor(m => m.Email)</span></td></tr><tr style="height: 40px;"><td align="right">传真：</td><td>@Html.TextBoxFor(x => x.Fax, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">国家：</td><td>@Html.TextBoxFor(x => x.Country, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">地址：</td><td>@Html.TextBoxFor(x => x.Address, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">公司名称：</td><td>@Html.TextBoxFor(x => x.CompanyName, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">业务类型：</td><td>@Html.DropDownListFor(x => x.BusssinessType, @Html.EnumToList(typeof(Core.Customer.Busssiness), false), new { @class = "trade-timen", style = "width:180px" })</tr><tr style="height: 40px;"><td align="right">是否启用：</td><td>是 @Html.RadioButtonFor(x => x.Status, "0", new { Checked = "checked", @name = "status" }) &nbsp;&nbsp;&nbsp;&nbsp;<span class="radioMagin">否 @Html.RadioButtonFor(x => x.Status, "1", new { @name = "status" })</span></td></tr></tbody></table><input type="submit" value="确定" class="popbtn1 mg"><input type="button" value="关闭" class="popbtn3 mg2" onclick="frameElement.api.opener.addDG.close();" />}</div>
</div>

View Code

添加UpdateCustomer视图

@model Core.Customer.CustomerInfo
@using ProjectBase.Utils
@Html.Raw(ViewBag.Msg)
<div class="areabx clear">
@*    <div class="areabx_header">@ViewBag.Title</div>*@<div class="tian_xi">@using (Html.BeginForm("UpdateCustomer", "Customer", FormMethod.Post, new { @clase = "form-inline", @role = "form", name = "from1" })){<table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr style="height: 40px;"><td style="width: 120px; text-align: right;">客户代码：</td><td>@Html.TextBoxFor(x => x.CusCode, new { @class = "trade-timen", @id = "cusCode", @readOnly = "readOnly" })<span class="wtps">* @Html.ValidationMessageFor(m => m.CusCode)</span></td>@Html.HiddenFor(x => x.ID)</tr><tr style="height: 40px;"><td align="right">客户名称：</td><td>@Html.TextBoxFor(x => x.CusName, new { @class = "trade-timen", @id = "cusName" })<span class="wtps">* @Html.ValidationMessageFor(m => m.CusName)</span></td></tr><tr style="height: 40px;"><td align="right">手机：</td><td>@Html.TextBoxFor(x => x.Phone, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">电话：</td><td>@Html.TextBoxFor(x => x.Tel, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">邮箱：</td><td>@Html.TextBoxFor(x => x.Email, new { @class = "trade-timen", @id = "email" }) <span class="wtps">@Html.ValidationMessageFor(m => m.Email)</span></td></tr><tr style="height: 40px;"><td align="right">传真：</td><td>@Html.TextBoxFor(x => x.Fax, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">国家：</td><td>@Html.TextBoxFor(x => x.Country, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">地址：</td><td>@Html.TextBoxFor(x => x.Address, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">公司名称：</td><td>@Html.TextBoxFor(x => x.CompanyName, new { @class = "trade-timen" })</td></tr><tr style="height: 40px;"><td align="right">业务类型：</td><td>@Html.DropDownListFor(x => x.BusssinessType, @Html.EnumToList(typeof(Core.Customer.Busssiness), false), new { @class = "trade-timen", style = "width:180px" })</tr><tr style="height: 40px;"><td align="right">是否启用：</td><td>是 @Html.RadioButtonFor(x => x.Status, "0", new { Checked = "checked", @name = "status" }) &nbsp;&nbsp;&nbsp;&nbsp;<span class="radioMagin">否 @Html.RadioButtonFor(x => x.Status, "1", new { @name = "status" })</span></td></tr></tbody></table><input type="submit" value="确定" class="popbtn1 mg"><input type="button" value="关闭" class="popbtn3 mg2" onclick="frameElement.api.opener.updateDG.close();" />}</div>
</div>

View Code

客户实体CustomerInfo

    /// <summary>/// 客户信息/// </summary>public class CustomerInfo //: DomainObject<CustomerInfo, int, ICustomerInfoRepository>
    {#region property/// <summary>/// 客户代码/// </summary>[Required(ErrorMessage = "客户代码不能为空！")][StringLength(30, MinimumLength = 0, ErrorMessage = "客户代码最大长度为30个字符")]public virtual string CusCode { get; set; }/// <summary>/// 客户名称/// </summary>[Required(ErrorMessage = "客户名称不能为空！")][StringLength(30, MinimumLength = 0, ErrorMessage = "客户名称最大长度为30个字符")]public virtual string CusName { get; set; }/// <summary>/// 客户业务类型/// </summary>public virtual Busssiness BusssinessType { get; set; }/// <summary>/// 手机/// </summary>public virtual string Phone { get; set; }/// <summary>/// 电话/// </summary>public virtual string Tel { get; set; }/// <summary>/// 邮箱/// </summary>[RegularExpression(@"^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$", ErrorMessage="邮箱格式不正确！")]public virtual string Email { get; set; }/// <summary>/// 传真/// </summary>public virtual string Fax { get; set; }/// <summary>/// 国家/// </summary>public virtual string Country { get; set; }/// <summary>/// 地址/// </summary>public virtual string Address { get; set; }/// <summary>/// 公司名称/// </summary>public virtual string CompanyName { get; set; }/// <summary>/// 金额/// </summary>public virtual decimal Balance { get; set; }/// <summary>/// 信用额度/// </summary>public virtual decimal CreditAmount { get; set; }/// <summary>/// 状态/// </summary>public virtual CustomerStatus Status { get; set; }/// <summary>/// 快件收货商信息/// </summary>public virtual IList<ExpressCurInfo> ExpressCurInfoBy { get; set; }#endregion#region common method/// <summary>/// 分页获取数据/// </summary>/// <param name="filter"></param>/// <returns></returns>public static IPageOfList<CustomerInfo> GetByFilter(CustomerFilter filter){return Dao.GetByFilter(filter);}#endregion}

View Code

查询类CustomerFilter

    public class CustomerFilter : ParameterFilter{/// <summary>/// 客户代码/// </summary>public virtual string CusCode { get; set; }/// <summary>/// 客户名称/// </summary>public virtual string CusName { get; set; }/// <summary>/// 生产NHQL查询语句/// </summary>/// <returns></returns>public override string ToHql(){string hql = "";if (!string.IsNullOrEmpty(CusCode)){hql += " and Cus_Code =:CusCode ";}if (!string.IsNullOrEmpty(CusName)){hql += " and Cus_Name =:CusName ";}return hql;}/// <summary>/// 构造查询参数/// </summary>/// <returns></returns>public override Dictionary<string, object> GetParameters(){var result = new Dictionary<string, object>();if (!string.IsNullOrEmpty(CusCode)){result["CusCode"] = CusCode.Trim();}if (!string.IsNullOrEmpty(CusName)){result["CusName"] = CusName.Trim();}return result;}}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using ProjectBase.Utils.Entities;namespace ProjectBase.Data
{public abstract class ParameterFilter{public ParameterFilter(){HasQueryString = false;PageSize = 10;}public string OrderBy { get;set; }public abstract string ToHql();public override string ToString(){return ToHql();}public abstract Dictionary<string, object> GetParameters();public string GetOrderString(){if (OrderBy.HasValue())return " Order By " + OrderBy;return String.Empty;}protected string GetLike(string value){return "%" + value + "%";}public int PageIndex { get; set; }public int PageSize { get; set; }/// <summary>/// 标识此构造器是包含全部查询语句。/// 若为 False,则ToHql() 只需要构造条件查询，系统会自动在前面加上<code>" from " + typeof(T).Name + " a where 1=1 "</code>/// 若为 True, ToHql() 需要返回 连form在类的完整Hql语句/// </summary>public bool HasQueryString { get; set; }protected static bool HasValue(string str){return str.HasValue();}public static bool HasValue<T>(System.Nullable<T> value) where T:struct{return value.HasValue;}       }
}

View Code

在这里，我只演示了控制器和视图的交互，至于Hhibernate和Unity等数据的操作，这里暂时不讲，因为你也可以使用其它的ORM框架和IOC框架，诸如EF、AutoFac等等。这里主要讲解jquery datatables和ASP.NET MVC的结合使用，但是这里只演示了客户端分页排序，后面我会讲服务器分页排序。我发现，网上都没有ASP.NET MVC和Datatables结合的完整的服务器分页、排序的Demo，只看到PHP的。于是我不断的尝试，皇天不负有心人，终于试验成功了，后面我会为大家讲述实现方式。

转载于:https://www.cnblogs.com/jiekzou/p/4555452.html

ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）相关推荐

Yii2.0 后台UI框架以及权限管理扩展实现权限菜单管理
Yii2.0 后台UI框架以及权限管理扩展实现权限菜单管理一.安装后台框架ui 二.安装权限管理扩展三.实现权限菜单管理一.安装后台框架ui composer require dmstr/yii ...
Asp.net MVC 搭建属于自己的框架（一）
为什么要自己搭框架? 大家伙别急,让我慢慢地告诉你!大家有没有这种感觉,从一家跳槽到另一家公司,公司的框架往往是不相同的,这样你必须就得摒弃原来的,学习新的框架. 问题是你用习惯了一种框架,比如封装的 ...
国内主流在用的10大后台UI框架，私活必备
目录 vue-Element-Admin AdminLTE ant-design-pro tabler ng2-admin Gentelella iview-admin blur-admin vue- ...
使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...
angular2+typescript在asp.net MVC Web项目上的实现
网上现在还没有关于angular2+typescript在asp.net mvc web项目上的实现的系统介绍,这里我也只是探索到了一个简单的方式,还有很多问题没能解决.但是能有个好的开头也值得记录一 ...
BG-UI,一个可以快速上手的后台UI框架
BG-UI,一个可以快速上手的后台UI框架 1.简述此项目为后台UI框架,并根据url中的hash提供简单的路由功能,页面的数据渲染依然交给服务器端. UI基于BootStrap3.兼容移动端.兼容 ...
开箱即用的后台UI框架eui（原eadmin）
(很多人问有没有开箱即用,不需要复杂打包环境配置的功能强大.界面精美的后台UI框架,现在他来了) eui 基于原生JS开发,开箱即用,无需打包环境,专门为不太熟悉mvvm开发模式的人员定制打造.此次是 ...
Artiely Vue Admin - 基于蚂蚁金服Ant Design构建的高颜值开源管理后台UI框架
继承 Ant Design 专业美观的优点,支持PC/手机/平板的响应式布局的优秀后台管理系统 UI 框架. 关于 Artiely Vue Admin Ant Design 是阿里巴巴蚂蚁金服团队出品 ...
vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
开源推荐 - EAdmin开箱即用的后台UI框架
很多朋友在问,有没有一款不需要打包环境,不需要学习成本,开箱即用的后台UI框架,今天他来了. EAdmin正式更新至2.0版本,全新的配色,更加丰富的组件,满足中小型项目的后台需求,是一套完整的后台U ...

ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）

ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）相关推荐

最新文章

热门文章