MVC4制作网站教程第四章 添加栏目4.1

好几天没时间写了。今天有写时间在学一点。
今天状态也不是很好,晕晕沉沉的写吧。

一、用户
二、用户组
三、栏目
3.1添加栏目
首先添加【CategoryController】控制器,

那么我想我的视图里,首先显示的应该是栏目类型,这里应该是一个下拉框,用户可以选择“一般栏目”,“单页栏目”,“外部链接”。那么首先应该在【CategoryController】添加一个属性,用来返回栏目类型列表。

#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.单页栏目.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
{
 /// <summary>
 /// 内容模块
 /// </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>
 /// 说明
 /// </summary>
 [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<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();
 }
 }
}

简单吧。模块功能以后再写吧,先为了添加栏目显示两个固定的模块,
 那么后续我们要在控制器中添加[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();
 }

然后添加添加数据处理函数

[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("<li>返回<a href='" + Url.Action("ManageAdd", "Cayegory") + "'>添加栏目</a>页面,输入正确的信息后重新操作</li><li>联系网站管理员</li>") };
  return RedirectToAction("ManageError", "Prompt", _e);
  }
 }

现在开始做视图部分了。
在[ManageAdd]action上点右键添加视图,

@model Ninesky.Models.Category

@{
 ViewBag.Title = "ManageAdd";
 Layout = "~/Views/Layout/_Manage.cshtml";
}

<div class="left">
 <div class="top"></div>
 左侧列表
</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属性,实现用户在显示不同的栏目类型的时候显示不同的项目。
 在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>

从浏览器中看一下。父栏目这里还有些问题,设想中这里应该是一个下拉框,用户可以选择已存在栏目类型为一般栏目的栏目做父栏目。这里需要下拉树形列表,设想中应该是这个样子,是一个下拉列表和属性列表框的组合框。

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 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文件夹,该文件夹用来控件数据相关的模型,添加Tree类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Ninesky.Models.Ui
{
 /// <summary>
 /// 树形控件数据
 /// </summary>
 public class Tree
 {
 /// <summary>
 /// Id
 /// </summary>
 public int id { get; set; }
 /// <summary>
 /// 文本
 /// </summary>
 public string text { get; set; }
 /// <summary>
 /// 节点状态:'open'或'closed',默认'open'。
 /// </summary>
 public string state { get; set; }
 /// <summary>
 /// 图标
 /// </summary>
 public string iconCls { get; set; }
 /// <summary>
 /// 子节点
 /// </summary>
 public List<Tree> children { get; set; }
 }
}

打开~/Scripts/EasyUi/themes/icon.css文件

在底部添加代码

.icon-general {
 background: url('icons/ns_general.png') no-repeat !important;
}

切记一定记得加!important来调整css的优先级。easyui会将icon-general这个类添加在列表项的最后,如果不加这句'icons/ns_general.png'图标将不会显示。

选择一个16*16的图表命名为ns_general.png,并复制到一下文件夹

这里要用递归的方式调取一般栏目的树形结构:打开CategoryRepository.cs。在底部添加两个函数

/// <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>
 /// 普通栏目树形类表
 /// </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>
 /// 普通栏目树形类表递归函数
 /// </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;
 }

打开CategoryController,添加一个 [JsonTreeParent()]  返回可以做父栏目的栏目树列表。

#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 = "无",iconCls="icon-general" });
  return Json(_children);
 }
 #endregion

打开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中减价easyui的脚本和css引用

@section Scripts {
 @Styles.Render("~/EasyUi/icon")
 @Scripts.Render("~/bundles/EasyUi")
 @Scripts.Render("~/bundles/jqueryval")
}

OK,打开浏览器测试一下

可以正常添加栏目。

今天发现一个问题无论父栏目宣布选什么,提交的ParentId为0,上面“打开ManageAdd.cshtml,将@Html.EditorFor(model => model.ParentId)改为<input id="ParentId" type="text" class="easyui-combotree" data-options="url:'@Url.Action("JsonTreeParent", "Category")'" value="0" /> .” 这里有问题,应改为:@Html.TextBox("ParentId",0,new {@class ="easyui-combotree",data_options="url:'"+Url.Action("JsonTreeParent", "Category")+"'" })。

