目錄
- 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 }
添加視圖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' onclick='modifyRecord(" + data + ")'>修改</a> "; re = re + "<a style='visibility:visible' onclick='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>
添加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" }) <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>
添加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" }) <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>
客戶實體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 }
查詢類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; } } }
在這里，我只演示了控制器和視圖的交互，至於Hhibernate和Unity等數據的操作，這里暫時不講，因為你也可以使用其它的ORM框架和IOC框架，諸如EF、AutoFac等等。這里主要講解jquery datatables和ASP.NET MVC的結合使用，但是這里只演示了客戶端分頁排序，后面我會講服務器分頁排序。我發現，網上都沒有ASP.NET MVC和Datatables結合的完整的服務器分頁、排序的Demo，只看到PHP的。於是我不斷的嘗試，皇天不負有心人，終於試驗成功了，后面我會為大家講述實現方式。