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.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的详细视图。

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