您现在的位置是:网站首页> 编程资料编程资料
MVC4制作网站教程第四章 添加栏目4.1_实用技巧_
2023-05-24
289人已围观
简介 MVC4制作网站教程第四章 添加栏目4.1_实用技巧_
好几天没时间写了。今天有写时间在学一点。
今天状态也不是很好,晕晕沉沉的写吧。
序
一、用户
二、用户组
三、栏目
3.1添加栏目
首先添加【CategoryController】控制器,
那么我想我的视图里,首先显示的应该是栏目类型,这里应该是一个下拉框,用户可以选择“一般栏目”,“单页栏目”,“外部链接”。那么首先应该在【CategoryController】添加一个属性,用来返回栏目类型列表。
#region Attribute public ListTypeSelectList { get { List _items = new List (); _items.Add(new SelectListItem { Text = CategoryType.一般栏目.ToString(), Value = ((int)CategoryType.一般栏目).ToString() }); _items.Add(new SelectListItem { Text = CategoryType.单页栏目.ToString(), Value = ((int)CategoryType.单页栏目).ToString() }); _items.Add(new SelectListItem { Text = CategoryType.外部链接.ToString(), Value = ((int)CategoryType.外部链接).ToString() }); return _items; } } #endregion
其次,用户应该可以选择内容模型,内容模型是什么?
内容模型就是这个栏目下可以添加内容的模型名称?这个模型名称对应的就是Models中间的模型类。为了更好的表述在系统中添加模块“Module ”的概念。模块用来指系统中用来实现相应功能的块,想新闻模块,文章模块,留言模块,图片模块,产品模块,服务模块等等,每个模块对应相应的模型和控制器,用来实现设想中的功能。系统中预置的模块用户应该可以设置启用还是关闭。
第一应该添加内容模型类
using System.ComponentModel.DataAnnotations; namespace Ninesky.Models { /// /// 内容模块 /// public class Module { [Key] public int ModuleId { get; set; } /// /// 模块名称 /// [Required(ErrorMessage="×")] [Display(Name="模块名称")] public string Name { get; set; } /// /// 模块模型 /// [Required(ErrorMessage = "×")] [Display(Name = "模块模型")] public string Model { get; set; } /// /// 启用模块 /// [Required(ErrorMessage = "×")] [Display(Name = "启用模块")] public bool Enable { get; set; } /// /// 说明 /// [Required(ErrorMessage = "×")] [Display(Name = "说明")] public string Description { get; set; } } } 既然有模块类,就应该有模块类的数据处理类ModuleRepository,这块功能暂时留在后面来写,先最简单的实现List(bool enable)函数让其能显示模块列表。
using Ninesky.Models; using System.Collections.Generic; using System.Linq; namespace Ninesky.Repository { public class ModuleRepository { public IQueryable List(bool enable) { List _module = new List(); _module.Add(new Module { Name = "新闻模块", Model = "News", Enable = true, Description = "新闻模块" }); _module.Add(new Module { Name = "文章模块", Model = "Article", Enable = true, Description = "文章模块" }); return _module.AsQueryable(); } } } 简单吧。模块功能以后再写吧,先为了添加栏目显示两个固定的模块,
那么后续我们要在控制器中添加[ManageAdd]action
[AdminAuthorize] public ActionResult ManageAdd() { ModuleRepository _moduleRsy = new ModuleRepository(); var _modules = _moduleRsy.List(true); List _slimodule = new List(_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(); } 然后添加添加数据处理函数
[AdminAuthorize] [HttpPost] public ActionResult ManageAdd(Category category) { categoryRsy = new CategoryRepository(); if (categoryRsy.Add(category)) { Notice _n = new Notice { Title = "添加栏目成功", Details = "您已经成功添加[" + category.Name + "]栏目!", DwellTime = 5, NavigationName = "栏目列表", NavigationUrl = Url.Action("ManageList", "Cayegory") }; return RedirectToAction("ManageNotice", "Prompt", _n); } else { Error _e = new Error { Title = "添加栏目失败", Details = "在添加栏目时,未能保存到数据库", Cause = "系统错误", Solution = Server.UrlEncode("现在开始做视图部分了。
在[ManageAdd]action上点右键添加视图,
@model Ninesky.Models.Category @{ ViewBag.Title = "ManageAdd"; Layout = "~/Views/Layout/_Manage.cshtml"; } 左侧列表 @using (Html.BeginForm()) { @Html.ValidationSummary(true) } @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 这里给一些
在ManageAdd.cshtml底部添加脚本
从浏览器中看一下。父栏目这里还有些问题,设想中这里应该是一个下拉框,用户可以选择已存在栏目类型为一般栏目的栏目做父栏目。这里需要下拉树形列表,设想中应该是这个样子,是一个下拉列表和属性列表框的组合框。

html中没有这种类型的控件,mcv4 中带的jquery UI是一个比较好的库,本身包含一定的控件,并且可以自己扩展,但是他缺少一些像,数据表(datagirdview),树形控件(tree),树形组合控件(combotree)等,且jqueryui的式样也不太好变换,决定丢弃jqueryui,而是用easyui(相对jqueryui功能更全面,更容易控制式样),在“引用”上点右键选择管理NuGet程序包

在已安装的包->全部,选择Jquery Ui点击卸载。
去http://www.jeasyui.com/选在最新版本,在项目的/Scripts文件夹中新建EasyUi文件夹,将easyui中的一下文件夹复制到该文件夹。

打开App_Start\BundleConfig.cs,删除jqueryui相关项,添加
bundles.Add(new ScriptBundle("~/bundles/EasyUi").Include( "~/Scripts/EasyUi/easyloader.js")); bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css")); 两项,使该文档看起来如下:
using System.Web; using System.Web.Optimization; namespace Ninesky { public class BundleConfig { // 有关 Bundling 的详细信息,请访问 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 的开发版本进行开发和了解信息。然后,当你做好 // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。 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")); } } } 这里会用到easyui的combotree。
查阅了官方文档,数据格式为
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 chil
相关内容
- MVC4制作网站教程第四章 部分栏目功能实现代码_实用技巧_
- MVC4制作网站教程第三章 删除用户组操作3.4_实用技巧_
- MVC4制作网站教程第三章 修改用户组操作3.3_实用技巧_
- MVC4制作网站教程第三章 添加用户组操作3.2_实用技巧_
- MVC4制作网站教程第三章 浏览用户组操作3.1_实用技巧_
- MVC4制作网站教程第二章 用户修改资料2.4_实用技巧_
- MVC4制作网站教程第二章 用户密码修改2.3_实用技巧_
- MVC4制作网站教程第二章 用户登陆2.2_实用技巧_
- MVC4制作网站教程第二章 用户注册2.1_实用技巧_
- MVC4制作网站教程第二章 部分用户功能实现代码_实用技巧_
添加栏目
