MVC4制作網(wǎng)站教程第四章 添加欄目4.1
好幾天沒(méi)時(shí)間寫了。今天有寫時(shí)間在學(xué)一點(diǎn)。
今天狀態(tài)也不是很好，暈暈沉沉的寫吧。
序
一、用戶
二、用戶組
三、欄目
3.1添加欄目
首先添加【CategoryController】控制器，
那么我想我的視圖里，首先顯示的應(yīng)該是欄目類型，這里應(yīng)該是一個(gè)下拉框，用戶可以選擇“一般欄目”，“單頁(yè)欄目”，“外部鏈接”。那么首先應(yīng)該在【CategoryController】添加一個(gè)屬性，用來(lái)返回欄目類型列表。
#region Attribute
public List<SelectListItem> TypeSelectList
{
get
{
List<SelectListItem> _items = new List<SelectListItem>();
_items.Add(new SelectListItem { Text = CategoryType.一般欄目.ToString(), Value = ((int)CategoryType.一般欄目).ToString() });
_items.Add(new SelectListItem { Text = CategoryType.單頁(yè)欄目.ToString(), Value = ((int)CategoryType.單頁(yè)欄目).ToString() });
_items.Add(new SelectListItem { Text = CategoryType.外部鏈接.ToString(), Value = ((int)CategoryType.外部鏈接).ToString() });
return _items;
}
}
#endregion
其次，用戶應(yīng)該可以選擇內(nèi)容模型，內(nèi)容模型是什么？
內(nèi)容模型就是這個(gè)欄目下可以添加內(nèi)容的模型名稱？這個(gè)模型名稱對(duì)應(yīng)的就是Models中間的模型類。為了更好的表述在系統(tǒng)中添加模塊“Module ”的概念。模塊用來(lái)指系統(tǒng)中用來(lái)實(shí)現(xiàn)相應(yīng)功能的塊，想新聞模塊，文章模塊，留言模塊，圖片模塊，產(chǎn)品模塊，服務(wù)模塊等等，每個(gè)模塊對(duì)應(yīng)相應(yīng)的模型和控制器，用來(lái)實(shí)現(xiàn)設(shè)想中的功能。系統(tǒng)中預(yù)置的模塊用戶應(yīng)該可以設(shè)置啟用還是關(guān)閉。
第一應(yīng)該添加內(nèi)容模型類
using System.ComponentModel.DataAnnotations;
namespace Ninesky.Models
{
/// <summary>
/// 內(nèi)容模塊
/// </summary>
public class Module
{
[Key]
public int ModuleId { get; set; }
/// <summary>
/// 模塊名稱
/// </summary>
[Required(ErrorMessage="×")]
[Display(Name="模塊名稱")]
public string Name { get; set; }
/// <summary>
/// 模塊模型
/// </summary>
[Required(ErrorMessage = "×")]
[Display(Name = "模塊模型")]
public string Model { get; set; }
/// <summary>
/// 啟用模塊
/// </summary>
[Required(ErrorMessage = "×")]
[Display(Name = "啟用模塊")]
public bool Enable { get; set; }
/// <summary>
/// 說(shuō)明
/// </summary>
[Required(ErrorMessage = "×")]
[Display(Name = "說(shuō)明")]
public string Description { get; set; }
}
}
既然有模塊類，就應(yīng)該有模塊類的數(shù)據(jù)處理類ModuleRepository，這塊功能暫時(shí)留在后面來(lái)寫，先最簡(jiǎn)單的實(shí)現(xiàn)List(bool enable)函數(shù)讓其能顯示模塊列表。
using Ninesky.Models;
using System.Collections.Generic;
using System.Linq;
namespace Ninesky.Repository
{
public class ModuleRepository
{
public IQueryable<Module> List(bool enable)
{
List<Module> _module = new List<Module>();
_module.Add(new Module { Name = "新聞模塊", Model = "News", Enable = true, Description = "新聞模塊" });
_module.Add(new Module { Name = "文章模塊", Model = "Article", Enable = true, Description = "文章模塊" });
return _module.AsQueryable();
}
}
}
簡(jiǎn)單吧。模塊功能以后再寫吧，先為了添加欄目顯示兩個(gè)固定的模塊，
那么后續(xù)我們要在控制器中添加[ManageAdd]action
[AdminAuthorize]
public ActionResult ManageAdd()
{
ModuleRepository _moduleRsy = new ModuleRepository();
var _modules = _moduleRsy.List(true);
List<SelectListItem> _slimodule = new List<SelectListItem>(_modules.Count());
foreach (Module _module in _modules)
{
_slimodule.Add(new SelectListItem { Text = _module.Name, Value = _module.Model });
}
ViewData.Add("Model", _slimodule);
ViewData.Add("Type", TypeSelectList);
return View();
}
然后添加添加數(shù)據(jù)處理函數(shù)
[AdminAuthorize]
[HttpPost]
public ActionResult ManageAdd(Category category)
{
categoryRsy = new CategoryRepository();
if (categoryRsy.Add(category))
{
Notice _n = new Notice { Title = "添加欄目成功", Details = "您已經(jīng)成功添加[" + category.Name + "]欄目！", DwellTime = 5, NavigationName = "欄目列表", NavigationUrl = Url.Action("ManageList", "Cayegory") };
return RedirectToAction("ManageNotice", "Prompt", _n);
}
else
{
Error _e = new Error { Title = "添加欄目失敗", Details = "在添加欄目時(shí)，未能保存到數(shù)據(jù)庫(kù)", Cause = "系統(tǒng)錯(cuò)誤", Solution = Server.UrlEncode("<li>返回<a href='" + Url.Action("ManageAdd", "Cayegory") + "'>添加欄目</a>頁(yè)面，輸入正確的信息后重新操作</li><li>聯(lián)系網(wǎng)站管理員</li>") };
return RedirectToAction("ManageError", "Prompt", _e);
}
}
現(xiàn)在開(kāi)始做視圖部分了。
在[ManageAdd]action上點(diǎn)右鍵添加視圖，
@model Ninesky.Models.Category
@{
ViewBag.Title = "ManageAdd";
Layout = "~/Views/Layout/_Manage.cshtml";
}
<div class="left">
<div class="top"></div>
左側(cè)列表
</div>
<div class="split"></div>
<div class="workspace">
<div class="inside">
<div class="notebar">
<img alt="" src="~/Skins/Default/Manage/Images/Category.gif" />添加欄目
</div>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>欄目</legend>
<ul>
<li>
<div class="editor-label">
@Html.LabelFor(model => model.Type)
</div>
<div class="editor-field">
@Html.DropDownList("Type")
@Html.ValidationMessageFor(model => model.Type)
@Html.DisplayDescriptionFor(model => model.Type)
</div>
</li>
<li>
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
@Html.DisplayDescriptionFor(model => model.Name)
</div>
</li>
<li>
<div class="editor-label">
@Html.LabelFor(model => model.ParentId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ParentId)
@Html.ValidationMessageFor(model => model.ParentId)
@Html.DisplayDescriptionFor(model => model.ParentId)
</div>
</li>
<li id="li_model">
<div class="editor-label">
@Html.LabelFor(model => model.Model)
</div>
<div class="editor-field">
@Html.DropDownList("Model")
@Html.ValidationMessageFor(model => model.Model)
@Html.DisplayDescriptionFor(model => model.Model)
</div>
</li>
<li id="li_categoryview">
<div class="editor-label">
@Html.LabelFor(model => model.CategoryView)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CategoryView)
@Html.ValidationMessageFor(model => model.CategoryView)
@Html.DisplayDescriptionFor(model => model.CategoryView)
</div>
</li>
<li id="li_contentview">
<div class="editor-label">
@Html.LabelFor(model => model.ContentView)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ContentView)
@Html.ValidationMessageFor(model => model.ContentView)
@Html.DisplayDescriptionFor(model => model.ContentView)
</div>
</li>
<li id="li_nav">
<div class="editor-label">
@Html.LabelFor(model => model.Navigation)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Navigation)
@Html.ValidationMessageFor(model => model.Navigation)
@Html.DisplayDescriptionFor(model => model.Navigation)
</div>
</li>
<li>
<div class="editor-label">
@Html.LabelFor(model => model.Order)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Order)
@Html.ValidationMessageFor(model => model.Order)
@Html.DisplayDescriptionFor(model => model.Order)
</div>
</li>
<li>
<div class="editor-label">
</div>
<div class="editor-field">
<input type="submit" value="添加" />
</div>
</li>
</ul>
</fieldset>
}
</div>
</div>
<div class="clear"></div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
這里給一些<li>添加id屬性，實(shí)現(xiàn)用戶在顯示不同的欄目類型的時(shí)候顯示不同的項(xiàng)目。
在ManageAdd.cshtml底部添加腳本
<script type="text/javascript">
Details();
$("#Type").change(function () {
Details();
});
function Details() {
var v = $("#Type").val();
if (v == "0") {
$("#li_model").show();
$("#li_categoryview").show();
$("#li_contentview").show();
$("#li_nav").hide();
}
else if (v == "1") {
$("#li_model").hide();
$("#li_categoryview").show();
$("#li_contentview").hide();
$("#li_nav").hide();
}
else if (v == "2") {
$("#li_model").hide();
$("#li_categoryview").hide();
$("#li_contentview").hide();
$("#li_nav").show();
}
}
</script>
從瀏覽器中看一下。父欄目這里還有些問(wèn)題，設(shè)想中這里應(yīng)該是一個(gè)下拉框，用戶可以選擇已存在欄目類型為一般欄目的欄目做父欄目。這里需要下拉樹(shù)形列表，設(shè)想中應(yīng)該是這個(gè)樣子,是一個(gè)下拉列表和屬性列表框的組合框。
html中沒(méi)有這種類型的控件，mcv4 中帶的jquery UI是一個(gè)比較好的庫(kù)，本身包含一定的控件，并且可以自己擴(kuò)展，但是他缺少一些像，數(shù)據(jù)表（datagirdview），樹(shù)形控件（tree），樹(shù)形組合控件（combotree）等，且jqueryui的式樣也不太好變換，決定丟棄jqueryui，而是用easyui（相對(duì)jqueryui功能更全面，更容易控制式樣），在“引用”上點(diǎn)右鍵選擇管理NuGet程序包
在已安裝的包->全部，選擇Jquery Ui點(diǎn)擊卸載。
去http://www.jeasyui.com/選在最新版本，在項(xiàng)目的/Scripts文件夾中新建EasyUi文件夾，將easyui中的一下文件夾復(fù)制到該文件夾。
打開(kāi)App_Start\BundleConfig.cs，刪除jqueryui相關(guān)項(xiàng)，添加
bundles.Add(new ScriptBundle("~/bundles/EasyUi").Include(
"~/Scripts/EasyUi/easyloader.js"));
bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
兩項(xiàng)，使該文檔看起來(lái)如下:
using System.Web;
using System.Web.Optimization;
namespace Ninesky
{
public class BundleConfig
{
// 有關(guān) Bundling 的詳細(xì)信息，請(qǐng)?jiān)L問(wèn) http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/EasyUi").Include(
"~/Scripts/EasyUi/easyloader.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// 使用 Modernizr 的開(kāi)發(fā)版本進(jìn)行開(kāi)發(fā)和了解信息。然后，當(dāng)你做好
// 生產(chǎn)準(zhǔn)備時(shí)，請(qǐng)使用 http://modernizr.com 上的生成工具來(lái)僅選擇所需的測(cè)試。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Skins/css").Include("~/Skins/Default/Style.css"));
bundles.Add(new StyleBundle("~/Skins/usercss").Include("~/Skins/Default/User.css"));
bundles.Add(new StyleBundle("~/Skins/ManageCss").Include("~/Skins/Default/Manage/Style.css"));
bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
}
}
}
這里會(huì)用到easyui的combotree。
查閱了官方文檔，數(shù)據(jù)格式為
Tree Data Format
Every node can contains following properties:
•id: node id, which is important to load remote data
•text: node text to show
•state: node state, 'open' or 'closed', default is 'open'. When set to 'closed', the node have children nodes and will load them from remote site
•checked: Indicate whether the node is checked selected.
•attributes: custom attributes can be added to a node
•children: an array nodes defines some children nodes
那么在Models文件夾里新家Ui文件夾，該文件夾用來(lái)控件數(shù)據(jù)相關(guān)的模型，添加Tree類
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Ninesky.Models.Ui
{
/// <summary>
/// 樹(shù)形控件數(shù)據(jù)
/// </summary>
public class Tree
{
/// <summary>
/// Id
/// </summary>
public int id { get; set; }
/// <summary>
/// 文本
/// </summary>
public string text { get; set; }
/// <summary>
/// 節(jié)點(diǎn)狀態(tài)：'open'或'closed'，默認(rèn)'open'。
/// </summary>
public string state { get; set; }
/// <summary>
/// 圖標(biāo)
/// </summary>
public string iconCls { get; set; }
/// <summary>
/// 子節(jié)點(diǎn)
/// </summary>
public List<Tree> children { get; set; }
}
}
打開(kāi)~/Scripts/EasyUi/themes/icon.css文件
在底部添加代碼
.icon-general {
background: url('icons/ns_general.png') no-repeat !important;
}
切記一定記得加!important來(lái)調(diào)整css的優(yōu)先級(jí)。easyui會(huì)將icon-general這個(gè)類添加在列表項(xiàng)的最后，如果不加這句'icons/ns_general.png'圖標(biāo)將不會(huì)顯示。
選擇一個(gè)16*16的圖表命名為ns_general.png，并復(fù)制到一下文件夾
這里要用遞歸的方式調(diào)取一般欄目的樹(shù)形結(jié)構(gòu)：打開(kāi)CategoryRepository.cs。在底部添加兩個(gè)函數(shù)
/// <summary>
/// 欄目列表
/// </summary>
/// <param name="model">模型名稱</param>
/// <returns></returns>
public IQueryable<Category> List(string model)
{
return dbContext.Categorys.Where(c => c.Model == model).OrderBy(c => c.Order);
}
/// <summary>
/// 普通欄目樹(shù)形類表
/// </summary>
/// <returns></returns>
public List<Tree> TreeGeneral()
{
var _root = Children(0, 0).Select(c => new Tree { id = c.CategoryId, text = c.Name, iconCls = "icon-general" }).ToList();
if (_root != null)
{
for (int i = 0; i < _root.Count(); i++)
{
_root[i] = RecursionTreeGeneral(_root[i]);
}
}
return _root;
}
/// <summary>
/// 普通欄目樹(shù)形類表遞歸函數(shù)
/// </summary>
/// <param name="tree"></param>
/// <returns></returns>
private Tree RecursionTreeGeneral(Tree tree)
{
var _children = Children(tree.id, 0).Select(c => new Tree { id = c.CategoryId, text = c.Name, iconCls="icon-general" }).ToList();
if (_children != null)
{
for (int i = 0; i < _children.Count(); i++)
{
_children[i] = RecursionTreeGeneral(_children[i]);
}
tree.children = _children;
}
return tree;
}
打開(kāi)CategoryController，添加一個(gè) [JsonTreeParent()] 返回可以做父欄目的欄目樹(shù)列表。
#region json
[AdminAuthorize]
public JsonResult JsonTreeParent()
{
categoryRsy =new CategoryRepository();
var _children = categoryRsy.TreeGeneral();
if (_children == null) _children = new List<Tree>();
_children.Insert(0, new Tree { id = 0, text = "無(wú)",iconCls="icon-general" });
return Json(_children);
}
#endregion
打開(kāi)ManageAdd.cshtml,將@Html.EditorFor(model => model.ParentId)改為<input id="ParentId" type="text" class="easyui-combotree" data-options="url:'@Url.Action("JsonTreeParent", "Category")'" value="0" /> .
在@section Scripts中減價(jià)easyui的腳本和css引用
@section Scripts {
@Styles.Render("~/EasyUi/icon")
@Scripts.Render("~/bundles/EasyUi")
@Scripts.Render("~/bundles/jqueryval")
}
OK,打開(kāi)瀏覽器測(cè)試一下
可以正常添加欄目。
今天發(fā)現(xiàn)一個(gè)問(wèn)題無(wú)論父欄目宣布選什么，提交的ParentId為0，上面“打開(kāi)ManageAdd.cshtml,將@Html.EditorFor(model => model.ParentId)改為<input id="ParentId" type="text" class="easyui-combotree" data-options="url:'@Url.Action("JsonTreeParent", "Category")'" value="0" /> .” 這里有問(wèn)題，應(yīng)改為：@Html.TextBox("ParentId",0,new {@class ="easyui-combotree",data_options="url:'"+Url.Action("JsonTreeParent", "Category")+"'" })。
修改后正常了，但是使用easyui combotree后，父欄目客戶端驗(yàn)證無(wú)效了，這個(gè)是什么原因，如何解決，知道的朋友不吝賜教！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- MVC+EasyUI+三層新聞網(wǎng)站建立 建站準(zhǔn)備工作（一）
- MVC+EasyUI+三層新聞網(wǎng)站建立 主頁(yè)布局的方法（五）
- MVC+EasyUI+三層新聞網(wǎng)站建立 實(shí)現(xiàn)登錄功能（四）
- MVC+EasyUI+三層新聞網(wǎng)站建立 后臺(tái)登錄界面的搭建（二）
- MVC+EasyUI+三層新聞網(wǎng)站建立 驗(yàn)證碼生成（三）
- 一步步打造簡(jiǎn)單的MVC電商網(wǎng)站BooksStore（2）
- 一步步打造簡(jiǎn)單的MVC電商網(wǎng)站BooksStore（1）
- MVC4制作網(wǎng)站教程第四章 更新欄目4.3
- MVC4制作網(wǎng)站教程第四章 瀏覽欄目4.2
- MVC+EasyUI+三層新聞網(wǎng)站建立 tabs標(biāo)簽制作方法（六）
相關(guān)文章
datagrid和repeader控件中替換標(biāo)識(shí)值的方法
本節(jié)主要介紹了datagrid和repeader控件中替換標(biāo)識(shí)值的方法,需要的朋友可以參考下2014-08-08
c#生成圖片縮略圖的類(2種實(shí)現(xiàn)思路)
4個(gè)重載方法,有直接返回Image對(duì)象的,有生成縮略圖,并且保存到指定目錄的，具體祥看下文2013-05-05
asp.net uploadify實(shí)現(xiàn)多附件上傳功能
這篇文章主要為大家詳細(xì)介紹了asp.net uploadify實(shí)現(xiàn)多附件上傳功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這次主要的分享就是div+css+jquery，你可以改版成你要的登錄，隨意改版！后臺(tái)代碼由于時(shí)間限制，沒(méi)有完成，里面有些亂，重點(diǎn)分享界面，還望理解2012-10-10
ASP.NET MVC中設(shè)置跨域訪問(wèn)問(wèn)題
這篇文章主要介紹了ASP.NET MVC中設(shè)置跨域訪問(wèn)問(wèn)題,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了asp.net利用母版制作頁(yè)腳效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
ajaxToolkit:CalendarExtender演示與實(shí)現(xiàn)代碼
Ajax的CalenderExtender的日期選擇實(shí)現(xiàn)介紹，感興趣的你可以了解下，就當(dāng)是鞏固知識(shí)，希望本文對(duì)你有所幫助2013-01-01
asp.net Accee數(shù)據(jù)庫(kù)連接不穩(wěn)定解決方案
我最最進(jìn)做了個(gè)網(wǎng)站，我是用VS2005 + Access 數(shù)據(jù)庫(kù)連接，可以我在連接的時(shí)候總是出現(xiàn)連接不穩(wěn)定的情況，同樣的代碼，一個(gè)字也沒(méi)改，就是連接不上，但是有的又連接的上。真是郁悶，真是弄死人。2009-07-07
這篇文章主要給大家介紹了關(guān)于ASP.NET Core處理管道的深入理解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
如何利用HttpClientFactory實(shí)現(xiàn)簡(jiǎn)單的熔斷降級(jí)
這篇文章主要給大家介紹了關(guān)于如何利用HttpClientFactory實(shí)現(xiàn)簡(jiǎn)單的熔斷降級(jí)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07