ASP.NET MVC5网站开发添加文章（八）

前端技术 2023/09/09 .NET

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

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

2、添加界面的显示。

在ArticleController中添加Add 方法

/// <summary>
  /// 添加文章
  /// </summary>
  /// <returns>视图页面</returns>
  public ActionResult Add()
  {
   return View();
  }

右键添加Article的强类型视图，代码如下

@section scripts{
 <script type=\"text/javascript\" src=\"~/Scripts/KindEditor/kindeditor-min.js\"></script>
 <script type=\"text/javascript\">
  //编辑框
  KindEditor.ready(function (K) {
   window.editor = K.create(\'#Content\', {
    height: \'500px\'
   });
  });
 </script>
}

@model Ninesky.Models.Article
@using (Html.BeginForm())
{ @Html.AntiForgeryToken()
 <div class=\"form-horizontal\" role=\"form\">
  <h4>添加文章</h4>
  <hr />
  @Html.ValidationSummary(true)
  <div class=\"form-group\">
   <label class=\"control-label col-sm-2\" for=\"CommonModel_CategoryID\">栏目</label>
   <div class=\"col-sm-10\">
    <input id=\"CommonModel_CategoryID\" name=\"CommonModel.CategoryID\" data-options=\"url:\'@Url.Action(\"JsonTree\", \"Category\", new { model=\"Article\" })\'\" class=\"easyui-combotree\" style=\"height: 34px; width: 280px;\" />
      @Html.ValidationMessageFor(model => model.CommonModel.CategoryID)</div>
  </div>
  <div class=\"form-group\">
   @Html.LabelFor(model => model.CommonModel.Title, new { @class = \"control-label col-sm-2\" })
   <div class=\"col-sm-10\">
    @Html.TextBoxFor(model => model.CommonModel.Title, new { @class = \"form-control\" })
    @Html.ValidationMessageFor(model => model.CommonModel.Title)
   </div>
  </div>


  <div class=\"form-group\">
   @Html.LabelFor(model => model.Author, new { @class = \"control-label col-sm-2\" })
   <div class=\"col-sm-10\">
    @Html.TextBoxFor(model => model.Author, new { @class = \"form-control\" })
    @Html.ValidationMessageFor(model => model.Author)
   </div>
  </div>

  <div class=\"form-group\">
   @Html.LabelFor(model => model.Source, 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>

  <div class=\"form-group\">
   @Html.LabelFor(model => model.Intro, new { @class = \"control-label col-sm-2\" })
   <div class=\"col-sm-10\">
    @Html.TextAreaFor(model => model.Intro, new { @class = \"form-control\" })
    @Html.ValidationMessageFor(model => model.Intro)
   </div>
  </div>

  <div class=\"form-group\">
   @Html.LabelFor(model => model.Content, new { @class = \"control-label col-sm-2\" })
   <div class=\"col-sm-10\">
    @Html.EditorFor(model => model.Content)
    @Html.ValidationMessageFor(model => model.Content)
   </div>
  </div>

  <div class=\"form-group\">
   @Html.LabelFor(model => model.CommonModel.DefaultPicUrl, new { @class = \"control-label col-sm-2\" })
   <div class=\"col-sm-10\">
    <img id=\"imgpreview\" class=\"thumbnail\" src=\"\" />
    @Html.HiddenFor(model => model.CommonModel.DefaultPicUrl)
    <a id=\"btn_picselect\" class=\"easyui-linkbutton\">选择…</a>
    @Html.ValidationMessageFor(model => model.CommonModel.DefaultPicUrl)
   </div>
  </div>

  <div class=\"form-group\">
   <div class=\"col-sm-offset-2 col-sm-10\">
    <input type=\"submit\" value=\"添加\" class=\"btn btn-default\" />
   </div>
  </div>
 </div>
}

效果如图

3、后台接受的处理。

[ValidateInput(false)]
  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Add(Article article)
  {
   if(ModelState.IsValid)
   {
    //设置固定值
    article.CommonModel.Hits = 0;
    article.CommonModel.Inputer = User.Identity.Name;
    article.CommonModel.Model = \"Article\";
    article.CommonModel.ReleaseDate = System.DateTime.Now;
    article.CommonModel.Status = 99;
    article = articleService.Add(article);
    if (article.ArticleID > 0)
    {
     return View(\"AddSucess\", article);
    }
   }
   return View(article);
  }

在做架构的时候DAL、BLL的base类里有Add方法，我们可以直接使用ArticleService.Add方法添加到数据库

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

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

一、添加附件

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

/// <summary>
  /// 上传附件
  /// </summary>
  /// <returns></returns>
  public ActionResult Upload()
  {
   var _uploadConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration(\"~\").GetSection(\"UploadConfig\") as Ninesky.Models.Config.UploadConfig;
   //文件最大限制
   int _maxSize = _uploadConfig.MaxSize;
   //保存路径
   string _savePath;
   //文件路径
   string _fileParth = \"~/\" + _uploadConfig.Path + \"/\";
   //文件名
   string _fileName;
   //扩展名
   string _fileExt;
   //文件类型
   string _dirName;
   //允许上传的类型
   Hashtable extTable = new Hashtable();
   extTable.Add(\"image\", _uploadConfig.ImageExt);
   extTable.Add(\"flash\", _uploadConfig.FileExt);
   extTable.Add(\"media\", _uploadConfig.MediaExt);
   extTable.Add(\"file\", _uploadConfig.FileExt);
   //上传的文件
   HttpPostedFileBase _postFile = Request.Files[\"imgFile\"];
   if (_postFile == null) return Json(new { error = \'1\', message = \"请选择文件\" });
   _fileName = _postFile.FileName;
   _fileExt = Path.GetExtension(_fileName).ToLower();
   //文件类型
   _dirName = Request.QueryString[\"dir\"];
   if (string.IsNullOrEmpty(_dirName))
   {
    _dirName = \"image\";
   }
   if (!extTable.ContainsKey(_dirName)) return Json(new { error = 1, message = \"目录类型不存在\" });
   //文件大小
   if (_postFile.InputStream == null || _postFile.InputStream.Length > _maxSize) return Json(new { error = 1, message = \"文件大小超过限制\" });
   //检查扩展名
   if (string.IsNullOrEmpty(_fileExt) || Array.IndexOf(((string)extTable[_dirName]).Split(\',\'), _fileExt.Substring(1).ToLower()) == -1) return Json(new { error = 1, message = \"不允许上传此类型的文件。 \\n只允许\" + ((String)extTable[_dirName]) + \"格式。\" });
   _fileParth += _dirName + \"/\" + DateTime.Now.ToString(\"yyyy-MM\") + \"/\";
   _savePath = Server.MapPath(_fileParth);
   //检查上传目录
   if (!Directory.Exists(_savePath)) Directory.CreateDirectory(_savePath);
   string _newFileName = DateTime.Now.ToString(\"yyyyMMdd_hhmmss\") + _fileExt;
    _savePath += _newFileName;
    _fileParth += _newFileName;
   //保存文件
   _postFile.SaveAs(_savePath);
   //保存数据库记录
   attachmentService.Add(new Attachment() { Extension = _fileExt.Substring(1), FileParth = _fileParth, Owner = User.Identity.Name, UploadDate = DateTime.Now, Type = _dirName });
   return Json(new { error = 0, url = Url.Content(_fileParth) });
  }

二、查询附件列表

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

/// <summary>
  /// 查找附件列表
  /// </summary>
  /// <param name=\"modelID\">公共模型ID</param>
  /// <param name=\"owner\">所有者</param>
  /// <param name=\"type\">类型</param>
  /// <returns></returns>
  IQueryable<Models.Attachment> FindList(Nullable<int> modelID, string owner, string type);
  /// <summary>
  /// 查找附件列表
  /// </summary>
  /// <param name=\"modelID\">公共模型ID</param>
  /// <param name=\"owner\">所有者</param>
  /// <param name=\"type\">所有者</param>
  /// <param name=\"withModelIDNull\">包含ModelID为Null的</param>
  /// <returns></returns>
  IQueryable<Models.Attachment> FindList(int modelID, string owner, string type,bool withModelIDNull);

AttachmentService中写现实代码

public IQueryable<Models.Attachment> FindList(Nullable<int> modelID, string owner, string type)
  {
   var _attachemts = CurrentRepository.Entities.Where(a => a.ModelID == modelID);
   if (!string.IsNullOrEmpty(owner)) _attachemts = _attachemts.Where(a => a.Owner == owner);
   if (!string.IsNullOrEmpty(type)) _attachemts = _attachemts.Where(a => a.Type == type);
   return _attachemts;
  }

  public IQueryable<Models.Attachment> FindList(int modelID, string owner, string type, bool withModelIDNull)
  {
   var _attachemts = CurrentRepository.Entities;
   if (withModelIDNull) _attachemts = _attachemts.Where(a => a.ModelID == modelID || a.ModelID == null);
   else _attachemts = _attachemts.Where(a => a.ModelID == modelID);
   if (!string.IsNullOrEmpty(owner)) _attachemts = _attachemts.Where(a => a.Owner == owner);
   if (!string.IsNullOrEmpty(type)) _attachemts = _attachemts.Where(a => a.Type == type);
   return _attachemts;
  }

由于KindEditor文件管理需要从服务器获取json格式文件列表，在Ninesky.Web.Areas.Member.Models中单独给列表格式写个视图模型。AttachmentManagerViewModel

namespace Ninesky.Web.Areas.Member.Models
{
 /// <summary>
 /// KindEditor文件管理中文件视图模型
 /// <remarks>
 /// 创建：2014.03.09
 /// </remarks>
 /// </summary>
 public class AttachmentManagerViewModel
 {
  public bool is_dir{get;set;}
  public bool has_file {get;set;}
  public int filesize {get;set;}
  public bool is_photo{get;set;}
  public string filetype{get;set;}
  public string filename{get;set;}
  public string datetime { get; set; }
 }
}

在AttachmentController添加返回文件列表的方法FileManagerJson。方法供KindEditor的文件管理器调用

/// <summary>
  /// 附件管理列表
  /// </summary>
  /// <param name=\"id\">公共模型ID</param>
  /// <param name=\"dir\">目录（类型）</param>
  /// <returns></returns>
  public ActionResult FileManagerJson(int? id ,string dir)
  {
   Models.AttachmentManagerViewModel _attachmentViewModel;
   IQueryable<Attachment> _attachments;
   //id为null，表示是公共模型id为null，此时查询数据库中没有跟模型对应起来的附件列表（以上传，但上传的文章……还未保存）
   if (id == null) _attachments = attachmentService.FindList(null, User.Identity.Name, dir);
   //id不为null，返回指定模型id和id为null（新上传的）附件了列表
   else _attachments = attachmentService.FindList((int)id, User.Identity.Name, dir, true);
   //循环构造AttachmentManagerViewModel
   var _attachmentList = new List<Models.AttachmentManagerViewModel>(_attachments.Count());
   foreach(var _attachment in _attachments)
   {
    _attachmentViewModel = new Models.AttachmentManagerViewModel() { datetime = _attachment.UploadDate.ToString(\"yyyy-MM-dd HH:mm:ss\"), filetype = _attachment.Extension, has_file = false, is_dir = false, is_photo = _attachment.Type.ToLower() == \"image\" ? true : false, filename = Url.Content(_attachment.FileParth) };
    FileInfo _fileInfo = new FileInfo(Server.MapPath(_attachment.FileParth));
    _attachmentViewModel.filesize = (int)_fileInfo.Length;
    _attachmentList.Add(_attachmentViewModel);
   }
   return Json(new { moveup_dir_path = \"\", current_dir_path = \"\", current_url = \"\", total_count = _attachmentList.Count, file_list = _attachmentList },JsonRequestBehavior.AllowGet);
  }

3、为图片创建缩略图

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

在Ninesky.Common的Picture类中添加方法

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Security.Cryptography;

namespace Ninesky.Common
{
 /// <summary>
 /// 图片相关
 /// <remarks>
 /// 创建：2014.02.11
 /// </remarks>
 /// </summary>
 public class Picture
 {
  /// <summary>
  /// 创建缩略图
  /// </summary>
  /// <param name=\"originalPicture\">原图地址</param>
  /// <param name=\"thumbnail\">缩略图地址</param>
  /// <param name=\"width\">宽</param>
  /// <param name=\"height\">高</param>
  /// <returns>是否成功</returns>
  public static bool CreateThumbnail(string originalPicture, string thumbnail, int width, int height)
  {
   //原图
   Image _original = Image.FromFile(originalPicture);
   // 原图使用区域
   RectangleF _originalArea = new RectangleF();
   //宽高比
   float _ratio = (float)width/height;
   if(_ratio > ((float)_original.Width/_original.Height))
   {
    _originalArea.X =0;
    _originalArea.Width = _original.Width;
    _originalArea.Height = _originalArea.Width / _ratio;
    _originalArea.Y = (_original.Height - _originalArea.Height) / 2;
   }
   else
   {
    _originalArea.Y = 0;
    _originalArea.Height = _original.Height;
    _originalArea.Width = _originalArea.Height * _ratio;
    _originalArea.X = (_original.Width - _originalArea.Width) / 2;
   }
   Bitmap _bitmap = new Bitmap(width, height);
   Graphics _graphics = Graphics.FromImage(_bitmap);
   //设置图片质量
   _graphics.InterpolationMode = InterpolationMode.High;
   _graphics.SmoothingMode = SmoothingMode.HighQuality;
   //绘制图片
   _graphics.Clear(Color.Transparent);
   _graphics.DrawImage(_original, new RectangleF(0, 0, _bitmap.Width, _bitmap.Height), _originalArea, GraphicsUnit.Pixel);
   //保存
   _bitmap.Save(thumbnail);
   _graphics.Dispose();
   _original.Dispose();
   _bitmap.Dispose();
   return true;
  }
 }
}

在AttachmentController添加生成缩略图的action

/// <summary>
  /// 创建缩略图
  /// </summary>
  /// <param name=\"originalPicture\">原图地址</param>
  /// <returns>缩略图地址。生成失败返回null</returns>
  public ActionResult CreateThumbnail(string originalPicture)
  {
   //原图为缩略图直接返回其地址
   if (originalPicture.IndexOf(\"_s\") > 0) return Json(originalPicture);
   //缩略图地址
   string _thumbnail = originalPicture.Insert(originalPicture.LastIndexOf(\'.\'), \"_s\");
   //创建缩略图
   if (Common.Picture.CreateThumbnail(Server.MapPath(originalPicture), Server.MapPath(_thumbnail), 160, 120))
   {
    //记录保存在数据库中
    attachmentService.Add(new Attachment(){ Extension= _thumbnail.Substring(_thumbnail.LastIndexOf(\'.\')+1), FileParth=\"~\"+_thumbnail, Owner= User.Identity.Name, Type=\"image\", UploadDate= DateTime.Now});
    return Json(_thumbnail);
   }
   return Json(null);
  }

三、整合
添加和上传附件都做好了，现在把他们整合到一起，我们就可以上传附件了。

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

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

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

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

//首页图片
   var editor2 = K.editor({
    fileManagerJson: \'@Url.Action(\"FileManagerJson\", \"Attachment\")\'
   });
   K(\'#btn_picselect\').click(function () {
    editor2.loadPlugin(\'filemanager\', function () {
     editor2.plugin.filemanagerDialog({
      viewType: \'VIEW\',
      dirName: \'image\',
      clickFn: function (url, title) {
       var url;
       $.ajax({
        type: \"post\",
        url: \"@Url.Action(\"CreateThumbnail\", \"Attachment\")\",
        data: { originalPicture: url },
        async: false,
        success: function (data) {
         if (data == null) alert(\"生成缩略图失败！\");
         else {
          K(\'#CommonModel_DefaultPicUrl\').val(data);
          K(\'#imgpreview\').attr(\"src\", data);
         }
         editor2.hideDialog();
        }
       });
      }
     });
    });
   });

看下效果

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

完整的Add方法代码

[ValidateInput(false)]
  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Add(Article article)
  {
   if(ModelState.IsValid)
   {
    //设置固定值
    article.CommonModel.Hits = 0;
    article.CommonModel.Inputer = User.Identity.Name;
    article.CommonModel.Model = \"Article\";
    article.CommonModel.ReleaseDate = System.DateTime.Now;
    article.CommonModel.Status = 99;
    article = articleService.Add(article);
    if (article.ArticleID > 0)
    {
     //附件处理
     InterfaceAttachmentService _attachmentService = new AttachmentService();
     //查询相关附件
     var _attachments = _attachmentService.FindList(null, User.Identity.Name, string.Empty).ToList();
     //遍历附件
     foreach(var _att in _attachments)
     {
      var _filePath = Url.Content(_att.FileParth);
      //文章首页图片或内容中使用了该附件则更改ModelID为文章保存后的ModelID
      if ((article.CommonModel.DefaultPicUrl != null && article.CommonModel.DefaultPicUrl.IndexOf(_filePath) >= 0) || article.Content.IndexOf(_filePath) > 0)
      {
       _att.ModelID = article.ModelID;
       _attachmentService.Update(_att);
      }
      //未使用改附件则删除附件和数据库中的记录
      else
      {
       System.IO.File.Delete(Server.MapPath(_att.FileParth));
       _attachmentService.Delete(_att);
      }
     }
     return View(\"AddSucess\", article);
    }
   }
   return View(article);
  }

单纯添加文章比较简单，复杂点在上传附件，浏览新添加的附件，删除文章中未使用的附件及生成缩略图上。KindEditor还支持批量上传附件，由于批量上传使用的swfupload，在提交时flash没传输cookie到服务器，无法验证用户导致上传失败，暂时无法使用批量上传，希望这篇文章可以对大家的学习有所帮助，大家可以结合小编之前发的文章进行学习，相信一定会有所收获。

本文地址：https://www.stayed.cn/item/24229

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)