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

我已经好几天没有时间写信了。今天我有时间写点东西，学点东西。今天的状态也不是很好。写得迷迷糊糊的。序列1，用户2，用户组3，第3.1列，首先添加[CategoryController]控制器。

那么我觉得应该在我的视图中首先显示列类型，应该有一个下拉框，用户可以选择“常规列”、“单页列”和“外部链接”。然后，首先在CategoryController中添加一个属性，返回列类型列表。

#区域属性公共列表选择列表项类型选择列表{ get { ListSelectListItem _ items=new ListSelectListItem()；_ items . add(new selectlistitem { text=category type。普通专栏。tostring()，value=((int) categorytype。一般栏)。ToString()})；_项目。添加(新的selectlistitem { text=category type。单页栏。tostring()，value=((int) categorytype。单页列)。ToString()})；_项目。添加(新的selectlistitem { text=category type。外部链接。tostring()，value=((int) categorytype。外链节)。ToString()})；return _ items}} #endregion其次，用户应该可以选择内容模型。什么是内容模型？

内容模型是可以在此列下添加内容的模型的名称？该模型名称对应于模型中间的模型类。为了更好的表达系统中添加Module的概念。模块是指用于实现系统中相应功能的模块，如新闻模块、文章模块、消息模块、图片模块、产品模块、服务模块等。每个模块对应相应的模型和控制器，以实现设想的功能。系统中预设模块的用户应该能够设置是启用还是禁用。

首先，应该添加内容模型类

使用系统。组件模型。数据注释；Namespaceninesky。models {///summary////content module////summary公共类模块{[key]public int moduleid { get；设置；}///summary////模块名////summary[必选(error message='')][display(Name=' module Name ')]公共字符串Name { get设置；}///summary////module Model////summary[必选(error message='')][display(name=' module Model ')]public string Model { get；设置；}///summary///Enable module////summary[必选(error message='')][display(name=' Enable module ')]public bool Enable { get；设置；}///summary///Description////summary[必选(error message='')][display(name=' Description ')]公共字符串Description { get设置；}}}既然有模块类，就应该有一个ModuleRepository，它是模块类的数据处理类。这个函数暂时稍后再写。首先，以最简单的方式实现List(bool enable)函数，以便它可以显示模块列表。

使用尼尼微。模型；使用系统。集合。通用；使用系统。Linq命名空间Ninesky。存储库{公共类模块位置{公共IQueryableModule List(bool enable){ listmule _ module=new listmule()；_模块。添加(新模块{名称='新闻模块'，型号='新闻'，使能=真，描述='新闻模块' })；_模块。添加(新模块{Name=' article module '，model=' article '，enable=true，description=' article Module ' })；返回模块。AsQueryable()；}}}保持简单。稍后编写模块函数。首先，为了添加列，将显示两个固定模块，然后我们将在控制器中添加[ManageAdd]动作。

[AdminAuthorize]public action result ManageAdd(){ module position _ module sy=new module position()；var _modules=_moduleRsy。列表(真)；ListSelectListItem _ slimodule=新的ListSelectListItem(_modules。count())；foreach(Module _ in _ modules){ _ slim Module。添加(新的SelectListItem { Text=_module。名称，值=_模块。model })；} ViewData。添加(' Model '，_ slim module)；视图数据。添加('类型'，类型选择列表)；返回视图()；}然后添加添加数据处理功能

[AdminAuthorize][httpset]公共操作结果管理器添加(类别类别){ categoryrysy=new categoryrestry()；if (categoryRsy .添加（类别)){通知_n=新通知{标题='添加栏目成功'详细信息='您已经成功添加['类别。名称]栏目!',停留时间=5,导航名称='栏目列表，NavigationUrl=Url .操作(' ManageList '，' Cayegory ')}；返回RedirectToAction('ManageNotice '，' Prompt '，_ n)；} else { Error _e=新错误{ Title='添加栏目失败'详细信息='在添加栏目时，未能保存到数据库因为系统错误，解决方案=服务器UrlEncode('li返回a href=' ' Url .操作(' ManageAdd '，' Cayegory ')添加栏目/a页面，输入正确的信息后重新操作/莉莉联系网站管理员/Li’)}；返回RedirectToAction(' managererror '，' Prompt '，_ e)；} }现在开始做视图部分了。在[管理添加]操作上点右键添加视图，

