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后,父栏目客户端验证无效了,这个是什么原因,如何解决,知道的朋友不吝赐教!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。