当前位置：Gxlcms > asp.net > MVC4制作网站教程第四章 添加栏目4.1

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

时间：2021-07-01 10:21:17 帮助过：13人阅读

好几天没时间写了。今天有写时间在学一点。
今天状态也不是很好，晕晕沉沉的写吧。
序
一、用户
二、用户组
三、栏目
3.1添加栏目
首先添加【CategoryController】控制器， 

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

  1. #region Attribute
  2.  public List<SelectListItem> TypeSelectList
  3.  {
  4.   get
  5.   {
  6.   List<SelectListItem> _items = new List<SelectListItem>();
  7.   _items.Add(new SelectListItem { Text = CategoryType.一般栏目.ToString(), Value = ((int)CategoryType.一般栏目).ToString() });
  8.   _items.Add(new SelectListItem { Text = CategoryType.单页栏目.ToString(), Value = ((int)CategoryType.单页栏目).ToString() });
  9.   _items.Add(new SelectListItem { Text = CategoryType.外部链接.ToString(), Value = ((int)CategoryType.外部链接).ToString() });
  10.   return _items;
  11.   }
  12.  }
  13.  #endregion

其次，用户应该可以选择内容模型，内容模型是什么？ 

内容模型就是这个栏目下可以添加内容的模型名称？这个模型名称对应的就是Models中间的模型类。为了更好的表述在系统中添加模块“Module ”的概念。模块用来指系统中用来实现相应功能的块，想新闻模块，文章模块，留言模块，图片模块，产品模块，服务模块等等，每个模块对应相应的模型和控制器，用来实现设想中的功能。系统中预置的模块用户应该可以设置启用还是关闭。 

第一应该添加内容模型类

  1. using System.ComponentModel.DataAnnotations;
  2. namespace Ninesky.Models
  3. {
  4.  /// <summary>
  5.  /// 内容模块
  6.  /// </summary>
  7.  public class Module
  8.  {
  9.  [Key]
  10.  public int ModuleId { get; set; }
  11.  /// <summary>
  12.  /// 模块名称
  13.  /// </summary>
  14.  [Required(ErrorMessage="×")]
  15.  [Display(Name="模块名称")]
  16.  public string Name { get; set; }
  17.  /// <summary>
  18.  /// 模块模型
  19.  /// </summary>
  20.  [Required(ErrorMessage = "×")]
  21.  [Display(Name = "模块模型")]
  22.  public string Model { get; set; }
  23.  /// <summary>
  24.  /// 启用模块
  25.  /// </summary>
  26.  [Required(ErrorMessage = "×")]
  27.  [Display(Name = "启用模块")]
  28.  public bool Enable { get; set; }
  29.  /// <summary>
  30.  /// 说明
  31.  /// </summary>
  32.  [Required(ErrorMessage = "×")]
  33.  [Display(Name = "说明")]
  34.  public string Description { get; set; }
  35.  }
  36. }

既然有模块类，就应该有模块类的数据处理类ModuleRepository，这块功能暂时留在后面来写，先最简单的实现List(bool enable)函数让其能显示模块列表。 

  1. using Ninesky.Models;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. namespace Ninesky.Repository
  5. {
  6.  public class ModuleRepository
  7.  {
  8.  public IQueryable<Module> List(bool enable)
  9.  {
  10.   List<Module> _module = new List<Module>();
  11.   _module.Add(new Module { Name = "新闻模块", Model = "News", Enable = true, Description = "新闻模块" });
  12.   _module.Add(new Module { Name = "文章模块", Model = "Article", Enable = true, Description = "文章模块" });
  13.   return _module.AsQueryable();
  14.  }
  15.  }
  16. }

