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

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

一、菜单

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

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

右键添视图

<div> <div title="咨询管理"> <ul> <li> <a href="javascript:void()" data-options="'icons':'icon-folder-page','title': '咨询管理', 'href': '@Url.Action("ManageList", "Consultation")'"><span> 咨询管理</span></a></li> <li> <a href="javascript:void()" data-options="'icons':'icon-folder-user','title': '我的咨询', 'href': '@Url.Action("MyList", "Consultation")'"><span> 我的咨询</span></a></li> </ul> </div> </div>

再打开Home/menu视图

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

添加分布视图引用

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

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

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

 二、我的咨询

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

效果是这样,折叠时:

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

点开后

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

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

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

打开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> <div> <a href="#" data-options="iconCls:'icon-add',plain:true">进行咨询</a> <a href="#" data-options="iconCls:'icon-reload',plain:true">刷新</a> </div> </div> <table></table> <script src="https://www.jb51.net/~/Scripts/Common.js"></script> <script src="https://www.jb51.net/~/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></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>

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwszp.html