ASP .净MVC5网站开发添加文章（八)

时间：2021-09-08 来源：互联网编辑：宝哥软件园浏览：次

一、添加文章1、KindEditor富文本编辑器

到官方网站http://kindeditor.net/down.php下载最新版本，解压后把代码复制到项目的剧本文件夹下。

2、添加界面的显示。

在文章控制器中添加增加方法

///摘要///添加文章////summary ///returns视图页面/返回公共操作结果add(){ 0返回view()；}右键添加文章的强类型视图，代码如下

@ section Scripts { script type=' text/JavaScript ' src=' http : ~/Scripts/kind editor/kind editor-min。js '/script脚本类型=' text/JavaScript '//编辑框KindEditor.ready(函数(K){窗口。编辑器=K . create(' # Content '，{ height : ' 500 px ' })；});/script } @模型尼尼微.模型。文章@使用(Html .begin inform()){ @ Html .反伪造token()div class=' form-horizontal '角色='form' h4添加文章/h4 hr/@Html .ValidationSummary(true)div class=' form-group ' label class=' control-label col-sm-2 ' for=' common model _ CategoryID '栏目/label div class='col-sm-10 '输入id=' common model _ CategoryID ' name=' common model .CategoryID ' data-options=' URl : ' @ URl .Action('JsonTree '，' Category '，new { model=' Article ' })' class=' measuri-combo tree ' style=' height : 34px；宽度： 280像素；/@Html .ValidationMessageFor(model=model .通用模型。CategoryID)/div/div class=' form-group ' @ Html .标签(型号=型号.CommonModel。Title，new { @ class=' control-label col-sm-2 ' })div class=' col-sm-10 ' @ Html .TextBoxFor(model=model .CommonModel。标题，新的{ @ class=' form-control ' })@ Html .ValidationMessageFor(model=model .通用模型。title)/div/div class=' form-group ' @ Html .标签(型号=型号.作者，new { @ class=' control-label col-sm-2 ' })div class=' col-sm-10 ' @ Html .TextBoxFor(model=model .作者，新的{ @class='form-control' }) @Html .ValidationMessageFor(model=model .作者)/div/div class=' form-group ' @ Html .标签(型号=型号.来源，new { @ class=' control-label col-sm-2 ' })div class=' col-sm-10 ' @ Html .TextBoxFor(model=model .Source，new { @ class=' form-control ' })@ Html .ValidationMessageFor(model=model .source)/div/div class=' form-group ' @ Html .标签(型号=型号.Intro，new { @ class=' control-label col-sm-2 ' })div class=' col-sm-10 ' @ Html .textarefor(model=model .Intro，new { @ class=' form-control ' })@ Html .ValidationMessageFor(model=model .intro)/div/div class=' form-group ' @ Html .标签(型号=型号.内容，新的{ @ class=' control-label col-sm-2 ' })div class=' col-sm-10 ' @ Html .编辑(模型=模型.内容)@Html .ValidationMessageFor(model=model .content)/div/div class=' form-group ' @ Html .标签(型号=型号.CommonModel。DefaultPicUrl，new { @ class=' control-label col-sm-2 ' })div class=' col-sm-10 ' img id=' imgpreview ' class=' thumbnail ' src=' http : '/@ Html .HiddenFor(model=model .通用模型。a id=' BTN _ pic选择' class='测量-链接按钮'选择…/a @Html .ValidationMessageFor(model=model .通用模型。DefaultPicUrl)/div/div class=' form-group ' div class=' col-sm-offset-2 col-sm-10 '输入类型='submit '值='添加BTNBTN默认//div /div /div}效果如图

3、后台接受的处理。

添加文章功能就实现了，但是不能上传附件，不能选择首页图片，不能删除多余的附件。下面就来实现附件功能。

二、附件上传目标可以上传附件（图片，文件等),文件保存到上传目录中，且数据库中保存相应记录，可以浏览文件列表，未使用的附件可以删除记录。

一、添加附件

在附件控制器添加上传()方法，方法方法把文件写入磁盘中把附件的记录也保存到数据库中，中间会用到读取配置文件，见《.Net MVC 网站中配置文件的读写》。