修改后正常了,但是使用easyui combotree后,父栏目客户端验证无效了,这个是什么原因,如何解决,知道的朋友不吝赐教!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 一步步打造简单的MVC电商网站BooksStore(2)

    一步步打造一个简单的 MVC 电商网站 - BooksStore(二) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore <一步步打造一个简单的 MVC 电商网站 - BooksStore(一)> <一步步打造一个简单的 MVC 电商网站 - BooksStore(二)> <一步步打造一个简单的 MVC 电商网站 - BooksStore(三)> <一步步打造一个简单的 MVC 电商网站 -

  • 一步步打造简单的MVC电商网站BooksStore(1)

    一步步打造一个简单的 MVC 电商网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore <一步步打造一个简单的 MVC 电商网站 - BooksStore(一)> <一步步打造一个简单的 MVC 电商网站 - BooksStore(二)> <一步步打造一个简单的 MVC 电商网站 - BooksStore(三)> <一步步打造一个简单的 MVC 电商网站 -

  • MVC4制作网站教程第四章 浏览栏目4.2

    序 一.用户 二.用户组 三.栏目 3.1添加栏目 3.2浏览栏目 浏览栏目这块做个一个树形列表,添加栏目的左侧部分只写了句"左侧列表"就是指这个树形列表,等我们写完替换一下就可以了. 先在[CategoryController]里面添加[ManagePartialTree]action,这里的Partial用来说明是分部视图 /// <summary> /// 栏目列表局部树视图 /// </summary> /// <returns></r

  • MVC+EasyUI+三层新闻网站建立 建站准备工作(一)

    这一次的项目是建立一个小型的新闻发布网站,所以就不需要用一些高大上的框架.三层+MVC+easyUI就足够了. 首先:搭建起项目框架 其次:到easyui官网去下载easyUI 我这里用的是我在很久的项目中用过的版本jquery-easyui-1.5.2 下载链接:http://www.jeasyui.com/download/list.php 最后就是把easyui引入到项目中去. 现在Content文件夹下建立一个叫EasyUi的文件夹,把需要用到的文件复制到其中,具体如下图所示: 以上就是

  • MVC+EasyUI+三层新闻网站建立 验证码生成(三)

    我们在项目中的NewWeb.Common类库里面建立一个类用来存放生成验证码的代码. 这里我类的名字叫 ValidateCode 生成验证码(ValidateCode)类的代码: using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; using System.IO; using Syste

  • MVC+EasyUI+三层新闻网站建立 tabs标签制作方法(六)

    MVC新闻网站建立,完成tabs标签的制作. 首先对 Center 进行一个简单的布局 <!--------------中间布局开始----------------> <div data-options="region:'center',title:'Center'" > <div class="easyui-tabs" style="width:700px;height:250px" fit="true&

  • MVC+EasyUI+三层新闻网站建立 后台登录界面的搭建(二)

    新闻网站建立,后台登录界面的搭建 首先我们在Controllers里面新添加一个控制器就叫LoginController,右键点击Controllers添加控制器就可以了(注意后面一定是Controller结尾,这是一种约定) 其次:右键点击index建立Index视图.(不选择使用母版页) 现在我们就可以在Index视图中设计我们的登录页面了. 这里需要我们引入几个Css样式和JS文件 简单的进行登录界面的布局 <html> <head> <meta name="

  • MVC4制作网站教程第四章 更新栏目4.3

    序  一.用户  二.用户组  三.栏目 3.1添加栏目 3.2浏览栏目  3.3更新栏目 上次在树形列表里面点击栏目名称后跳转到详细信息页面~/Category/ManageDetails/id.在详细页面里点修改,来完成栏目资料修改. 先打开[CategoryController]添加[ManageDetails(int id)]action /// <summary> /// 栏目详细资料 /// </summary> /// <param name="id&

  • MVC+EasyUI+三层新闻网站建立 主页布局的方法(五)

    MVC新闻网站建立,实现主页布局. 首先建立Home控制器,然后再建立Index视图. 和前面登录页面一样也需要引入几个文件. 接着就是找到你下载的easyui文件夹里面的demo里面的layout里面的full 浏览器运行后右键查看代码把里面的body里面的代码复制到Index视图的body里面去.没找到的可以直接复制下面的代码. <body class="easyui-layout"> <div data-options="region:'north',

  • MVC+EasyUI+三层新闻网站建立 实现登录功能(四)

    MVC新闻网站建立,实现登录功能 首先在数据库中建立一张UserInfo表. 注:以下讲的这些可以用动软代码生成器直接生成,但是对于新手来说还是动手敲一下的好,了解以下实现的过程. 然后在Model中建立UserInfo的实体层. public class UserInfo { public int Id { get; set; } public string UserName { get; set; } public string UserPwd { get; set; } public st

随机推荐