在前面的幾篇文章中，已經在控制臺和界面實現了屬性值的笛卡爾乘積，這是商品模塊中的一個難點。本篇就來實現在ASP.NET MVC4下商品模塊的一個小樣。與本篇相關的文章包括：

1、ASP.NET MVC中實現屬性和屬性值的組合,即笛卡爾乘積01, 在控制臺實現?
2、ASP.NET MVC中實現屬性和屬性值的組合,即笛卡爾乘積02, 在界面實現??
3、再議ASP.NET MVC中CheckBoxList的驗證??
4、ASP.NET MVC在服務端把異步上傳的圖片裁剪成不同尺寸分別保存,并設置上傳目錄的尺寸限制??
5、ASP.NET MVC異步驗證是如何工作的01,jQuery的驗證方式、錯誤信息提示、validate方法的背后??
6、ASP.NET MVC異步驗證是如何工作的02,異步驗證表單元素的創建??
7、ASP.NET MVC異步驗證是如何工作的03,jquery.validate.unobtrusive.js是如何工作的?
8、MVC批量更新,可驗證并解決集合元素不連續控制器接收不完全的問題?
9、MVC擴展生成CheckBoxList并水平排列??

?

本篇主要包括：

□ 商品模塊小樣簡介
□ 領域模型和視圖模型
□ 控制器和視圖實現

?

商品模塊小樣簡介

?

※ 界面

○ 類別區域，用來顯示產品類別，點擊選擇某個類別，在"產品屬性"區域出現該類別下的所有屬性，以及屬性值，對于單選的屬性值用Select顯示，對于多選的屬性值用CheckBoxList顯示。
○ 產品描述，表示數據庫中產品表中的字段，當然實際情況中，這里的字段更多，比如上傳時間，是否通過，產品賣點，等等。
○ 產品屬性，只有點擊選擇產品類別，這里才會顯示
○ 定價按鈕，點擊這個按鈕，如果"產品屬性"區域中有CheckBoxList項，"產品SKU與定價"區域會出現關于屬性值、產品價格的SKU組合項；如果"產品屬性"區域中沒有CheckBoxList項，"產品SKU與定價"區域只出現一個有關價格的input元素。另外，每次點擊定價按鈕，出現提交按鈕，定價按鈕隱藏。
○ 產品SKU與定價：這里要么呈現屬性值、價格的SKU項，要么只出現一個有關價格的input元素

?

※ 點擊類別項，在"產品屬性"區域包括CheckBoxList

○ 點擊類名中的"家電"選項，在"產品屬性"區域中出現屬性及其值，有些屬性值以Select呈現，有些屬性值以CheckBoxList呈現
○ 點擊屬性行后面的"刪除行"直接刪除屬性行

?

※ 點擊類別項，在"產品屬性"區域包括CheckBoxList，點擊"定價"按鈕

點擊"定價"按鈕，如果每組的CheckBoxList中沒有一項被選中，會在屬性行后面出現錯誤提示。在"產品SKU與定價"區域不會出現內容。

?

※ 點擊類別項，在"產品屬性"區域包括CheckBoxList，點擊"定價"按鈕，再點擊CheckBoxList選項，某些錯誤提示消失

點擊CheckBoxList中的某項，該屬性行后面的錯誤提示消失。在"產品SKU與定價"區域還是不會出現內容。

?

※ 點擊類別項，在"產品屬性"區域包括CheckBoxList，如果所有的CheckBoxList至少有一項被選中，點擊"定價"按鈕

?

○ 會把所有的選中屬性值進行笛卡爾乘積顯示到"產品SKU與定價"區域
○ 出現"提交"按鈕
○ 如果有關價格的input驗證不通過會出現異步驗證錯誤信息
○ 與有關價格的input一起渲染的還有一個隱藏域，用來存放該SKU項的屬性值Id，以便和價格一起被保存到數據庫

?

?

※ 點擊類別項，在"產品屬性"區域不包括CheckBoxList

當選擇類別中的"家具"項，在"產品屬性"區域中的屬性值只是以Select來呈現。

?

※ 點擊類別項，在"產品屬性"區域不包括CheckBoxList，點擊"定價"按鈕

如果"產品屬性"區域中只有Select元素，點擊"定價"按鈕，在"產品SKU與定價"區域只出現有關價格的input，并且帶異步驗證，同時還出現提交按鈕。

?

※ 在控制器提交產品的方法中打斷點，點擊"提交"按鈕

在界面提交的包括:

?

在控制器方法中收到了所有的提交：

?

?

領域模型和視圖模型

?

有關產品類別的領域模型：

public class Category { public int Id { get; set; } public string Name { get; set; } }