///摘要///上传附件////summary////返回/返回公共操作结果Upload(){ var _ uploadConfig=System .网络。配置。webconfigurationmanager。openwebconfiguration(' ~ ').GetSection('上传配置')作为尼尼微.模特。Config.UploadConfig//文件最大限制int _maxSize=_uploadConfig .MaxSize//保存路径string _ savePath//文件路径string _ file parth=' ~/' _ uploadConfig .路径'/';//文件名string _ fileName//扩展名string _ fileExt//文件类型string _ dirName//允许上传的类型Hashtable extTable=new Hashtable()；可扩展的.添加(' image '，_uploadConfig .ImageExt)；可扩展的.添加(' flash '，_uploadConfig .FileExt)；可扩展的.添加(“媒体”，_uploadConfig .MediaExt)；可扩展的.添加(' file '，_uploadConfig .FileExt)；//上传的文件请求.文件[' IMgfile ']；if (_postFile==null)返回Json(新{错误='1 '，消息='请选择文件' });_fileName=_postFile .文件名；_文件文本=路径GetExtension(_fileName).toLower()；//文件类型_目录名=请求查询字符串[' dir ']；如果(字符串IsNullOrEmpty(_ dirName)){ _ dirName=' image '；} if(！可扩展的.ContainsKey(_dirName))返回Json(new { error=1，message='目录类型不存在' });//文件大小if (_postFile).InputStream==null || _postFile .InputStream。Length _maxSize)返回Json(新{错误=1,消息='文件大小超过限制' });//检查扩展名如果(字符串IsNullOrEmpty(_fileExt) || Array .IndexOf(((字符串)extTable[_dirName]).拆分('，')，_文件扩展名.子串(1)。ToLower())==-1)返回Json(new { error=1，message='不允许上传此类型的文件\n。只允许((字符串)extTable[_dirName])"格式。' });_文件parth=_ DirName/' DateTime .现在。ToString(' yyyy-MM ')'/'；_保存路径=服务器. MapPath(_ file parth)；//检查上传目录if(！目录。存在(_savePath))目录.创建目录(_ SavePath)；字符串_新文件名=日期时间现在。ToString(' yyyyMMdd _ hhmmss ')_文件扩展名；_保存路径=_新文件名；_文件部分=_新文件名//保存文件_postFile .SaveAs(_ savePath)；//保存数据库记录附件服务。添加（新附件(){扩展名=_文件扩展名。子字符串(1),文件部分=_文件部分，所有者=用户。标识。名称，上传日期=日期时间。现在，键入=_ DirName })；返回Json(新{错误=0，url=Url .内容(_ FilePartH)})；}二、查询附件列表

打开接口附件服务接口，添加两个方法，都进行了注释比较容易理解，直接上代码。

///摘要///查找附件列表////summary///param name=' MoDEL id '公共模型ID/param ///param名称='所有者'所有者/param ///param name='type '类型/param///returns/returns IQueryableModels .附件查找列表(Nullableint modelID，字符串所有者，字符串类型);///摘要///查找附件列表////summary///param name=' MoDEL id '公共模型ID/param ///param名称='所有者'所有者/param ///param name='type '所有者/param///param name='带模型idull '包含ModelID为空的/param///returns/returns IQueryableModels .附件查找列表（整数模型标识、字符串所有者、字符串类型、带模型标识的布尔值);附件服务中写现实代码

公共IQueryableModels .附件查找列表(Nullableint modelID，字符串所有者，字符串类型){ var _ attachments=current pository .实体。其中(a=a .模型id==模型id)；if(！字符串IsNullOrEmpty(所有者))_ attachemts=_ attachemts .其中(a=a .所有者==所有者)；if(！字符串IsNullOrEmpty(type))_ attachments=_ attachments .其中(a=a . Type==Type)；return _ attachemts }公共IQueryableModels .附件查找列表(int modelID，字符串所有者，字符串类型，带模型idull的bool){ var _ attachments=当前位置.实体；if(带model dinull)_ attachments=_ attachments .其中(a=a . MoDEL id==MoDEL id | | a . MoDEL id==null)；else _ attachemts=_ attachemts .其中(a=a . MoDEL id==MoDEL id)；if(！字符串IsNullOrEmpty(所有者))_ attachemts=_ attachemts .其中(a=a .所有者==所有者)；if(！字符串IsNullOrEmpty(type))_ attachments=_ attachments .其中(a=a . Type==Type)；return _ attachemts }由于KindEditor文件管理需要从服务器获取json格式文件列表，在尼尼微。网络。区域。成员。模型中单独给列表格式写个视图模型附件管理器视图模型

