桃源资源网

ASP.NET MVC5网站开发添加文章（八）
网络编程 2024/11/15 佚名
3 2

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

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

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

2、添加界面的显示。

在ArticleController中添加Add 方法

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

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

@section scripts{
 <script type="text/javascript" src="/UploadFiles/2021-04-02/kindeditor-min.js">




效果如图


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


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"yyyy-MM-dd HH:mm:ss"), filetype = _attachment.Extension, has_file = false, is_dir = false, is_photo = _attachment.Type.ToLower() == "image" "", 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位置添加脚本


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


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


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


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


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


那么在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();
        }
       });
      }
     });
    });
   });







看下效果


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


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


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


完整的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到服务器，无法验证用户导致上传失败，暂时无法使用批量上传，希望这篇文章可以对大家的学习有所帮助，大家可以结合小编之前发的文章进行学习，相信一定会有所收获。
标签：
ASP.NET,MVC5网站开发,ASP.NET,MVC5添加文章
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“ASP.NET MVC5网站开发添加文章（八）”

暂无“ASP.NET MVC5网站开发添加文章（八）”评论...
www.nqtax.com 桃源资源网
19,905影音资源
44,626技术资源
1,817软件资源
378,645站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
桃源资源网 Design By www.nqtax.com