ASP.NET MVC5網(wǎng)站開(kāi)發(fā)我的咨詢列表及添加咨詢(十二)
上次把咨詢的架構(gòu)搭好了,現(xiàn)在分兩次來(lái)完成咨詢:1、用戶部分,2管理部分。這次實(shí)現(xiàn)用戶部分,包含兩個(gè)功能,查看我的咨詢和進(jìn)行咨詢。
一、菜單
打開(kāi)上次添加的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>
再打開(kāi)Home/menu視圖
添加分布視圖引用
運(yùn)行一下,在留言器中看下/Member/Home。效果如。
二、我的咨詢
我的咨詢部分用datagrid顯示自己的咨詢列表,datagrid使用詳細(xì)視圖功能,點(diǎn)開(kāi)折疊可以看到詳細(xì)內(nèi)容。
效果是這樣,折疊時(shí):
點(diǎn)開(kāi)后
這是datagrid的擴(kuò)展功能,先要去官網(wǎng)下載jquery-easyui-datagridview.zip,然后把里面的jquery.easyui.datagrid.detailview.js文件放到項(xiàng)目/Scripts文件夾下。
打開(kāi)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">進(jìn)行咨詢</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: '標(biāo)題'}, { field: 'Inputer', title: '咨詢?nèi)?, align: 'right' }, { field: 'ReleaseDate', title: '咨詢?nèi)掌?, align: 'right', formatter: function (value, row, index) { return jsonDateFormat(value); } }, { field: 'StatusString', title: '狀態(tài)', 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("進(jìn)行咨詢", "@Url.Action("Add", "Consultation")", "icon-page"); }); </script>
這段代碼比較長(zhǎng),解釋一下:
<div id="toolbar"> <div> <a href="#" id="btn_add" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">進(jìn)行咨詢</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 是因?yàn)槔锩姘掌诟袷交椒?,json傳過(guò)來(lái)的日期必須格式化后才能正常顯示。
引用~/Scripts/jquery.easyui.datagrid.detailview.js 是datagrid像是視圖必須的。
這個(gè)是初始化datagrid。其中1是使用Common.js中的jsonDateFormater方法格式化日期。2、就是詳細(xì)視圖部分
view: detailview, ??????? detailFormatter: function (rowIndex, rowData) { return '<div class="detail" style="padding:5px 0"></div>'; }
這兩句使用詳細(xì)視圖,并為詳細(xì)視圖添加一個(gè)<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); } });
這段是在行展開(kāi)時(shí)為詳細(xì)視圖的div鏈接到~/Member/Consultation/Index/id視圖
下面來(lái)添加Consultation/Index這個(gè)分布視圖
在控制器中添加Index action 并返回分布視圖
public ActionResult Index(int id) { return PartialView(commonModelService.Find(id).Consultation); }
右鍵添加強(qiáng)類(lèi)型(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 回復(fù)如下</span> <p style="margin-top:8px"> @Model.ReplyContent </p> } </td> </tr> </table>
完工
三、進(jìn)行咨詢
在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中先查詢用戶信息,構(gòu)造一個(gè)CommonModel并傳給視圖
右鍵添加視圖
@model Ninesky.Models.CommonModel @{ ViewBag.Title = "進(jìn)行咨詢"; } @using (Html.BeginForm()) { @Html.AntiForgeryToken() <h4>進(jìn)行咨詢</h4> <hr /> <div class="form-horizontal"> @Html.ValidationSummary(true) <div class="form-group"> <label class = "control-label col-sm-2" >類(lèi)型</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) 公開(kāi) @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> }
與添加文章非常類(lèi)似,下面寫(xiě)接受方法
再次在控制器中添加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中如果驗(yàn)證通過(guò),先查找用戶,并將Article、Attachment設(shè)為null,這是防止用戶偷偷夾帶私貨。然后初始化commonModel的Hits、Inputer等字段并保存。
效果:
我的咨詢實(shí)現(xiàn)了查看我的咨詢和進(jìn)行咨詢兩個(gè)功能,查看使用了datagrid的詳細(xì)視圖。
以上就是我的咨詢列表及添加咨詢的實(shí)現(xiàn)全過(guò)程,希望對(duì)大家的學(xué)習(xí)有所幫助。
- ASP.NET MVC5網(wǎng)站開(kāi)發(fā)管理列表、回復(fù)及刪除(十三)
- ASP.NET MVC5網(wǎng)站開(kāi)發(fā)修改及刪除文章(十)
- ASP.NET MVC5網(wǎng)站開(kāi)發(fā)添加文章(八)
- ASP.NET MVC5網(wǎng)站開(kāi)發(fā)文章管理架構(gòu)(七)
- ASP.NET MVC5網(wǎng)站開(kāi)發(fā)用戶修改資料和密碼(六)
- ASP.NET?MVC5網(wǎng)站開(kāi)發(fā)用戶登錄、注銷(xiāo)(五)
- ASP.NET?MVC5網(wǎng)站開(kāi)發(fā)用戶注冊(cè)(四)
- ASP.NET MVC5網(wǎng)站開(kāi)發(fā)項(xiàng)目框架(二)
- ASP.NET MVC5網(wǎng)站開(kāi)發(fā)概述(一)
- MVC4制作網(wǎng)站教程第三章 刪除用戶組操作3.4
相關(guān)文章
ASP.NET?Core?實(shí)現(xiàn)自動(dòng)刷新JWT?Token
這篇文章主要介紹了ASP.NET?Core?實(shí)現(xiàn)自動(dòng)刷新JWT?Token,通過(guò)增加??refresh_token??,客戶端使用refresh_token去主動(dòng)刷新JWT?Token,下文具體操作過(guò)程需要的小伙伴可以參考一下2022-04-04ASP.NET延遲調(diào)用或多次調(diào)用第三方Web?API服務(wù)
這篇文章介紹了ASP.NET延遲調(diào)用或多次調(diào)用第三方Web?API服務(wù)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10使用?HttpReports?監(jiān)控?.NET?Core?應(yīng)用程序的方法
這篇文章主要介紹了使用?HttpReports?監(jiān)控?.NET?Core?應(yīng)用程序的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03.NET Framework中定時(shí)器timer的單線程與多線程使用講解
這篇文章主要介紹了.NET Framework中定時(shí)器timer的單線程與多線程使用講解,單線程定時(shí)器在性能方面不如多線程,但是可以做到線程安全,需要的朋友可以參考下2016-04-04document.getElementsByName和document.getElementById 在IE與FF中不同
今天在<asp:radiobuttonlist/>中使用教本的的時(shí)候才注意到原來(lái) document.getElementsByName 、document.getElementById 在IE與FF中有著不同實(shí)現(xiàn)。2008-12-12ASP.NET Core 導(dǎo)入導(dǎo)出Excel xlsx 文件實(shí)例
本篇文章主要介紹了ASP.NET Core 導(dǎo)入導(dǎo)出Excel xlsx 文件,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-12-12asp.net String.format中大括號(hào)的加入方法
String.format中大括號(hào)的加入方法,需要的朋友可以參考下。2010-05-05