?

有關屬性的領域模型：

public class Prop { public int Id { get; set; } public string Name { get; set; } public int CategoryId { get; set; } public short InputType { get; set; } public Category Category { get; set; } }

?

以上，InputType屬性對應InputTypeEnum的枚舉項，會依據此屬性加載不同的視圖(Select或CheckBoxList)。

?

public enum InputTypeEnum { //下拉選框 PropDropDownList = 0, //復選框 PropCheckBoxList = 1 }

?

有關屬性值的領域模型：

public class PropOption { public int Id { get; set; } public string RealValue { get; set; } public int PropId { get; set; } public Prop Prop { get; set; } }

?

在產品提交頁，和產品有關包括：產品類別、產品本身的描述、屬性及屬性值(屬性值有些以Select顯示，有些以CheckBoxList顯示)、屬性值和價格的SKU組合項。提煉出有關產品的一個視圖模型：

public class ProductVm { public ProductVm() { this.PropOptionDs = new List<PropOptionVmD>(); this.ProductSKUs = new List<ProductSKUVm>(); this.PropOptionCs = new List<PropOptionVmC>(); } public int Id { get; set; } [Required(ErrorMessage = "必填")] public int CategoryId { get; set; } [Required(ErrorMessage = "必填")] [Display(Name = "產品編號")] [MaxLength(10, ErrorMessage = "最大長度10")] public string Code { get; set; } [Required(ErrorMessage = "必填")] [Display(Name = "產品名稱")] [MaxLength(10, ErrorMessage = "最大長度10")] public string Name { get; set; } public List<PropOptionVmD> PropOptionDs { get; set; } public List<PropOptionVmC> PropOptionCs { get; set; } public List<ProductSKUVm> ProductSKUs { get; set; } }

以上，
○ PropOptionDs表示以Select顯示屬性值的、有關屬性和屬性值的集合
○ PropOptionCs表示以CheckBoxList顯示屬性值的、有關屬性和屬性值的集合
○ ProductSKUs 表示SKU項的集合

?

PropOptionVmD視圖模型用來顯示每一個屬性名，該屬性下的屬性值是以Select呈現：

public class PropOptionVmD { public int Id { get; set; } public int PropId { get; set; } public string PropName { get; set; } [Required(ErrorMessage = "必填")] public int PropOptionId { get; set; } }

以上，
○ PropId用來表示屬性Id,在界面中是以隱藏域存在的，會被傳給服務端
○ PropName 表示屬性名，在界面中顯示屬性的名稱
○ PropOptionId 表示界面中被選中的屬性值Id

?

PropOptionVmC視圖模型也用來顯示每一個屬性名，該屬性下的屬性值以CheckBoxList呈現：

public class PropOptionVmC { public int Id { get; set; } public int PropId { get; set; } public string PropName { get; set; } public string PropOptionIds { get; set; } }

?

ProductSKUVm視圖模型用來顯示SKU項中的價格部分：

public class ProductSKUVm { [Display(Name = "價格")] [Required(ErrorMessage = "必填")] [Range(typeof(Decimal), "0", "9999", ErrorMessage = "{0} 必須是數字介于 {1} 和 {2}之間.")] public decimal Price { get; set; } public string OptionIds { get; set; } }

以上，
○ Price用來顯示SKU項中的價格
○ OptionIds用來存放SKU項中的所有屬性值編號，以逗號隔開，在界面中以隱藏域存在

?

控制器和視圖實現

?

□ HomeController

?

當呈現Home/Index.cshtml視圖的時候，HomeController應該提供一個方法，把所有的類別放在SelectListItem集合中傳給前臺，并返回一個有關產品視圖模型強類型視圖。

?

當在界面上點擊類別選項，HomeController應該有一個方法接收類別的Id，把該類別下所有的屬性Id以Json格式返回給前臺。

?

當在界面上接收到一個屬性Id集合，需要遍歷屬性Id集合,把每個屬性Id傳給控制器，HomeController應該有一個方法接收屬性Id,在方法內部根據InputType來決定顯示帶Select的視圖，還是帶CheckBoxList的視圖。

?

當點擊界面上的"定價"按鈕，可能需要對屬性值進行笛卡爾乘積，可能不需要，因此，HomeController應該提供2個方法，一個方法用來渲染出需要笛卡爾乘積的視圖，另一個方法用來渲染不需要笛卡爾乘積的視圖。

?

當點擊界面上的"提交"按鈕，HomeController應該提供一個提交產品的方法，該方法接收的參數是有關產品的視圖模型。

?

public class HomeController : Controller { public ActionResult Index() { //把類別封裝成SelectListItem集合傳遞到前臺 var categories = Database.GetCategories(); var result = from c in categories select new SelectListItem() {Text = c.Name, Value = c.Id.ToString()}; ViewData["categories"] = result; return View(new ProductVm()); } //添加產品 [HttpPost] public ActionResult AddProduct(ProductVm productVm) { if (ModelState.IsValid) { //TODO:各種保存 return Json(new { msg = true }); } else { //把類別封裝成SelectListItem集合傳遞到前臺 var categories = Database.GetCategories(); var result = from c in categories select new SelectListItem() { Text = c.Name, Value = c.Id.ToString() }; ViewData["categories"] = result; return RedirectToAction("Index", productVm); } } //根據分類返回分類下的所有屬性Id [HttpPost] public ActionResult GetPropIdsByCategoryId(int categoryId) { var props = Database.GetPropsByCategoryId(categoryId); List<int> propIds = props.Select(p => p.Id).ToList(); return Json(propIds); } //顯示屬性和屬性項的部分視圖 public ActionResult AddPropOption(int propId) { var prop = Database.GetProps().Where(p => p.Id == propId).FirstOrDefault(); var propOptions = Database.GetPropOptionsByPropId(propId); if (prop.InputType == (short) InputTypeEnum.PropDropDownList) { PropOptionVmD propOptionVmD = new PropOptionVmD(); propOptionVmD.PropId = propId; propOptionVmD.PropName = prop.Name; ViewData["propOptionsD"] = from p in propOptions select new SelectListItem() { Text = p.RealValue, Value = p.Id.ToString() }; return PartialView("_AddPropOptionD", propOptionVmD); } else { PropOptionVmC propOptionVmC = new PropOptionVmC(); propOptionVmC.PropId = propId; propOptionVmC.PropName = prop.Name; ViewData["propOptionsC"] = from p in propOptions select new SelectListItem() {Text = p.RealValue, Value = p.Id.ToString()}; return PartialView("_AddPropOptionC", propOptionVmC); } } //當在前臺界面上勾選CheckBoxList選項，點擊"定價"按鈕，就把PropAndOption集合傳到這里 [HttpPost] public ActionResult DisplaySKUs(List<PropAndOption> propAndOptions) { try { //屬性值分組 var groupValues = (from v in propAndOptions group v by v.PropId into grp select grp.Select(t => Database.GetOptionValueById(t.PropOptionId))).ToList(); //屬性值Id分組 var groupIds = (from i in propAndOptions group i by i.PropId into grep select grep.Select(t => t.PropOptionId.ToString())).ToList(); //屬性值分組后進行笛卡爾乘積 IEnumerable<string> values; values = groupValues.First(); groupValues.RemoveAt(0); groupValues.ForEach(delegate(IEnumerable<string> ele) { values = (from v in values from e in ele select v + " " + e).ToList(); }); //屬性值Id分組后進行笛卡爾乘積 IEnumerable<string> ids; ids = groupIds.First(); groupIds.RemoveAt(0); groupIds.ForEach(delegate(IEnumerable<string> ele) { ids = (from i in ids from e in ele select i + "," + e).ToList(); }); //把笛卡爾積后的集合傳遞給前臺 ViewData["v"] = values; ViewData["i"] = ids; } catch (Exception) { throw; } return PartialView("_ShowSKUs"); } //不涉及屬性值的笛卡爾乘積 public ActionResult ShowSKUsWithoutCombination() { ViewData["v"] = null; ViewData["i"] = null; return PartialView("_ShowSKUs"); } }

?

□ Home/Index.cshtml視圖

?

當初次顯示界面的時候，需要把"提交"按鈕隱藏，把"定價"按鈕顯示。

?

當點擊類別下拉框的時候：
1、清空屬性區域
2、清空SKU區域
3、隱藏"定價"按鈕，顯示"提交"按鈕
4、把類別Id異步傳給控制器
5、遍歷從控制器異步傳回的屬性Id的集合，把屬性Id傳給控制器，發送異步請求，返回有關產品屬性和屬性值的強類型部分視圖，并追加到界面"產品屬性"區域

?

當點擊"定價"按鈕：
1、可能"產品屬性"區域有CheckBoxList
??? 1.1 判斷每組CheckBoxList必須至少有一被勾選
??? 1.2 遍歷每個屬性行，遍歷每個被勾選的項，組成類似{ propId: pId, propOptionId: oId }的數組
??? 1.3 把{ propId: pId, propOptionId: oId }的數組以json格式傳給控制器
??? 1.4 異步返回的部分視圖追加到界面的"產品SKU與定價"區域，并給動態加載內容實施異步驗證

2、可能"產品屬性"區域沒有CheckBoxList
??? 2.1 異步加載顯示SKU組合的部分視圖，只顯示一個有關價格的input元素

勾選"產品屬性"區域的CheckBoxList：
1、檢查每組CheckBoxList是否滿足條件，即至少有一項被選中
2、隱藏"定價"按鈕，顯示"提交"按鈕

?

點擊"產品屬性"區域中，每行的"刪除行"按鈕，刪除當前屬性行。

?

@model MvcApplication1.Models.ProductVm @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <div id="wrapper"> @using (Html.BeginForm("AddProduct", "Home", FormMethod.Post, new { id = "addForm" })) { <fieldset> <legend>類別</legend> <div id="categories"> @Html.DropDownListFor(m => m.CategoryId, ViewData["categories"] as IEnumerable<SelectListItem>, "==選擇類別==") @Html.ValidationMessageFor(m => m.CategoryId) </div> </fieldset> <br /> <fieldset> <legend>產品描述</legend> <div id="description"> @Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name) @Html.ValidationMessageFor(m => m.Name) <br /> <br /> @Html.LabelFor(m => m.Code) @Html.TextBoxFor(m => m.Code) @Html.ValidationMessageFor(m => m.Code) </div> </fieldset> <br /> <fieldset> <legend>產品屬性</legend> <ul id="props"> </ul> </fieldset> <br /> <input type="button" id="displaySKU" value="定價" /> <br /> <fieldset> <legend>產品SKU與定價</legend> <ul id="skus"> </ul> </fieldset> <input type="button" id="up" value="提交" /> } </div> @section scripts { <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script src="~/Scripts/dynamicvalidation.js"></script> <script type="text/javascript"> $(function () { //提交按鈕先隱藏直到點擊定價按鈕再顯示 showPriceHideUp(); //點擊類別下拉框 $('#CategoryId').change(function () { changeCategory(); }); //點擊定價按鈕顯示SKU項，以表格顯示，屬性名稱 屬性名稱 價格， //定價按鈕消失，提交按鈕出現 //對每組CheckBoxList進行驗證，保證至少有一個選項勾選 $('#displaySKU').on("click", function () { if ($('#props').find('.c').length) { //判斷屬性和屬性值區域有沒有包含CheckBoxList的li,存在 if (checkCblist()) { //如果所有CheckBoxList組都至少有一項被勾選 //遍歷所有的CheckBoxList的選中項，一個屬性Id帶著1個或多個屬性項Id var propAndOptions = []; //遍歷所有包含CheckBoxList的li $.each($('#props').find('.c'), function () { //從隱藏域中獲取屬性Id <input type="hidden" value="" id='h_v' class='h_v'> var pId = $(this).find('input[type=hidden]').val(); //遍歷每個li中被選中的CheckBox $.each($(this).find("input:checked"), function () { //獲取選中值 var oId = $(this).val(); propAndOptions.push({ propId: pId, propOptionId: oId }); }); }); //異步提交PropAndOption集合 $.ajax({ cache: false, url: '@Url.Action("DisplaySKUs", "Home")', contentType: 'application/json; charset=utf-8', dataType: "html", type: "POST", data: JSON.stringify({ 'propAndOptions': propAndOptions }), success: function (data) { $('#skus').html(data); $.each($('.s'), function (index) { $.validator.unobtrusive.parseDynamicContent(this, "#addForm"); }); hidePriceShowUp(); }, error: function (jqXhr, textStatus, errorThrown) { alert("出錯了 '" + jqXhr.status + "' (狀態: '" + textStatus + "', 錯誤為: '" + errorThrown + "')"); } }); } else { return; } } else {//判斷屬性和屬性值區域有沒有包含CheckBoxList的li,不存在 $.ajax({ cache: false, url: '@Url.Action("ShowSKUsWithoutCombination", "Home")', dataType: "html", type: "GET", success: function (data) { $('#skus').html(data); $.validator.unobtrusive.parseDynamicContent('.s', "#addForm"); hidePriceShowUp(); }, error: function (jqXhr, textStatus, errorThrown) { alert("出錯了 '" + jqXhr.status + "' (狀態: '" + textStatus + "', 錯誤為: '" + errorThrown + "')"); } }); } }); //刪除屬性屬性值行 $('#props').on('click', '.delRow', function() { $(this).parent().parent().remove(); }); //點擊任意CheckBoxList中的選項，定價按鈕出現，提交按鈕隱藏 $('#props').on("change", "input[type=checkbox]", function () { //驗證 checkCblist(); showPriceHideUp(); }); //點擊提交 $('#up').on("click", function () { if (checkCblist) { if ($('#addForm').valid()) { $.ajax({ cache: false, url: '@Url.Action("AddProduct", "Home")', type: 'POST', dataType: 'json', data: $('#addForm').serialize(), success: function (data) { if (data.msg) { alert('提交成功'); } }, error: function (xhr, status) { alert("添加失敗，狀態碼：" + status); } }); } } else { alert("屬性值必須勾選"); } }); }); //點擊類別下拉框 function changeCategory() { //獲取選中的值 var selectedValue = $('#CategoryId option:selected').val(); //如果確實選中 if ($.trim(selectedValue).length > 0) { //清空屬性和屬性項區域 $('#props').empty(); //清空SKU區域 $('#skus').empty(); showPriceHideUp(); //異步請求屬性和屬性項 $.ajax({ url: '@Url.Action("GetPropIdsByCategoryId", "Home")', data: { categoryId: selectedValue }, type: 'post', cache: false, async: false, dataType: 'json', success: function (data) { if (data.length > 0) { $.each(data, function (i, item) { $.get("@Url.Action("AddPropOption", "Home")", { propId: item }, function (result) { $('#props').append(result); }); }); } } }); } } //隱藏定價按鈕 顯示提交按鈕 function hidePriceShowUp() { //隱藏定價按鈕 $('#displaySKU').css("display", "none"); //顯示提交按鈕 $('#up').css("display", "block"); } //顯示定價按鈕 隱藏提交按鈕 function showPriceHideUp(parameters) { $('#displaySKU').css("display", "block"); $('#up').css("display", "none"); } //檢查每組CheckBoxList，如果沒有一個選中，報錯 function checkCblist() { var result = false; //遍歷每組li下的checkboxlist,如果沒有一個選中，報錯 $('#props li').each(function () { if ($(this).find("input:checked").length == 0) { $(this).find('.err').text("至少選擇一項").css("color", "red"); } else { $(this).find('.err').text(""); result = true; } }); return result; } </script> }

?

以上，關于給為動態加載內容實施驗證的dynamicvalidation.js文件，詳細參考這里。

?

//對動態生成內容客戶端驗證 (function ($) { $.validator.unobtrusive.parseDynamicContent = function (selector, formSelector) { $.validator.unobtrusive.parse(selector); var form = $(formSelector); var unobtrusiveValidation = form.data('unobtrusiveValidation'); var validator = form.validate(); $.each(unobtrusiveValidation.options.rules, function (elname, elrules) { if (validator.settings.rules[elname] == undefined) { var args = {}; $.extend(args, elrules); args.messages = unobtrusiveValidation.options.messages[elname]; //edit:use quoted strings for the name selector $("[name='" + elname + "']").rules("add", args); } else { $.each(elrules, function (rulename, data) { if (validator.settings.rules[elname][rulename] == undefined) { var args = {}; args[rulename] = data; args.messages = unobtrusiveValidation.options.messages[elname][rulename]; //edit:use quoted strings for the name selector $("[name='" + elname + "']").rules("add", args); } }); } }); }; })(jQuery);

?

以上，當點擊產品類別，搜集"產品屬性"區域中的勾選項，組成{ propId: pId, propOptionId: oId }數組的時候，這里的propId和propOptionId鍵必須和PropAndOption中的屬性吻合，因為在控制器方法中，接收的是List類型。

public class PropAndOption { public int PropId { get; set; } public int PropOptionId { get; set; } }

□? _AddPropOptionD.cshtml部分視圖

?

當點擊界面上的類別選項，相應屬性下的屬性值以Select顯示，即單選，就來加載這里的視圖，并呈現到界面中的"產品屬性"區域。

?

@using MvcApplication1.Extensions @model MvcApplication1.Models.PropOptionVmD @using (Html.BeginCollectionItem("PropOptionDs")) { <li> <span> @Model.PropName: </span> <span> @Html.DropDownListFor(m => m.PropOptionId, ViewData["propOptionsD"] as IEnumerable<SelectListItem>) </span> <span> @Html.ValidationMessageFor(m => m.PropOptionId) </span> <span> @Html.HiddenFor(m => m.PropId) </span> <span> <a href="javascript:void(0)" class="delRow">刪除行</a> </span> </li> }

?

其中，Html.BeginCollectionItem("PropOptionDs")根據導航屬性生成滿足批量上傳條件的表單元素，詳細介紹在這里。

?

public static class CollectionEditingHtmlExtensions { //目標生成如下格式 //<input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="6d85a95b-1dee-4175-bfae-73fad6a3763b" /> //<label>Title</label> //<input class="text-box single-line" name="FavouriteMovies[6d85a95b-1dee-4175-bfae-73fad6a3763b].Title" type="text" value="Movie 1" /> //<span class="field-validation-valid"></span> public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html, string collectionName) { //構建name="FavouriteMovies.Index" string collectionIndexFieldName = string.Format("{0}.Index", collectionName); //構建Guid字符串 string itemIndex = GetCollectionItemIndex(collectionIndexFieldName); //構建帶上集合屬性+Guid字符串的前綴 string collectionItemName = string.Format("{0}[{1}]", collectionName, itemIndex); TagBuilder indexField = new TagBuilder("input"); indexField.MergeAttributes(new Dictionary<string, string>() { {"name", string.Format("{0}.Index", collectionName)}, {"value", itemIndex}, {"type", "hidden"}, {"autocomplete", "off"} }); html.ViewContext.Writer.WriteLine(indexField.ToString(TagRenderMode.SelfClosing)); return new CollectionItemNamePrefixScope(html.ViewData.TemplateInfo, collectionItemName); } private class CollectionItemNamePrefixScope : IDisposable { private readonly TemplateInfo _templateInfo; private readonly string _previousPrfix; //通過構造函數，先把TemplateInfo以及TemplateInfo.HtmlFieldPrefix賦值給私有字段變量，并把集合屬性名稱賦值給TemplateInfo.HtmlFieldPrefix public CollectionItemNamePrefixScope(TemplateInfo templateInfo, string collectionItemName) { this._templateInfo = templateInfo; this._previousPrfix = templateInfo.HtmlFieldPrefix; templateInfo.HtmlFieldPrefix = collectionItemName; } public void Dispose() { _templateInfo.HtmlFieldPrefix = _previousPrfix; } } /// <summary> /// /// </summary> /// <param name="collectionIndexFieldName">比如，FavouriteMovies.Index</param> /// <returns>Guid字符串</returns> private static string GetCollectionItemIndex(string collectionIndexFieldName) { Queue<string> previousIndices = (Queue<string>)HttpContext.Current.Items[collectionIndexFieldName]; if (previousIndices == null) { HttpContext.Current.Items[collectionIndexFieldName] = previousIndices = new Queue<string>(); string previousIndicesValues = HttpContext.Current.Request[collectionIndexFieldName]; if (!string.IsNullOrWhiteSpace(previousIndicesValues)) { foreach (string index in previousIndicesValues.Split(',')) { previousIndices.Enqueue(index); } } } return previousIndices.Count > 0 ? previousIndices.Dequeue() : Guid.NewGuid().ToString(); } }

□ _AddPropOptionC.cshtml部分視圖

?

當點擊界面上的類別選項，相應屬性下的屬性值以CheckBoxList顯示，即多選，就來加載這里的視圖，并呈現到界面中的"產品屬性"區域。

?

@using MvcApplication1.Extensions @model MvcApplication1.Models.PropOptionVmC @using (Html.BeginCollectionItem("PropOptionCs")) { <li class="c"> <span> @Model.PropName: </span> <span> @Html.CheckBoxList("PropOptionIds",ViewData["propOptionsC"] as IEnumerable<SelectListItem>,null, 10) <span class="err"></span> </span> <span> @Html.HiddenFor(m => m.PropId) </span> <span> <a href="javascript:void(0)" class="delRow">刪除行</a> </span> </li> }

?

其中，CheckBoxList是基于HtmlHelper的擴展方法，用來呈現水平或垂直分布的CheckBoxList，詳細介紹在這里。

?

using System.Collections.Generic; using System.Linq; using System.Text; namespace System.Web.Mvc { public static class InputExtensions { #region 水平方向CheckBoxList /// <summary> /// 生成水平方向的CheckBoxList /// </summary> /// <param name="htmlHelper"></param> /// <param name="name">name屬性值</param> /// <param name="htmlAttributes">屬性和屬性值的鍵值對集合</param> /// <param name="number">每行顯示的個數</param> /// <returns></returns> public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> listInfo, IDictionary<string, object> htmlAttributes, int number) { //name屬性值必須有 if (string.IsNullOrEmpty(name)) { throw new ArgumentException("必須給CheckBoxList一個name值", "name"); } //數據源SelectListItem的集合必須有 if (listInfo == null) { throw new ArgumentNullException("listInfo", "List<SelectListItem>類型的listInfo參數不能為null"); } //數據源中必須有數據 if (!listInfo.Any()) { throw new ArgumentException("List<SelectListItem>類型的listInfo參數必須有數據", "listInfo"); } //準備拼接 var sb = new StringBuilder(); //每行CheckBox開始數數 var lineNumber = 0; //遍歷數據源 foreach (var info in listInfo) { lineNumber++; //創建type=checkbox的input var builder = new TagBuilder("input"); //tag設置屬性 if (info.Selected) { builder.MergeAttribute("checked", "checked"); } builder.MergeAttributes(htmlAttributes); builder.MergeAttribute("type", "checkbox"); builder.MergeAttribute("value", info.Value); builder.MergeAttribute("name", name); builder.MergeAttribute("id", string.Format("{0}_{1}", name, info.Value)); sb.Append(builder.ToString(TagRenderMode.Normal)); //創建checkbox的顯示值 var lableBuilder = new TagBuilder("label"); lableBuilder.MergeAttribute("for", string.Format("{0}_{1}", name, info.Value)); lableBuilder.InnerHtml = info.Text; sb.Append(lableBuilder.ToString(TagRenderMode.Normal)); //如果設置的每行數量剛好被當前數量整除就換行 if (lineNumber == 0 || (lineNumber % number == 0)) { sb.Append("<br />"); } } return MvcHtmlString.Create(sb.ToString()); } /// <summary> /// 重載，不包含屬性和屬性值鍵值對的集合 /// </summary> /// <param name="htmlHelper"></param> /// <param name="name">name的屬性值</param> /// <param name="listInfor">SelectListItem集合類型的數據源</param> /// <returns></returns> public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> listInfor) { return htmlHelper.CheckBoxList(name, listInfor, null, 5); } #endregion #region 垂直方向CheckBoxList public static MvcHtmlString CheckBoxListVertical(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> listInfo, IDictionary<string, object> htmlAttributes, int columnNumber = 1) { //name屬性值不能為null if (string.IsNullOrEmpty(name)) { throw new ArgumentException("必須給CheckBoxList的name屬性賦值","name"); } //數據源不能為null if (listInfo == null) { throw new ArgumentNullException("listInfo","List<SelectListItem>類型的listInfo參數不能為null"); } //數據源中必須有數據 if (!listInfo.Any()) { throw new ArgumentException("List<SelectListItem>類型的參數listInfo必須有數據","listInfo"); } //數據源數據項的數量 var dataCount = listInfo.Count(); //得到行數 var rows = Convert.ToInt32(Math.Ceiling(Convert.ToDecimal(dataCount) / Convert.ToDecimal(columnNumber))); //創建div var wrapBuilder = new TagBuilder("div"); wrapBuilder.MergeAttribute("style", "float:left; line-height:25px; padding-right:5px;"); var wrapStart = wrapBuilder.ToString(TagRenderMode.StartTag); var wrapClose = string.Concat(wrapBuilder.ToString(TagRenderMode.EndTag), " <div style=\"clear:both;\"></div>"); var wrapBreak = string.Concat("</div>", wrapBuilder.ToString(TagRenderMode.StartTag)); var sb = new StringBuilder(); sb.Append(wrapStart); var lineNumber = 0; //遍歷數據源 foreach (var info in listInfo) { var builder = new TagBuilder("input"); if (info.Selected) { builder.MergeAttribute("checked", "checked"); } builder.MergeAttributes(htmlAttributes); builder.MergeAttribute("type", "checkbox"); builder.MergeAttribute("value", info.Value); builder.MergeAttribute("name", name); builder.MergeAttribute("id", string.Format("{0}_{1}", name, info.Value)); sb.Append(builder.ToString(TagRenderMode.Normal)); var labelBuilder = new TagBuilder("label"); labelBuilder.MergeAttribute("for", string.Format("{0}_{1}", name, info.Value)); labelBuilder.InnerHtml = info.Text; sb.Append(labelBuilder.ToString(TagRenderMode.Normal)); lineNumber++; if (lineNumber.Equals(rows)) { sb.Append(wrapBreak); lineNumber = 0; } else { sb.Append("<br />"); } } sb.Append(wrapClose); return MvcHtmlString.Create(sb.ToString()); } #endregion } }

?

□ _ShowSKUs.cshtml部分視圖

?

當點擊界面上的"定價"按鈕，就來加載這個視圖，如果屬性值笛卡爾乘積為null，那就只顯示一個有關價格的input元素。如果確實存在屬性值笛卡爾乘積，就遍歷這些SKU項顯示出來，并且，每遍歷一次，就去加載有關產品價格的強類型部分視圖。

?

@if (ViewData["v"] == null) { <li> <span class="s"> @{ ProductSKUVm productSkuVm = new ProductSKUVm(); productSkuVm.OptionIds = ""; Html.RenderPartial("_SKUDetail", productSkuVm); } </span> </li> } else { string[] values = (ViewData["v"] as IEnumerable<string>).ToArray(); string[] ids = (ViewData["i"] as IEnumerable<string>).ToArray(); for (int i = 0; i < values.Count(); i++) { <li> <span> @values[@i] </span> <span class="s"> @{ ProductSKUVm productSkuVm = new ProductSKUVm(); productSkuVm.OptionIds = ids[@i]; Html.RenderPartial("_SKUDetail", productSkuVm); } </span> </li> } }

?

□ _SKUDetail.cshtml強類型部分視圖

?

作為_ShowSKUs.cshtml部分視圖的子部分視圖，用來顯示產品價格相關的強類型部分視圖。

@using MvcApplication1.Extensions @model MvcApplication1.Models.ProductSKUVm @using (Html.BeginCollectionItem("ProductSKUs")) { @Html.TextBoxFor(m => m.Price) @Html.ValidationMessageFor(m => m.Price) @Html.HiddenFor(m => m.OptionIds) }

?

□ 模擬數據庫存儲的Database類

?

展開 public class Database{#region 關于分類public static List<Category> GetCategories(){return new List<Category>(){new Category(){Id = 1, Name = "家電"},new Category(){Id = 2, Name = "家具"}};} #endregion#region 關于屬性public static List<Prop> GetProps(){var category1 = GetCategories().Where(c => c.Id == 1).FirstOrDefault();var category2 = GetCategories().Where(c => c.Id == 2).FirstOrDefault();return new List<Prop>(){new Prop(){Id = 1, Name = "重量",InputType = (short)InputTypeEnum.PropDropDownList,CategoryId = category1.Id, Category = category1},new Prop(){Id = 2, Name = "尺寸",InputType = (short)InputTypeEnum.PropCheckBoxList,CategoryId = category1.Id, Category = category1},new Prop(){Id = 3, Name = "顏色",InputType = (short)InputTypeEnum.PropCheckBoxList,CategoryId = category1.Id, Category = category1},new Prop(){Id = 4, Name = "成份",InputType = (short)InputTypeEnum.PropDropDownList,CategoryId = category2.Id, Category = category2}};}public static List<Prop> GetPropsByCategoryId(int categoryId){return GetProps().Where(p => p.CategoryId == categoryId).ToList();} #endregion#region 關于屬性值public static List<PropOption> GetPropOptions(){var prop1 = GetProps().Where(p => p.Id == 1).FirstOrDefault(); //重量var prop2 = GetProps().Where(p => p.Id == 2).FirstOrDefault(); //尺寸var prop3 = GetProps().Where(p => p.Id == 3).FirstOrDefault(); //顏色var prop4 = GetProps().Where(p => p.Id == 4).FirstOrDefault(); //成份return new List<PropOption>(){//重量的屬性值new PropOption(){Id = 1, Prop = prop1, PropId = prop1.Id, RealValue = "5kg"},new PropOption(){Id = 2, Prop = prop1, PropId = prop1.Id, RealValue = "10kg"},//尺寸的屬性值new PropOption(){Id = 3, Prop = prop2, PropId = prop2.Id, RealValue = "10英寸"},new PropOption(){Id = 4, Prop = prop2, PropId = prop2.Id, RealValue = "12英寸"},new PropOption(){Id = 5, Prop = prop2, PropId = prop2.Id, RealValue = "15英寸"},//顏色的屬性值new PropOption(){Id = 6, Prop = prop3, PropId = prop3.Id, RealValue = "玫紅色"},new PropOption(){Id = 7, Prop = prop3, PropId = prop3.Id, RealValue = "圣誕白"},new PropOption(){Id = 8, Prop = prop3, PropId = prop3.Id, RealValue = "宇宙光"},new PropOption(){Id = 9, Prop = prop3, PropId = prop3.Id, RealValue = "絢爛橙"},//成份的屬性值new PropOption(){Id = 10, Prop = prop4, PropId = prop4.Id, RealValue = "實木"},new PropOption(){Id = 11, Prop = prop4, PropId = prop4.Id, RealValue = "橡木"},};}//根據屬性Id獲取所有屬性值public static List<PropOption> GetPropOptionsByPropId(int propId){return GetPropOptions().Where(p => p.PropId == propId).ToList();}//根據屬性值Id獲取屬性值public static string GetOptionValueById(int optionId){return (GetPropOptions().Where(p => p.Id == optionId).FirstOrDefault()).RealValue;}#endregion}

?

結束！

?

?

?

?

?

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/darrenji/p/4110219.html

總結

以上是生活随笔為你收集整理的ASP.NET MVC中商品模块小样的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。