简单吧。模块功能以后再写吧，先为了添加栏目显示两个固定的模块，
 那么后续我们要在控制器中添加[ManageAdd]action 

  1. [AdminAuthorize]
  2.  public ActionResult ManageAdd()
  3.  {
  4.   ModuleRepository _moduleRsy = new ModuleRepository();
  5.   var _modules = _moduleRsy.List(true);
  6.   List<SelectListItem> _slimodule = new List<SelectListItem>(_modules.Count());
  7.   foreach (Module _module in _modules)
  8.   {
  9.   _slimodule.Add(new SelectListItem { Text = _module.Name, Value = _module.Model });
  10.   }
  11.   ViewData.Add("Model", _slimodule);
  12.   ViewData.Add("Type", TypeSelectList);
  13.   return View();
  14.  }

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

  1. [AdminAuthorize]
  2.  [HttpPost]
  3.  public ActionResult ManageAdd(Category category)
  4.  {
  5.   categoryRsy = new CategoryRepository();
  6.   if (categoryRsy.Add(category))
  7.   {
  8.   Notice _n = new Notice { Title = "添加栏目成功", Details = "您已经成功添加[" + category.Name + "]栏目！", DwellTime = 5, NavigationName = "栏目列表", NavigationUrl = Url.Action("ManageList", "Cayegory") };
  9.   return RedirectToAction("ManageNotice", "Prompt", _n);
  10.   }
  11.   else
  12.   {
  13.   Error _e = new Error { Title = "添加栏目失败", Details = "在添加栏目时，未能保存到数据库", Cause = "系统错误", Solution = Server.UrlEncode("<li>返回<a href='" + Url.Action("ManageAdd", "Cayegory") + "'>添加栏目</a>页面，输入正确的信息后重新操作</li><li>联系网站管理员</li>") };
  14.   return RedirectToAction("ManageError", "Prompt", _e);
  15.   }
  16.  }

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

  1. @model Ninesky.Models.Category
  2. @{
  3.  ViewBag.Title = "ManageAdd";
  4.  Layout = "~/Views/Layout/_Manage.cshtml";
  5. }
  6. <div class="left">
  7.  <div class="top"></div>
  8.  左侧列表
  9. </div>
  10. <div class="split"></div>
  11. <div class="workspace">
  12.  <div class="inside">
  13.  <div class="notebar">
  14.   <img alt="" src="~/Skins/Default/Manage/Images/Category.gif" />添加栏目
  15.  </div>
  16.  @using (Html.BeginForm())
  17.  {
  18.   @Html.ValidationSummary(true)
  19.   <fieldset>
  20.   <legend>栏目</legend>
  21.   <ul>
  22.    <li>
  23.    <div class="editor-label">
  24.     @Html.LabelFor(model => model.Type)
  25.    </div>
  26.    <div class="editor-field">
  27.     @Html.DropDownList("Type")
  28.     @Html.ValidationMessageFor(model => model.Type)
  29.     @Html.DisplayDescriptionFor(model => model.Type)
  30.    </div>
  31.    </li>
  32.    <li>
  33.    <div class="editor-label">
  34.     @Html.LabelFor(model => model.Name)
  35.    </div>
  36.    <div class="editor-field">
  37.     @Html.EditorFor(model => model.Name)
  38.     @Html.ValidationMessageFor(model => model.Name)
  39.     @Html.DisplayDescriptionFor(model => model.Name)
  40.    </div>
  41.    </li>
  42.    <li>
  43.    <div class="editor-label">
  44.     @Html.LabelFor(model => model.ParentId)
  45.    </div>
  46.    <div class="editor-field">
  47.     @Html.EditorFor(model => model.ParentId)
  48.     @Html.ValidationMessageFor(model => model.ParentId)
  49.     @Html.DisplayDescriptionFor(model => model.ParentId)
  50.    </div>
  51.    </li>
  52.    <li id="li_model">
  53.    <div class="editor-label">
  54.     @Html.LabelFor(model => model.Model)
  55.    </div>
  56.    <div class="editor-field">
  57.     @Html.DropDownList("Model")
  58.     @Html.ValidationMessageFor(model => model.Model)
  59.     @Html.DisplayDescriptionFor(model => model.Model)
  60.    </div>
  61.    </li>
  62.    <li id="li_categoryview">
  63.    <div class="editor-label">
  64.     @Html.LabelFor(model => model.CategoryView)
  65.    </div>
  66.    <div class="editor-field">
  67.     @Html.EditorFor(model => model.CategoryView)
  68.     @Html.ValidationMessageFor(model => model.CategoryView)
  69.     @Html.DisplayDescriptionFor(model => model.CategoryView)
  70.    </div>
  71.    </li>
  72.    <li id="li_contentview">
  73.    <div class="editor-label">
  74.     @Html.LabelFor(model => model.ContentView)
  75.    </div>
  76.    <div class="editor-field">
  77.     @Html.EditorFor(model => model.ContentView)
  78.     @Html.ValidationMessageFor(model => model.ContentView)
  79.     @Html.DisplayDescriptionFor(model => model.ContentView)
  80.    </div>
  81.    </li>
  82.    <li id="li_nav">
  83.    <div class="editor-label">
  84.     @Html.LabelFor(model => model.Navigation)
  85.    </div>
  86.    <div class="editor-field">
  87.     @Html.EditorFor(model => model.Navigation)
  88.     @Html.ValidationMessageFor(model => model.Navigation)
  89.     @Html.DisplayDescriptionFor(model => model.Navigation)
  90.    </div>
  91.    </li>
  92.    <li>
  93.    <div class="editor-label">
  94.     @Html.LabelFor(model => model.Order)
  95.    </div>
  96.    <div class="editor-field">
  97.     @Html.EditorFor(model => model.Order)
  98.     @Html.ValidationMessageFor(model => model.Order)
  99.     @Html.DisplayDescriptionFor(model => model.Order)
  100.    </div>
  101.    </li>
  102.    <li>
  103.    <div class="editor-label">
  104.    </div>
  105.    <div class="editor-field">
  106.     <input type="submit" value="添加" />
  107.    </div>
  108.    </li>
  109.   </ul>
  110.   </fieldset>
  111.  }
  112.  </div>
  113. </div>
  114. <div class="clear"></div>
  115. @section Scripts {
  116.  @Scripts.Render("~/bundles/jqueryval")
  117. }

