ASP.NET MVC5网站开发修改及删除文章(十)

上次做了显示文章列表,再实现修改和删除文章这部分内容就结束了,这次内容比较简单,由于做过了添加文章,修改文章非常类似,就是多了一个TryUpdateModel部分更新模型数据。
一、删除文章
由于公共模型跟,文章,附件有关联,所以这里的删除次序很重要,如果先删除模型,那么文章ModelID和附件的ModelID多会变成null,所以要先先删除文章和附件再删除公共模型。

由于公共模型和附件是一对多的关系,我们把删除公共模型和删除附件写在一起。

在BLL的BaseRepository类中有默认的Delete方法,但这个方法中仅删除模型,不会删除外键,所以在CommonModelRepository在new一个出来封印掉默认的方法。

public new bool Delete(Models.CommonModel commonModel, bool isSave = true)
  {
   if (commonModel.Attachment != null) nContext.Attachments.RemoveRange(commonModel.Attachment);
   nContext.CommonModels.Remove(commonModel);
   return isSave ? nContext.SaveChanges() > 0 : true;
  }

这个的意思是封印掉继承的Delete方法,在新的方法中如果存在附加那么先删除附件,再删除公共模型。那么如果我们还想调用基类的Delete方法怎么办?可以用base.Delete。

好了,现在可以开始删除了。

在ArticleController中添加Delete方法

/// <summary>
  /// 删除
  /// </summary>
  /// <param name="id">文章id</param>
  /// <returns></returns>
  public JsonResult Delete(int id)
  {
   //删除附件
   var _article = articleService.Find(id);
   if(_article == null) return Json(false);
   //附件列表
   var _attachmentList = _article.CommonModel.Attachment;
   var _commonModel = _article.CommonModel;
   //删除文章
   if (articleService.Delete(_article))
   {
    //删除附件文件
    foreach (var _attachment in _attachmentList)
    {
     System.IO.File.Delete(Server.MapPath(_attachment.FileParth));
    }
    //删除公共模型
    commonModelService.Delete(_commonModel);
    return Json(true);
   }
   else return Json(false);
  }

二、修改文章
这个部分跟添加文章非常类似
首先在ArticleController中添加显示编辑视图的Edit

/// <summary>
  /// 修改
  /// </summary>
  /// <param name="id"></param>
  /// <returns></returns>
  public ActionResult Edit(int id)
  {
   return View(articleService.Find(id));
  }

右键添加视图,这个跟添加类似,没什么好说的直接上代码

@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',
    uploadJson: '@Url.Action("Upload", "Attachment")',
    fileManagerJson: '@Url.Action("FileManagerJson", "Attachment", new { id = @Model.CommonModel.ModelID })',
    allowFileManager: true,
    formatUploadUrl: false
   });
  //首页图片
   var editor2 = K.editor({
    fileManagerJson: '@Url.Action("FileManagerJson", "Attachment", new {id=@Model.CommonModel.ModelID })'
   });
   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();
        }
       });
      }
     });
    });
   });
  });
 </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;" value="@Model.CommonModel.CategoryID" />
      @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="@Model.CommonModel.DefaultPicUrl" />
    @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>
}

开始做后台接受代码,在ArticleController中添加如下代码。