@模型尼尼微。模型。类别@{视图包标题='经理添加布局=' ~/视图/布局/_管理。“cshtml”；} div class=' left ' div class=' top '/div左侧列表/div class=' split '/div class=' workspace ' div class=' inside ' div class=' notebar ' img alt=' src=' http : ~/Skins/Default/Manage/Images/category。gif '/添加栏目/div/使用(Html .begin inform()){ @ Html .有效性摘要（真)字段集图例栏目/legend ul Li div class=' editor-label ' @ Html .标签(型号=型号.type)/div class=' editor-field ' @ Html .DropDownList('Type') @Html .ValidationMessageFor(model=model .键入)@Html .显示(模型=模型1)的描述.type)/div/Li Li div class=' editor-label ' @ Html .标签(型号=型号.name)/div class=' editor-field ' @ Html .编辑(模型=模型.名称)@Html .ValidationMessageFor(model=model .名称)@Html .显示(模型=模型1)的描述.name)/div/Li Li div class=' editor-label ' @ Html .标签(型号=型号.ParentId)/div class=' editor-field ' @ Html .编辑(模型=模型.ParentId) @Html .ValidationMessageFor(model=model .ParentId) @Html .显示(模型=模型1)的描述.ParentId)/div/Li Li id=' Li _ model ' div class=' editor-label ' @ Html .标签(型号=型号.model)/div class=' editor-field ' @ Html .DropDownList('Model') @Html .ValidationMessageFor(model=model .Model) @Html .显示(模型=模型1)的描述.model)/div/Li Li id=' Li _ categoryview ' div class=' editor-label ' @ Html .标签(型号=型号.CategoryView)/div class=' editor-field ' @ Html .编辑(模型=模型.CategoryView) @Html .ValidationMessageFor(model=model .CategoryView) @Html .显示(模型=模型1)的描述.CategoryView)/div/Li Li id=' Li _ content view ' div class=' editor-label ' @ Html .标签(型号=型号.内容视图)/div class=' editor-field ' @ Html .编辑(模型=模型.ContentView) @Html .ValidationMessageFor(model=model .ContentView) @Html .显示(模型=模型1)的描述.内容视图)/div/Li Li id=' Li _ nav ' div class=' editor-label ' @ Html .标签(型号=型号.导航)/div class=' editor-field ' @ Html .编辑(模型=模型.导航)@Html .ValidationMessageFor(model=model .导航)@Html .显示(模型=模型1)的描述.导航)/div/Li Li div class=' editor-label ' @ Html .标签(型号=型号.order)/div class=' editor-field ' @ Html .编辑(模型=模型.Order) @Html .ValidationMessageFor(model=model .Order) @Html .显示(模型=模型1)的描述.order)/div/Li Li div class=' editor-label '/div class=' editor-field '输入类型='提交'值='添加//div/Li/ul/field set }/div/div class=' clear '/div @ section Scripts { @ Scripts .render(' ~/bundle/jqueryval ')}这里给一些里添加编号属性，实现用户在显示不同的栏目类型的时候显示不同的项目。在ManageAdd.cshtml底部添加脚本