命名空间尼尼微.网络。区域。会员。模型{///摘要////种类编辑器文件管理中文件视图模型///备注///创建：2014 .03 .09////备注////摘要公共类AttachmentManagerViewModel { public bool is _ dir { get；设置；}公共bool有_文件{ get设置；} public int filesize { get设置；} public bool is _ photo { get设置；}公共字符串文件类型{ get设置；}公共字符串文件名{获取设置；}公共字符串datetime { get设置；} }}在附件控制器添加返回文件列表的方法文件管理器Json。方法供KindEditor的文件管理器调用

///摘要///附件管理列表////summary ///param name='id '公共模型ID/param ///param名称='dir '目录（类型)/param////返回/返回公共操作结果FileManagerJson(int？id，字符串目录){模型AttachmentManagerViewModel _ attachmentViewModel；IQueryableAttachment _ attachments；//id为null，表示是公共模型编号为null，此时查询数据库中没有跟模型对应起来的附件列表（以上传，但上传的文章……还未保存)if(id==null)_ attachmentService=attachmentService .查找列表（空，用户。身份。姓名，目录);//id不为null，返回指定模型编号和编号为null(新上传的)附件了列表else _ attachments=attachmentService .查找列表((整数)标识，用户。身份。姓名，目录，真实);//循环构造附件管理器视图模型变量_附件列表=新列表模型附件管理器视图模型(_附件.count())；foreach(var _ attachment in _ attachmentViewModel){ _ attachmentViewModel=new Models .AttachmentManagerViewModel(){ datetime=_ attachment .上传日期。ToString(' yyyy-MM-DD hh :MM 3360s ')，filetype=_attachment .扩展名，has_file=false，is_dir=false，is_photo=_attachment .打字。ToLower()=='image '？true : false，文件名=Url .内容(_附件. file parth)}；文件信息=新文件信息（服务器MapPath(附件.文件parth))；_ attachmentviewmodel。文件大小=(int)_ FileInfo .长度；_附件列表添加(_ attachmentViewModel)；}返回Json(new { moveup_dir_path=' '，current_dir_path=' '，current_url=' '，total_count=_attachmentList .Count，file_list=_attachmentList }，JsonRequestBehavior .允许get)；}3、为图片创建缩略图

把创建缩略图的方法写着普通项目中

在尼尼微。普通的画类中添加方法

使用系统；使用系统。集合。通用；使用系统Linq .使用系统。文字；使用系统。线程化。任务；使用系统。绘图；使用系统。绘图。绘图2D；使用系统。安全。密码学；命名空间尼尼微.常用{ ///summary ///图片相关///备注///创建：2014 .02 .11////备注////总结公开课图片{ ///总结///创建缩略图////summary///param name='原始图片'原图地址/param ///param名称='缩略图'缩略图地址/param ///param name='width '宽/param ///param name='height '高/param /返回是否成功/返回公共静态bool创建缩略图(字符串原始图片、字符串缩略图、int宽度、int高度){ //原图图像_原始=图像. FromFile(原始图片);//原图使用区域RectangleF _ origin larea=new RectangleF()；//宽高比float _ratio=(浮动)宽度/高度；if(_ ratio)((float)_ original).宽度/_原始。高度)){ _ originalArea .x=0；_ originalArea .宽度=_原始。宽度；_ originalArea .高度=_ originalArea .width/_ ratio；_ originalArea .y=(_原件.身高-_ origin larea .高度)/2;} else { _ originalArea .y=0；_ originalArea .高度=_原始。身高；_ originalArea .宽度=_ originalArea .高度* _比率；_ originalArea .x=(_原件.宽度-原点larea .宽度)/2;}位图_位图=新位图（宽度、高度);图形_图形=图形来自IMage(位图);//设置图片质量_图形。插值模式=插值模式。高；_图形。平滑模式=平滑模式。高质量；//绘制图片_图形。清晰（颜色。透明);_图形绘制图像(原始，新矩形F(0，0，_位图。宽度，_位图。高度)_ originalArea，GraphicsUnit .像素);//保存_位图。保存（缩略图);_图形dispose()；_原件dispose()；_位图dispose()；返回真；} }}在附件控制器添加生成缩略图的行为

///摘要///创建缩略图////summary///param name='原始图片'原图地址/param /返回缩略图地址。生成失败返回null/返回公共行动结果创建缩略图(字符串originalPicture) { //原图为缩略图直接返回其地址if(原始图片.索引Of('_s') 0)返回Json(原图)；//缩略图地址字符串缩略图=原始图片.插入（原始图片. LastIndexOf(' . ')，' _ s ')；//创建缩略图if (Common .图片。创建缩略图（服务器。地图路径（原始图片),服务器MapPath(缩略图),160,120)) { //记录保存在数据库中附件服务。添加（新附件(){扩展名=_缩略图子字符串(缩略图. LastIndexOf(' . ')1)、文件部分=' ~ ' _缩略图，所有者=用户。标识。名称，类型='图像，上传日期=日期时间. now })；返回Json(_缩略图);}返回JSON(null)；}三、整合添加和上传附件都做好了，现在把他们整合到一起，我们就可以上传附件了。

打开增加视图，在创建KindEditor位置添加脚本

现在打开浏览器就可以上传和管理附件了

添加文章的最后一个字段是文章的默认首页图片，我希望点击选择按钮，可以在已上传中选择图片，并创建缩略图。

那么在增加视图里再弹出一个文件空间让用户选择已上传的文件，用户选择后讲选择的地址发送到服务器创建缩略图，并返回缩略图地址，然后将地址复制给隐藏表单，CommonModel_DefaultPicUrl，同事复制个img /的科学研究委员会属性用来显示图片Js。代码如下：

//首页图片var编辑器2=k . editor({ FileManagerjs : ' @ URl .操作(' FileManagerJson '，'附件')' })；K('#btn_picselect ').单击(函数(){编辑器2。loadplugin('文件管理器')，function(){ editor 2。插件。文件管理器日志({ viewtype : ' VIEW '，dirName: 'image ')，单击Fn:函数(url，title){ var URL；$.ajax({ type: 'post '，url: ' @ Url .操作(“创建缩略图”、“附件”)，数据： {原始图片： url }，async: false，成功：函数（数据){ if(数据==null)警报('生成缩略图失败!');else { K(' # common model _ DefaultPicUrl ').val(数据);K('#imgpreview ').attr('src '，数据);}编辑器2。HideDialog()；} });} });});});看下效果

在保存文章的行为中删除未使用的附件

完整的增加方法代码

[ValidateInput(false)]is valid){//设置固定值文章普通型号。命中数=0；文章。公共模型。输入者=用户。身份。姓名；文章普通型号。Model=" Article文章。公共模型。发布日期=系统。日期时间。现在；文章CommonModel .status=99 article=article ServiCe .添加（条款);如果(文章ArticleID 0) { //附件处理接口附件服务_附件服务=新附件服务()；//查询相关附件var _ attachments=_ attachmentService .查找列表（空，用户。身份。姓名，字符串。空的)。to list()；//遍历附件foreach(var _ att in _ attachments){ var _ file path=URl .内容(_att .文件parth)；//文章首页图片或内容中使用了该附件则更改ModelID为文章保存后的ModelID if((文章CommonModel .DefaultPicUrl！=空文章普通型号。defaultpicurl。indexof(_文件路径)=0)| | article .内容。IndexOf(_文件路径)0){ _ att .ModelID=文章模型标识_附件服务更新(_ att)；} //未使用改附件则删除附件和数据库中的记录else {系统。输入输出文件。删除（服务器MapPath(_att .文件parth))；_附件服务。删除(_ att)；} }返回视图(' addsuccess '，文章);} }返回视图（文章);}单纯添加文章比较简单，复杂点在上传附件，浏览新添加的附件，删除文章中未使用的附件及生成缩略图上KindEditor。还支持批量上传附件，由于批量上传使用的swfupload，在提交时闪光没传输甜饼干到服务器，无法验证用户导致上传失败，暂时无法使用批量上传，希望这篇文章可以对大家的学习有所帮助，大家可以结合小编之前发的文章进行学习，相信一定会有所收获。

ASP .净MVC5网站开发添加文章（八)

新天龙八部

热门手游排行榜