ASP.NET MVC5网站开发我的咨询列表及添加咨询（十二）_实用技巧

上次把咨询的架构搭好了，现在分两次来完成咨询：1、用户部分，2管理部分。这次实现用户部分，包含两个功能，查看我的咨询和进行咨询。

一、菜单

打开上次添加的ConsultationController控制器，添加Menu action，返回分布视图

/// <summary>
  /// 菜单
  /// </summary>
  /// <returns></returns>
  public ActionResult Menu()
  {
   return PartialView();
  }

右键添视图

<div class="easyui-accordion">
  <div title="咨询管理">
    <ul id="navmenu" class="nav nav-pills nav-stacked">
      <li> <a href="javascript:void()" data-options="'icons':'icon-folder-page','title': '咨询管理', 'href': '@Url.Action("ManageList", "Consultation")'"><span class="glyphicon glyphicon-list"> 咨询管理</span></a></li>
      <li> <a href="javascript:void()" data-options="'icons':'icon-folder-user','title': '我的咨询', 'href': '@Url.Action("MyList", "Consultation")'"><span class="glyphicon glyphicon-list-alt"> 我的咨询</span></a></li>
    </ul>
  </div>
</div>

再打开Home/menu视图

添加分布视图引用

运行一下，在留言器中看下/Member/Home。效果如。

 二、我的咨询

我的咨询部分用datagrid显示自己的咨询列表，datagrid使用详细视图功能，点开折叠可以看到详细内容。

效果是这样，折叠时：

点开后

这是datagrid的扩展功能，先要去官网下载jquery-easyui-datagridview.zip，然后把里面的jquery.easyui.datagrid.detailview.js文件放到项目/Scripts文件夹下。

 打开ConsultationController控制器，添加MyJsonList方法，返回我的咨询的json列表

public JsonResult MyJsonList(int pageIndex = 1, int pageSize = 20)
  {
   int _total;
   var _list = commonModelService.FindPageList(out _total, pageIndex, pageSize, "Consultation", string.Empty, 0, User.Identity.Name, null, null, 0).ToList().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 = _list.ToList() });
  }

再次添加MyList方法，直接返回视图

/// <summary>
  /// 我的咨询
  /// </summary>
  /// <returns></returns>
  public ActionResult MyList()
  {
   return View();
  }

右键为MyList添加视图。

 

@{
 ViewBag.Title = "我的咨询";
}

<div id="toolbar">
 <div>
  <a href="#" id="btn_add" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">进行咨询</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="$('#Consultation_List').datagrid('reload');">刷新</a>
 </div>
</div>

<table id="Consultation_List"></table>