这里给一些<li>添加id属性，实现用户在显示不同的栏目类型的时候显示不同的项目。
 在ManageAdd.cshtml底部添加脚本 

  1. <script type="text/javascript">
  2.  Details();
  3.  $("#Type").change(function () {
  4.  Details();
  5.  });
  6.  function Details() {
  7.  var v = $("#Type").val();
  8.  if (v == "0") {
  9.   $("#li_model").show();
  10.   $("#li_categoryview").show();
  11.   $("#li_contentview").show();
  12.   $("#li_nav").hide();
  13.  }
  14.  else if (v == "1") {
  15.   $("#li_model").hide();
  16.   $("#li_categoryview").show();
  17.   $("#li_contentview").hide();
  18.   $("#li_nav").hide();
  19.  }
  20.  else if (v == "2") {
  21.   $("#li_model").hide();
  22.   $("#li_categoryview").hide();
  23.   $("#li_contentview").hide();
  24.   $("#li_nav").show();
  25.  }
  26.  }
  27. </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相关项，添加

  1.  bundles.Add(new ScriptBundle("~/bundles/EasyUi").Include( 
  2.    "~/Scripts/EasyUi/easyloader.js"));
  3.  
  4. bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));

两项，使该文档看起来如下: 

  1. using System.Web;
  2. using System.Web.Optimization;
  3. namespace Ninesky
  4. {
  5.  public class BundleConfig
  6.  {
  7.  // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725
  8.  public static void RegisterBundles(BundleCollection bundles)
  9.  {
  10.   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  11.    "~/Scripts/jquery-{version}.js"));
  12.   bundles.Add(new ScriptBundle("~/bundles/EasyUi").Include(
  13.    "~/Scripts/EasyUi/easyloader.js"));
  14.   bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
  15.    "~/Scripts/jquery.unobtrusive*",
  16.    "~/Scripts/jquery.validate*"));
  17.   // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
  18.   // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
  19.   bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
  20.    "~/Scripts/modernizr-*"));
  21.   bundles.Add(new StyleBundle("~/Skins/css").Include("~/Skins/Default/Style.css"));
  22.   bundles.Add(new StyleBundle("~/Skins/usercss").Include("~/Skins/Default/User.css"));
  23.   bundles.Add(new StyleBundle("~/Skins/ManageCss").Include("~/Skins/Default/Manage/Style.css"));
  24.   bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
  25.  }
  26.  }
  27. }