[HttpPost]
  [ValidateInput(false)]
  [ValidateAntiForgeryToken]
  public ActionResult Edit()
  {
   int _id = int.Parse(ControllerContext.RouteData.GetRequiredString("id"));
   var article = articleService.Find(_id);
   TryUpdateModel(article, new string[] { "Author", "Source", "Intro", "Content" });
   TryUpdateModel(article.CommonModel, "CommonModel", new string[] { "CategoryID", "Title", "DefaultPicUrl" });
   if(ModelState.IsValid)
   {
    if (articleService.Update(article))
    {
     //附件处理
     InterfaceAttachmentService _attachmentService = new AttachmentService();
     var _attachments = _attachmentService.FindList(article.CommonModel.ModelID, User.Identity.Name, string.Empty,true).ToList();
     foreach (var _att in _attachments)
     {
      var _filePath = Url.Content(_att.FileParth);
      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("EditSucess", article);
    }
   }
   return View(article);
  }

详细讲解一下吧:

1、[ValidateInput(false)] 表示不验证输入内容。因为文章内容包含html代码,防止提交失败。

2、[ValidateAntiForgeryToken]是为了防止伪造跨站请求的,也就说只有本真的请求才能通过。

见图中的红线部分,在试图中构造验证字符串,然后再后台验证。

3、public ActionResult Edit()。看这个方法没有接收任何数据,我们再方法中使用TryUpdateModel更新模型。因为不能完全相信用户,比如如果用户构造一个CateggoryID过来,就会把文章发布到其他栏目去。

这个是在路由中获取id参数

再看这两行,略有不同
第一行直接更新article模型。第一个参数是要更新的模型,第二个参数是更新的字段。
第二行略有不同,增加了一个前缀参数,我们看视图生成的代码 @Html.TextBoxFor(model => model.CommonModel.Title 是带有前缀CommonModel的。所以这里必须使用前缀来更新视图。

三、修改文章列表
写完文章后,就要更改文章列表代码用来删除和修改文章。
打开List视图,修改部分由2处。
1、js脚本部分

<script type="text/javascript">
 $("#article_list").datagrid({
  loadMsg: '加载中……',
  pagination:true,
  url: '@Url.Action("JsonList","Article")',
  columns: [[
   { field: 'ModelID', title: 'ID', checkbox: true },
   { field: 'CategoryName', title: '栏目'},
   { field: 'Title', title: '标题'},
   { field: 'Inputer', title: '录入', align: 'right' },
   { field: 'Hits', title: '点击', align: 'right' },
   { field: 'ReleaseDate', title: '发布日期', align: 'right', formatter: function (value, row, index) { return jsonDateFormat(value); } },
   { field: 'StatusString', title: '状态', width: 100, align: 'right' }
  ]],
  toolbar: '#toolbar',
  idField: 'ModelID',
  onDblClickRow: function (rowIndex, rowData) { window.parent.addTab("修改文章", "@Url.Action("Edit","Article")/" + rowData.ModelID, "icon-page"); }
 });
 //查找
 $("#btn_search").click(function () {
  $("#article_list").datagrid('load', {
   title: $("#textbox_title").val(),
   input: $("#textbox_inputer").val(),
   category: $("#combo_category").combotree('getValue'),
   fromDate: $("#datebox_fromdate").datebox('getValue'),
   toDate: $("#datebox_todate").datebox('getValue')
  });
 });

 //修改事件
 function eidt() {
  var rows = $("#article_list").datagrid("getSelections");
  if (!rows || rows.length < 1) {
   $.messager.alert("提示", "请选择要修改的行!");
   return;
  }
  else if (rows.length != 1) {
   $.messager.alert("提示", "仅能选择一行!");
   return;
  }
  else {
   window.parent.addTab("修改文章", "@Url.Action("Edit","Article")/" + rows[0].ModelID, "icon-page");
  }
 }
 //删除
 function del()
 {
  var rows = $("#article_list").datagrid("getSelections");
  if (!rows || rows.length < 1) {
   $.messager.alert("提示", "未选择任何行!");
   return;
  }
  else if (rows.length > 0) {
   $.messager.confirm("确认", "您确定要删除所选行吗?", function (r) {
    if (r) {
     $.messager.progress();
     $.each(rows, function (index, value) {
      $.ajax({
       type: "post",
       url: "@Url.Action("Delete", "Article")",
       data: { id: value.ModelID },
       async: false,
       success: function (data) {
       }
      });
     });
     $.messager.progress('close');
     //清除选择行
     rows.length = 0;
     $("#article_list").datagrid('reload');
    }
   });
   return;
  }
 }
</script>

增加了修改方法、删除方法,在datagrid里添加行双击进入修改视图的方法

onDblClickRow: function (rowIndex, rowData) { window.parent.addTab("修改文章", "@Url.Action("Edit","Article")/" + rowData.ModelID, "icon-page"); }

2、

四、我的文章列表
我的文章列表与全部文章类似,并简化掉了部分内容那个,更加简单,直接上代码了
Article控制器中添加

/// <summary>
  /// 文章列表Json【注意权限问题,普通人员是否可以访问?】
  /// </summary>
  /// <param name="title">标题</param>
  /// <param name="input">录入</param>
  /// <param name="category">栏目</param>
  /// <param name="fromDate">日期起</param>
  /// <param name="toDate">日期止</param>
  /// <param name="pageIndex">页码</param>
  /// <param name="pageSize">每页记录</param>
  /// <returns></returns>
  public ActionResult JsonList(string title, string input, Nullable<int> category, Nullable<DateTime> fromDate, Nullable<DateTime> toDate, int pageIndex = 1, int pageSize = 20)
  {
   if (category == null) category = 0;
   int _total;
   var _rows = commonModelService.FindPageList(out _total, pageIndex, pageSize, "Article", title, (int)category, input, fromDate, toDate, 0).Select(
    cm => new Ninesky.Web.Models.CommonModelViewModel()
    {
     CategoryID = cm.CategoryID,
     CategoryName = cm.Category.Name,
     DefaultPicUrl = cm.DefaultPicUrl,
     Hits = cm.Hits,
     Inputer = cm.Inputer,
     Model = cm.Model,
     ModelID = cm.ModelID,
     ReleaseDate = cm.ReleaseDate,
     Status = cm.Status,
     Title = cm.Title
    });
   return Json(new { total = _total, rows = _rows.ToList() });
  }

  public ActionResult MyList()
  {
   return View();
  }

  /// <summary>
  /// 我的文章列表
  /// </summary>
  /// <param name="title"></param>
  /// <param name="fromDate"></param>
  /// <param name="toDate"></param>
  /// <param name="pageIndex"></param>
  /// <param name="pageSize"></param>
  /// <returns></returns>
  public ActionResult MyJsonList(string title, Nullable<DateTime> fromDate, Nullable<DateTime> toDate, int pageIndex = 1, int pageSize = 20)
  {
   int _total;
   var _rows = commonModelService.FindPageList(out _total, pageIndex, pageSize, "Article", title, 0, string.Empty, fromDate, toDate, 0).Select(
    cm => new Ninesky.Web.Models.CommonModelViewModel()
    {
     CategoryID = cm.CategoryID,
     CategoryName = cm.Category.Name,
     DefaultPicUrl = cm.DefaultPicUrl,
     Hits = cm.Hits,
     Inputer = cm.Inputer,
     Model = cm.Model,
     ModelID = cm.ModelID,
     ReleaseDate = cm.ReleaseDate,
     Status = cm.Status,
     Title = cm.Title
    });
   return Json(new { total = _total, rows = _rows.ToList() }, JsonRequestBehavior.AllowGet);
  }
为MyList右键添加视图
<div id="toolbar">
 <div>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="eidt()">修改</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="del()">删除</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="$('#article_list').datagrid('reload');">刷新</a>
 </div>
 <div class="form-inline">
  <label>标题</label> <input id="textbox_title" class="input-easyui" style="width:280px" />
  <label>添加日期</label>
  <input id="datebox_fromdate" type="datetime" class="easyui-datebox" style="width:120px" /> -
  <input id="datebox_todate" type="datetime" class="easyui-datebox" style="width:120px; " />
  <a href="#" id="btn_search" data-options="iconCls:'icon-search'" class="easyui-linkbutton">查询</a>
 </div>

</div>
<table id="article_list"></table>
<script src="~/Scripts/Common.js"></script>
<script type="text/javascript">
 $("#article_list").datagrid({
  loadMsg: '加载中……',
  pagination:true,
  url: '@Url.Action("MyJsonList", "Article")',
  columns: [[
   { field: 'ModelID', title: 'ID', checkbox: true },
   { field: 'CategoryName', title: '栏目'},
   { field: 'Title', title: '标题'},
   { field: 'Inputer', title: '录入', align: 'right' },
   { field: 'Hits', title: '点击', align: 'right' },
   { field: 'ReleaseDate', title: '发布日期', align: 'right', formatter: function (value, row, index) { return jsonDateFormat(value); } },
   { field: 'StatusString', title: '状态', width: 100, align: 'right' }
  ]],
  toolbar: '#toolbar',
  idField: 'ModelID',
  onDblClickRow: function (rowIndex, rowData) { window.parent.addTab("修改文章", "@Url.Action("Edit","Article")/" + rowData.ModelID, "icon-page"); }
 });
 //查找
 $("#btn_search").click(function () {
  $("#article_list").datagrid('load', {
   title: $("#textbox_title").val(),
   fromDate: $("#datebox_fromdate").datebox('getValue'),
   toDate: $("#datebox_todate").datebox('getValue')
  });
 });

 //修改事件
 function eidt() {
  var rows = $("#article_list").datagrid("getSelections");
  if (!rows || rows.length < 1) {
   $.messager.alert("提示", "请选择要修改的行!");
   return;
  }
  else if (rows.length != 1) {
   $.messager.alert("提示", "仅能选择一行!");
   return;
  }
  else {
   window.parent.addTab("修改文章", "@Url.Action("Edit","Article")/" + rows[0].ModelID, "icon-page");
  }
 }
 //删除
 function del()
 {
  var rows = $("#article_list").datagrid("getSelections");
  if (!rows || rows.length < 1) {
   $.messager.alert("提示", "未选择任何行!");
   return;
  }
  else if (rows.length > 0) {
   $.messager.confirm("确认", "您确定要删除所选行吗?", function (r) {
    if (r) {
     $.messager.progress();
     $.each(rows, function (index, value) {
      $.ajax({
       type: "post",
       url: "@Url.Action("Delete", "Article")",
       data: { id: value.ModelID },
       async: false,
       success: function (data) {
       }
      });
     });
     $.messager.progress('close');
     //清除选择行
     rows.length = 0;
     $("#article_list").datagrid('reload');
    }
   });
   return;
  }
 }
</script>

要注意的是删除文章时删除的次序,修改文章时TryUpdateModel的使用,希望本文对大家的学习有所帮助。

(0)

相关推荐

  • ASP.NET MVC5网站开发我的咨询列表及添加咨询(十二)

    上次把咨询的架构搭好了,现在分两次来完成咨询:1.用户部分,2管理部分.这次实现用户部分,包含两个功能,查看我的咨询和进行咨询. 一.菜单 打开上次添加的ConsultationController控制器,添加Menu action,返回分布视图 /// <summary> /// 菜单 /// </summary> /// <returns></returns> public ActionResult Menu() { return PartialView

  • ASP.NET MVC5网站开发概述(一)

    前段时间一直在用MVC4写个网站开发的demo,由于刚开始学所有的代码都写在一个项目中,越写越混乱,到后来有些代码自己都理不清了.正好看到别人在用MVC5写东西,喜新厌旧的我马上下载了Visual Studio 2013,幸好MVC4到MVC5变化不大,这次准备用MVC5重新写个Demo. 每次看以前写的代码总有把它丢进回收站的冲动,其实没有完美的代码,能解决问题的代码就算是好代码吧,但是我还是决定重新写一个学习的Demo,希望这次能有提高,希望这次能写完吧! 一.开发环境 1.开发环境: Vi

  • ASP.NET MVC5网站开发管理列表、回复及删除(十三)

    一.管理列表 跟上次我的列表相似,直接贴代码了. 首先打开Consultation控制器,添加ManageList方法 /// <summary> /// 咨询管理 /// </summary> /// <returns></returns> public ActionResult ManageList() { return View(); } 添加返回json数据的ManageJsonList public JsonResult ManageJsonLis

  • ASP.NET MVC5网站开发添加文章(八)

    一.添加文章 1.KindEditor富文本编辑器 到官方网站http://kindeditor.net/down.php下载最新版本,解压后把代码复制到项目的Scripts文件夹下. 2.添加界面的显示. 在ArticleController中添加Add 方法 /// <summary> /// 添加文章 /// </summary> /// <returns>视图页面</returns> public ActionResult Add() { retur

  • ASP.NET MVC5网站开发用户登录、注销(五)

    一.创建ClaimsIdentity ClaimsIdentity(委托基于声明的标识)是在ASP.NET Identity身份认证系统的登录时要用到,我们在UserService中来生成它. 1.打开IBLL项目InterfaceUserService接口,添加接口方法ClaimsIdentity CreateIdentity(User user, string authenticationType); 2.打开BLL项目的UserService类,添加CreateIdentity方法的实现代

  • ASP.NET MVC5网站开发用户修改资料和密码(六)

    在上一篇文章网站开发(五)中实现了用户的注销和登录,其实代码里落了点东西,就是用户登录要更新最后一次登录时间和登录IP,这次补上.今天做修改资料和修改密码,TryUpdateModel是新用到的东西. 现完善昨天的登录代码: 一.用户导航菜单 这个就是侧栏的导航,以后所有控制器中action名都为Menu.目标效果如下: 先UserController添加Menu action.直接返回分布视图.右键添加视图 <div class="panel panel-primary">

  • ASP.NET MVC5网站开发项目框架(二)

    前几天算是开题了,关于怎么做自己想了很多,但毕竟没做过项目既不知道这些想法有无必要,也不知道能不能实现,不过邓爷爷说过"摸着石头过河"吧.这段时间看了一些博主的文章收获很大,特别是@kencery,依葫芦画瓢开写. 一.基本框架 还是先说下基本框架吧,一下子搞了7个项目看着挺乱的,我的理解是M.V.C 3者中,M是数据载体,V是用户要看的试图,C主要是协调控制与用户界面相关的操作,而数据的处理,数据库的的操作交给DAL.BLL来做.整个思路就是:View是用户看到的界面:Control

  • ASP.NET MVC5网站开发用户注册(四)

    一.默认Web项目的更改 用户这部分还是自己做,所以删除自动生成的用户相关代码. 二.添加Member区域 在web项目上点右键 添加 区域Member. 添加Home控制器,选择MVC5控制器-空 我们给public ActionResult Index()添加一个视图,代码很简单就是显示下用户名 @{ ViewBag.Title = "会员中心"; } <h2>欢迎你!@User.Identity.Name </h2> 我们先运行一下,出错啦. 这是因为项目

  • MVC4制作网站教程第三章 删除用户组操作3.4

    一.用户 二.用户组 2.1浏览用户组  2.2添加用户组  2.3修改用户组  2.4删除用户组 删除用户组相对简单些,不用单独的页面,直接在浏览页面点击删除时,弹出确认删除对话框,点击确认,用jquery post删除. 打开[UserGroupController],删掉public ActionResult Delele(int GroupId) { return View(); } 修改删除处理Action[Delete(int Id)],修改后的代码 /// <summary> /

  • ASP.NET MVC5网站开发文章管理架构(七)

    一.总体说明 先看一下文章管理设想要实现的功能: 再看一下类图 这里Category是栏目:CommonModel是公共模型:Article是文章:Attachment是附件: CommonModel是内容管理这块抽取出来的公共部分,像文章,咨询甚至产品都有一些共同的内容这里把它单独提取出来作为一个类.CommonModel可能包含一片文章,包含一组附件,包含一系列评论,他们之间的关系类图中已经表示出来.  二.搭建架构 这个顺序根以前一样 1.IDAL 在IDAL添加接口InterfaceCo

随机推荐