到官方网站下载最新版本，解压后把代码复制到项目的Scripts文件夹下。
2、添加界面的显示。
在ArticleController中添加Add 方法
/// <summary> /// 添加文章 /// </summary> /// <returns>视图页面</returns> public ActionResult Add() { return View(); }
右键添加Article的强类型视图，代码如下
@section scripts{ <script type="text/javascript" src="https://www.jb51.net/~/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 role="form"> <h4>添加文章</h4> <hr /> @Html.ValidationSummary(true) <div> <label for="CommonModel_CategoryID">栏目</label> <div> <input data-options="url:'@Url.Action("JsonTree", "Category", new { model="Article" })'" /> @Html.ValidationMessageFor(model => model.CommonModel.CategoryID)</div> </div> <div> @Html.LabelFor(model => model.CommonModel.Title, new { @class = "control-label col-sm-2" }) <div> @Html.TextBoxFor(model => model.CommonModel.Title, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.CommonModel.Title) </div> </div> <div> @Html.LabelFor(model => model.Author, new { @class = "control-label col-sm-2" }) <div> @Html.TextBoxFor(model => model.Author, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Author) </div> </div> <div> @Html.LabelFor(model => model.Source, new { @class = "control-label col-sm-2" }) <div> @Html.TextBoxFor(model => model.Source, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Source) </div> </div> <div> @Html.LabelFor(model => model.Intro, new { @class = "control-label col-sm-2" }) <div> @Html.TextAreaFor(model => model.Intro, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Intro) </div> </div> <div> @Html.LabelFor(model => model.Content, new { @class = "control-label col-sm-2" }) <div> @Html.EditorFor(model => model.Content) @Html.ValidationMessageFor(model => model.Content) </div> </div> <div> @Html.LabelFor(model => model.CommonModel.DefaultPicUrl, new { @class = "control-label col-sm-2" }) <div> <img src="" /> @Html.HiddenFor(model => model.CommonModel.DefaultPicUrl) <a>选择…</a> @Html.ValidationMessageFor(model => model.CommonModel.DefaultPicUrl) </div> </div> <div> <div> <input type="submit" value="添加" /> </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 + "https://www.jb51.net/"; //文件名 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 + "https://www.jb51.net/" + DateTime.Now.ToString("yyyy-MM") + "https://www.jb51.net/"; _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接口，添加两个方法，都进行了注释比较容易理解，直接上代码。