这里会用到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类 

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace Ninesky.Models.Ui
  6. {
  7.  /// <summary>
  8.  /// 树形控件数据
  9.  /// </summary>
  10.  public class Tree
  11.  {
  12.  /// <summary>
  13.  /// Id
  14.  /// </summary>
  15.  public int id { get; set; }
  16.  /// <summary>
  17.  /// 文本
  18.  /// </summary>
  19.  public string text { get; set; }
  20.  /// <summary>
  21.  /// 节点状态：'open'或'closed'，默认'open'。
  22.  /// </summary>
  23.  public string state { get; set; }
  24.  /// <summary>
  25.  /// 图标
  26.  /// </summary>
  27.  public string iconCls { get; set; }
  28.  /// <summary>
  29.  /// 子节点
  30.  /// </summary>
  31.  public List<Tree> children { get; set; }
  32.  }
  33. }

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

在底部添加代码 

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

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

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

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

  1. /// <summary>
  2.  /// 栏目列表
  3.  /// </summary>
  4.  /// <param name="model">模型名称</param>
  5.  /// <returns></returns>
  6.  public IQueryable<Category> List(string model)
  7.  {
  8.   return dbContext.Categorys.Where(c => c.Model == model).OrderBy(c => c.Order);
  9.  }
  10.  /// <summary>
  11.  /// 普通栏目树形类表
  12.  /// </summary>
  13.  /// <returns></returns>
  14.  public List<Tree> TreeGeneral()
  15.  {
  16.   var _root = Children(0, 0).Select(c => new Tree { id = c.CategoryId, text = c.Name, iconCls = "icon-general" }).ToList();
  17.   if (_root != null)
  18.   {
  19.   for (int i = 0; i < _root.Count(); i++)
  20.   {
  21.    _root[i] = RecursionTreeGeneral(_root[i]);
  22.   }
  23.   }
  24.   return _root;
  25.  }
  26.  /// <summary>
  27.  /// 普通栏目树形类表递归函数
  28.  /// </summary>
  29.  /// <param name="tree"></param>
  30.  /// <returns></returns>
  31.  private Tree RecursionTreeGeneral(Tree tree)
  32.  {
  33.   var _children = Children(tree.id, 0).Select(c => new Tree { id = c.CategoryId, text = c.Name, iconCls="icon-general" }).ToList();
  34.   if (_children != null)
  35.   {
  36.   
  37.   for (int i = 0; i < _children.Count(); i++)
  38.   {
  39.    _children[i] = RecursionTreeGeneral(_children[i]);
  40.   }
  41.   tree.children = _children;
  42.   }
  43.   return tree;
  44.  }

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

  1. #region json
  2.  [AdminAuthorize]
  3.  public JsonResult JsonTreeParent()
  4.  {
  5.   categoryRsy =new CategoryRepository();
  6.   var _children = categoryRsy.TreeGeneral();
  7.   if (_children == null) _children = new List<Tree>();
  8.   _children.Insert(0, new Tree { id = 0, text = "无",iconCls="icon-general" });
  9.   return Json(_children);
  10.  }
  11.  #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引用 

  1. @section Scripts {
  2.  @Styles.Render("~/EasyUi/icon")
  3.  @Scripts.Render("~/bundles/EasyUi")
  4.  @Scripts.Render("~/bundles/jqueryval")
  5. }

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后，父栏目客户端验证无效了，这个是什么原因，如何解决，知道的朋友不吝赐教！

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！