脚本类型=' text/JavaScript ' Details()；$(“# Type”).change(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()；} }/脚本从浏览器中看一下。父栏目这里还有些问题，设想中这里应该是一个下拉框，用户可以选择已存在栏目类型为一般栏目的栏目做父栏目。这里需要下拉树形列表，设想中应该是这个样子，是一个下拉列表和属性列表框的组合框。

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

在已安装的包-全部，选择Jquery Ui点击卸载。

去http://www.jeasyui.com/选在最新版本，在项目的/脚本文件夹中新建易居文件夹，将easyui中的一下文件夹复制到该文件夹。

打开App_Start\BundleConfig.cs，删除jqueryui相关项，添加

捆绑包。添加（新的脚本捆绑包(' ~/bundle/EasyUi ').包含(' ~/Scripts/EasyUi/easyloader。js’)；捆绑包。添加（新的StyleBundle('~/EasyUi/icon ').包含(' ~/Scripts/EasyUi/themes/icon。CSS ')；两项，使该文档看起来如下：

使用系统网络.使用系统。网页优化；命名空间尼尼微公共类BundleConfig { //有关集束的详细信息，请访问http://go.microsoft.com/fwlink/?LinkId=254725公共静态无效注册包(BundleCollection捆绑包){捆绑包.添加（新的脚本包(' ~/bundle/jquery ').包括(' ~/Scripts/jquery-{version}).js’)；捆绑包。添加（新的脚本捆绑包(' ~/bundle/EasyUi ').包含(' ~/Scripts/EasyUi/easyloader。js’)；捆绑包。添加（新的脚本包(' ~/bundles/jqueryval ').包括(' ~/Scripts/jquery。包括* '，' ~/Scripts/jquery。验证* ')；//使用Modernizr的开发版本进行开发和了解信息。然后，当你做好//生产准备时，请使用http://modernizr.com上的生成工具来仅选择所需的测试捆绑包。添加（新的脚本包(' ~/bundle/modernizr ').包括(' ~/Scripts/modernizr-*)；捆绑包。添加（新的StyleBundle('~/Skins/css ').包含(' ~/皮肤/默认/样式。CSS ')；捆绑包。添加（新的StyleBundle('~/Skins/usercss ').包含(' ~/皮肤/默认/用户。CSS ')；捆绑包。添加（新的StyleBundle('~/Skins/ManageCss ').包含(' ~/皮肤/默认/管理/样式。CSS ')；捆绑包。添加（新的StyleBundle('~/EasyUi/icon ').包含(' ~/Scripts/EasyUi/themes/icon。CSS ')；} }}这里会用到easyui的combotree。查阅了官方文档，数据格式为树数据格式每个节点可以包含以下属性： id :节点id，这对加载远程数据很重要文本：节点文本显示状态：节点状态，"打开"或"关闭",默认为"打开"。当设置为"关闭"时，该节点具有子节点，并将从远程站点加载它们检查：指示该节点是否被选中。属性：可以向节点添加自定义属性子节点：数组节点定义了一些子节点

那么在模型文件夹里新家用户界面文件夹，该文件夹用来控件数据相关的模型，添加树类

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.命名空间尼尼微.模特。Ui{ ///summary ///树形控件数据////摘要公共类tree {///summary///Id///summary public int Id { get；设置；} ///摘要///文本////摘要公共字符串文本{获取设置；} ///摘要///节点状态："打开"或关闭，默认打开。////摘要公共字符串状态{获取设置；} ///摘要///图标////摘要公共字符串iconCls { get设置；} ///摘要///子节点////摘要公共列表子级{获取设置；} }}打开~/脚本/易用户界面/主题/图标。半铸钢钢性铸铁(Cast Semi-Steel)文件

在底部添加代码。图标-常规{背景： URL('图标/ns _ general。png ')不-重复！重要；}切记一定记得加！重要的来调整钢性铸铁的优先级易居。会将图标-常规这个类添加在列表项的最后，如果不加这句图标/ns_general.png '图标将不会显示。

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

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

///摘要///栏目列表////summary ///param name='model '模型名称/param /返回/返回公共IQueryableCategory列表(字符串模型){返回dbContext .类别。其中(c=c .模型==模型).订单比(c=c .顺序)；} ///摘要///普通栏目树形类表////summary////returns/returns public listree tree general(){ var _ root=Children(0，0).选择(c=新树{ id=c.CategoryId，text=c.Name，iconCls='icon-general' }).to list()；if (_root！=null){ for(int I=0；i _root .count()；I){ _ root[I]=递归树通用(_ root[I])；} } return _ root} ///摘要///普通栏目树形类表递归函数////summary////param name=' Tree '/param////returns/returns private Tree recursion Tree general(Tree Tree){ var _ Children=Children(Tree。id，0).选择(c=新树{ id=c.CategoryId，text=c.Name，iconCls='icon-general' }).to list()；if(_儿童！=null){ for(int I=0；我_儿童count()；I){ _ children[I]=递归树general(_ children[I])；} tree.children=_ children}返回树；}打开分类控制器，添加一个[JsonTreeParent()]返回可以做父栏目的栏目树列表。

# region JSON[AdminAuthorize]public JsonResult JsonTreeParent(){ categoryrysy=new categoryrestry()；var _children=categoryRsy .树general()；if(_ children==null)_ children=new listree()；_孩子。插入(0,新树{ id=0，文本='无，iconCls=' icon-general ' })；返回JSON(_ children)；} #endregion打开ManageAdd.cshtml，将@Html .编辑(模型=模型.ParentId)改为input id=' ParentId ' type=' text ' class=' easy ui-combo tree ' data-options=' URl : ' @ URl .操作(“JsonTreeParent”、“Category”)”值='0' /。

在@节脚本中减价easyui的脚本和钢性铸铁引用

@节脚本{ @样式。渲染(' ~/EasyUi/icon ')@脚本。渲染(' ~/bundle/EasyUi ')@脚本。渲染(' ~/bundle/jqueryval ')}好的，打开浏览器测试一下

可以正常添加栏目。

今天发现一个问题无论父栏目宣布选什么，提交的ParentId为0,上面"打开ManageAdd.cshtml，将@Html .编辑(模型=模型.ParentId)改为input id=' ParentId ' type=' text ' class=' easy ui-combo tree ' data-options=' URl : ' @ URl .操作(“JsonTreeParent”、“Category”)”值='0' /'这里有问题，应改为：@Html .TextBox('ParentId '，0，new { @ class=' easui-combo tree '，data _ options=' url: ' ' Url .操作(“JsonTreeParent”、“Category”)“”})。

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

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