<script src="~/Scripts/Common.js"></script>
<script src="~/Scripts/jquery.easyui.datagrid.detailview.js"></script>
<script type="text/javascript">
 $("#Consultation_List").datagrid({
  loadMsg: '加载中……',
  fitColumns:true,
  pagination: true,
  singleSelect: true,
  url: '@Url.Action("MyJsonList", "Consultation")',
  columns: [[
   { field: 'ModelID', title: 'ID' },
   { field: 'Title', title: '标题'},
   { field: 'Inputer', 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',
  view: detailview,
  detailFormatter: function (rowIndex, rowData) { return '<div class="detail" style="padding:5px 0"></div>'; },
  onExpandRow: function (index, row) {
   var detail = $(this).datagrid('getRowDetail', index).find('div.detail');
   detail.panel({
    height: 160,
    border: false,
    cache: false,
    href: '@Url.Content("~/Member/Consultation/Index")/' + row.ModelID,
    onLoad: function () {
     $('#Consultation_List').datagrid('fixDetailRowHeight', index);
    }
   });
   $('#Consultation_List').datagrid('fixDetailRowHeight', index);
  }
 });

 //添加按钮
 $("#btn_add").click(function () {
  window.parent.addTab("进行咨询", "@Url.Action("Add", "Consultation")", "icon-page");
 });
</script>

这段代码比较长,解释一下：

<div id="toolbar">
 <div>
  <a href="#" id="btn_add" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">进行咨询</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="$('#Consultation_List').datagrid('reload');">刷新</a>
 </div>
</div>

<table id="Consultation_List"></table>

这是datagrid的主题和工具栏。

 

引用~/Scripts/Common.js 是因为里面包含日期格式化方法，json传过来的日期必须格式化后才能正常显示。

引用~/Scripts/jquery.easyui.datagrid.detailview.js 是datagrid像是视图必须的。

这个是初始化datagrid。其中1是使用Common.js中的jsonDateFormater方法格式化日期。2、就是详细视图部分

view: detailview,
        detailFormatter: function (rowIndex, rowData) { return '<div class="detail" style="padding:5px 0"></div>'; }

这两句使用详细视图，并为详细视图添加一个<DIV>

onExpandRow: function (index, row) {
   var detail = $(this).datagrid('getRowDetail', index).find('div.detail');
   detail.panel({
    height: 160,
    border: false,
    cache: false,
    href: '@Url.Content("~/Member/Consultation/Index")/' + row.ModelID,
    onLoad: function () {
     $('#Consultation_List').datagrid('fixDetailRowHeight', index);
    }
   });

这段是在行展开时为详细视图的div链接到~/Member/Consultation/Index/id视图

 

下面来添加Consultation/Index这个分布视图

在控制器中添加Index action 并返回分布视图

public ActionResult Index(int id)
  {
   return PartialView(commonModelService.Find(id).Consultation);
  }

右键添加强类型（Consultation）分布视图

@model Ninesky.Models.Consultation

<table style="width:100%">
 <tr>
  <th>@Html.DisplayNameFor(model => model.Name)</th>
  <td>@Html.DisplayFor(model => model.Name)</td>
  <th>@Html.DisplayNameFor(model => model.IsPublic)</th>
  <td>@Html.DisplayFor(model => model.IsPublic)</td>
 </tr>
 <tr>
  <th>@Html.DisplayNameFor(model => model.QQ)</th>
  <td>@Html.DisplayFor(model => model.QQ)</td>
  <th>@Html.DisplayNameFor(model => model.Email)</th>
  <td>@Html.DisplayFor(model => model.Email)</td>
 </tr>
 <tr>
  <th>@Html.DisplayNameFor(model => model.Content)</th>
  <td colspan="3">@Html.DisplayFor(model => model.Content)</td>
 </tr>
 <tr>
  <td colspan="4">
   @if (Model.ReplyTime != null)
   {
    <span>管理员于：@Model.ReplyTime 回复如下</span>
    <p style="margin-top:8px">
     @Model.ReplyContent
    </p>
   }
  </td>
 </tr>
</table>

完工

 三、进行咨询

在Consultation控制器添加 Add  action

/// <summary>
  /// 添加
  /// </summary>
  /// <returns></returns>
  public ActionResult Add()
  {
   InterfaceUserService _userService = new UserService();
   var _user = _userService.Find(User.Identity.Name);
   CommonModel _cModel = new CommonModel();
   _cModel.Consultation = new Consultation() { Email = _user.Email, IsPublic = true, Name = _user.DisplayName };
   _user = null;
   _userService = null;
   return View(_cModel);
  }

在action中先查询用户信息，构造一个CommonModel并传给视图

右键添加视图

@model Ninesky.Models.CommonModel

@{
 ViewBag.Title = "进行咨询";
}

@using (Html.BeginForm())
{
 @Html.AntiForgeryToken()
 <h4>进行咨询</h4>
 <hr />
 <div class="form-horizontal">
  @Html.ValidationSummary(true)

  <div class="form-group">
   <label class = "control-label col-sm-2" >类型</label>
   <div class="col-sm-10">
    <input id="CategoryID" name="CategoryID" data-options="url:'@Url.Action("JsonComboBox", "Category", new { model = "Consultation" })',valueField:'CategoryID',textField:'Name'" class="easyui-combobox" style="height: 34px; width: 280px;" />
    @Html.ValidationMessageFor(model => model.CategoryID)
   </div>
  </div>

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

  <div class="form-group">
   @Html.LabelFor(model => model.Consultation.IsPublic, new { @class = "control-label col-sm-2" })
   <div class="col-sm-10">
    @Html.RadioButtonFor(model => model.Consultation.IsPublic,true) 公开
    @Html.RadioButtonFor(model => model.Consultation.IsPublic, false) 仅自己查看
    @Html.ValidationMessageFor(model => model.Consultation.IsPublic)
   </div>
  </div>

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

  <div class="form-group">
   @Html.LabelFor(model => model.Consultation.Content, new { @class = "control-label col-sm-2" })
   <div class="col-sm-10">
    @Html.TextAreaFor(model => model.Consultation.Content, new { @class = "form-control" })
    @Html.ValidationMessageFor(model => model.Consultation.Content)
   </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>
}

与添加文章非常类似，下面写接受方法

再次在控制器中添加Add action

[HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Add(CommonModel commonModel)
  {
   if(ModelState.IsValid)
   {
    InterfaceUserService _userService = new UserService();
    var _user = _userService.Find(User.Identity.Name);
    if (commonModel.Article != null) commonModel.Article = null;
    if (commonModel.Attachment != null) commonModel.Attachment = null;
    if (commonModel.DefaultPicUrl != null) commonModel.DefaultPicUrl = null;
    commonModel.Hits = 0;
    commonModel.Inputer = User.Identity.Name;
    commonModel.Model = "Consultation";
    commonModel.ReleaseDate = System.DateTime.Now;
    commonModel.Status = 20;
    commonModel.Consultation.Name = _user.DisplayName;
    _user = null;
    _userService = null;
    commonModel = commonModelService.Add(commonModel);
    if (commonModel.ModelID > 0) return View("AddSucess", commonModel);
   }
   return View(commonModel);
  }

在action中如果验证通过，先查找用户，并将Article、Attachment设为null，这是防止用户偷偷夹带私货。然后初始化commonModel的Hits、Inputer等字段并保存。

效果：

 我的咨询实现了查看我的咨询和进行咨询两个功能，查看使用了datagrid的详细视图。

以上就是我的咨询列表及添加咨询的实现全过程，希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索asp.net
MVC5网站开发
，以便于您获取更多的相关知识。

时间： 2024-08-02 20:21:08

ASP.NET MVC5网站开发我的咨询列表及添加咨询（十二）_实用技巧的相关文章

ASP.NET MVC5网站开发之实现数据存储层功能（三）_实用技巧

数据存储层在项目Ninesky.DataLibrary中实现,整个项目只有一个类Repository. Repository中实现增删改查询等方法供业务逻辑层调用,主要功能如下图: 具体步骤 一.添加实体框架的引用 1.打开解决方案,选择项目Ninesky.DataLibrary,在引用上右键,选择管理NuGet程序包. 在NuGet包管理器中的浏览标签中点击EntityFramework,点击右侧栏的安装按钮. 在搜索框输入EntityFramework.zh-Hans,安装假体中文资源包.

ASP.NET MVC5实现文件上传与地址变化处理（5）_实用技巧

一.上传文件和重复文件处理文件处理的原则是:不在数据库中保存文件,只在数据库中保存文件信息(Hash值等).采取文件的MD5重命名文件在一般情况足够处理文件的重复问题,强迫症倾向则可以考虑将MD5和其他摘要算法结合. public static string Save(HttpPostedFileBase file, string path) { var root = "~/Upload/" + path + "/"; var phicyPath = Hosting

ASP.NET MVC5网站开发咨询管理的架构（十一）_实用技巧

一.总体说明 1.实现功能 2.类图 由于文章部分把大部分类都是实现了,这里仅多了一个Consultation类. 二.创建咨询模型类 在Ninesky.Models项目添加类Consultation(咨询模型),该模型跟Article类似都是CommonModel的扩展.1.添加Consultation类. using System; using System.ComponentModel.DataAnnotations; namespace Ninesky.Models { /// <sum

ASP.NET MVC5网站开发管理列表、回复及删除（十三）_实用技巧

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

ASP.NET MVC5网站开发概述（一）_实用技巧

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

ASP.NET MVC5网站开发用户注册（四）_实用技巧

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

ASP.NET MVC5网站开发修改及删除文章（十）_实用技巧

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

ASP.NET MVC5网站开发文章管理架构（七）_实用技巧

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

ASP.NET MVC5网站开发添加文章（八）_实用技巧

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