到这一步，我们整个项目的核心搭建已经算是完成了，接下来就是我们业务功能的实际应用，也就是表现层的设计和实现，如果你是一个项目负责人，到这一步，接下来的工作就可以交给下面的兄弟去完成了，在这里我们用文章管理来详细的讲解一下应用层的搭建、以及数据的加载和分页等。
一、创建控制器和视图
我们在区域BackstageModule下的Controllers文件夹中创建一个名叫ArticleMangeController的控制器，然后通过控制器添视图（Index.cshtml，Form.cshtml），并让其继承PublicController公共控制器，然后我们在ArticleMangeController控制器中创建视图中所需要的方法（数据查询、添加修改、删除），以及业务层（Com_ArticleBll.cs）的业务方法(为了规范，我们尽量把方法写在对应的业务中)。
（1）ArticleMangeController文章控制器
using Bobo.Utilities;
using IA.Business;
using IA.Entity;
using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IA.WebApp.Areas.BackstageModule.Controllers
{
/// <summary>
/// 文章管理控制器
/// </summary>
public class ArticleMangeController : PublicController<Com_Article>
{
//
// GET: /BackstageModule/ArticleMange/
/// <summary>
/// 获取分页数据
/// </summary>
/// <param name="ArticleTitle"></param>
/// <param name="jgp"></param>
/// <returns></returns>
public ActionResult GetTable(string ArticleTitle, string ArticleType, JqGridParam jgp)
{
ArticleTitle = ArticleTitle.Replace(" ", "");
ArticleType = ArticleType.Replace(" ", "");
Com_ArticleBll bll = new Com_ArticleBll();
DataTable model = bll.GetTablePage(ArticleTitle, ArticleType, ref jgp);
//构建分页数据
var JsonData = new
{
success = true,
pageData = jgp,
message = "",
data = model
};
return Content(JsonData.ToJson());
}
/// <summary>
/// 提交表单
/// </summary>
/// <param name="entity"></param>
/// <param name="KeyValue"></param>
/// <returns></returns>
[HttpPost]
[ValidateInput(false)]
public ActionResult SubmitFormData(Com_Article entity, string KeyValue)
{
HttpPostedFileBase PicFile = Request.Files["PicUrl"];
Com_ArticleBll bll = new Com_ArticleBll();
try
{
int IsOk = 0;
string Message = KeyValue == "" ? "新增成功。" : "编辑成功。";
#region 题图处理
bool PicHasFile = PicFile != null && PicFile.ContentLength > 0;
List<string> fileType = ConfigHelper.GetSystemConfig("SystemConfig", "fileUploadPath", "ImageType").ToLower().Split('|').ToList();
string PicName = "";
if (PicHasFile)
{
PicName = Path.GetFileName(PicFile.FileName);
}
if (PicHasFile && !fileType.Contains(Path.GetExtension(PicName).ToLower()))
{
return Content(new JsonMessage { Code = "-1", Success = false, Message = "题图只能上传" + ConfigHelper.GetSystemConfig("SystemConfig", "fileUploadPath", "ImageType").ToLower() + "类型的文件！" }.ToString());
}
if (PicHasFile && CommonHelper.GetInt(SizeHelper.CountSizeNum(PicFile.ContentLength)) > CommonHelper.GetInt(ConfigHelper.GetSystemConfig("SystemConfig", "fileUploadPath", "ImageSize")))
{
return Content(new JsonMessage { Code = "-1", Success = false, Message = "文件大小不能超过" + ConfigHelper.GetSystemConfig("SystemConfig", "fileUploadPath", "ImageSize") + "M！" }.ToString());
}
string PicPath = "/Resource/Article/TitleImage/";
string FilePath = DirFileHelper.WebPathTran(PicPath);
DirFileHelper.CreateDirectory(FilePath);
if (PicFile != null && PicFile.ContentLength > 0)
{
string NewFileName = CommonHelper.GetGuidNotLine() + PicName;
PicFile.SaveAs(FilePath + NewFileName);
entity.PicUrl = PicPath + NewFileName;
}
#endregion
if (!string.IsNullOrEmpty(KeyValue))
{
Com_Article Oldentity = bll.Factory.FindEntity(KeyValue);//获取没更新之前实体对象
entity.Modify(KeyValue);
IsOk = bll.Factory.Update(entity);
this.WriteLog(IsOk, entity, Oldentity, KeyValue, Message);
}
else
{
entity.Create(false);//登录功能做好改为true
IsOk = bll.Factory.Insert(entity);
this.WriteLog(IsOk, entity, null, KeyValue, Message);
}
return Content(new JsonMessage { Success = true, Code = IsOk.ToString(), Message = Message }.ToString());
}
catch (Exception ex)
{
this.WriteLog(-1, entity, null, KeyValue, "操作失败：" + ex.Message);
return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败：" + ex.Message }.ToString());
}
}
/// <summary>
/// 假删方法
/// </summary>
/// <param name="KeyValue"></param>
/// <returns></returns>
public ActionResult DeleteOther(string KeyValue)
{
Com_ArticleBll bll = new Com_ArticleBll();
try
{
int IsOk = 1;
string Message = "删除成功";
if (!string.IsNullOrEmpty(KeyValue))
{
string[] array = KeyValue.Split(',');
foreach (var item in array)
{
Com_Article Oldentity = bll.Factory.FindEntity(item);//获取没更新之前实体对象
Oldentity.DeleteMark = 1;
Oldentity.Modify(item, false);//登录功能做好改为true
IsOk = bll.Factory.Update(Oldentity);
this.WriteLog(IsOk, Oldentity, Oldentity, item, Message);
}
}
else
{
Message = "删除失败";
IsOk = 1;
}
return Content(new JsonMessage { Success = true, Code = IsOk.ToString(), Message = Message }.ToString());
}
catch (Exception ex)
{
this.WriteLog(-1, null, null, KeyValue, "操作失败：" + ex.Message);
return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败：" + ex.Message }.ToString());
}
}
/// <summary>
/// 文章发布
/// </summary>
/// <param name="KeyValue"></param>
/// <returns></returns>
public ActionResult PutArticle(string KeyValue, int State)
{
Com_ArticleBll bll = new Com_ArticleBll();
try
{
int IsOk = 1;
string Message = "操作成功";
if (!string.IsNullOrEmpty(KeyValue))
{
string[] array = KeyValue.Split(',');
foreach (var item in array)
{
Com_Article Oldentity = bll.Factory.FindEntity(item);//获取没更新之前实体对象
Oldentity.PutTime = DateTime.Now;
Oldentity.State = State;
Oldentity.Modify(item, false);//登录功能做好改为true
IsOk = bll.Factory.Update(Oldentity);
this.WriteLog(IsOk, Oldentity, Oldentity, item, Message);
}
}
else
{
Message = "操作失败";
IsOk = 0;
}
return Content(new JsonMessage { Success = true, Code = IsOk.ToString(), Message = Message }.ToString());
}
catch (Exception ex)
{
this.WriteLog(-1, null, null, KeyValue, "操作失败：" + ex.Message);
return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败：" + ex.Message }.ToString());
}
}
}
}
（2）Com_ArticleBll.cs 业务方法
using Bobo.DataAccess;
using Bobo.Repository;
using Bobo.Utilities;
using IA.Entity;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Common;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace IA.Business
{
// <summary>
/// 文章信息表
/// <author>
/// <name>YHB</name>
/// <date>2018.10.18</date>
/// </author>
/// </summary>
public class Com_ArticleBll : RepositoryFactory<Com_Article>
{
/// <summary>
/// 获取文章数据
/// </summary>
/// <param name="ArticleTitle"></param>
/// <param name="jgp"></param>
/// <returns></returns>
public DataTable GetTablePage(string ArticleTitle, string ArticleType, ref JqGridParam jgp)
{
StringBuilder whereSql = new StringBuilder();
List<DbParameter> param = new List<DbParameter>();
whereSql.Append(@" AND DeleteMark<>1");
if (!StringHelper.IsNullOrEmpty(ArticleTitle))
{
whereSql.Append(@" AND ArticleTitle LIKE @ArticleTitle");
param.Add(DbFactory.CreateDbParameter("@ArticleTitle", '%' + ArticleTitle + '%'));
}
if (!StringHelper.IsNullOrEmpty(ArticleType))
{
whereSql.Append(@" AND ArticleType=@ArticleType");
param.Add(DbFactory.CreateDbParameter("@ArticleType", ArticleType));
}
return Factory.FindTablePage(whereSql.ToString(), param.ToArray(), ref jgp);
}
}
}
（3）在实现视图之前，我们需要在区域下的Shared中创建一个分部视图_PartialNav.cshtml存放左边菜单
<div class="center-nav L font-yahei">
<div class="center-nav-title">功能导航</div>
<div class="center-nav-item"><a href="/BackstageModule/JournalMange/Index" class="scgl">素材管理</a></div>
<div class="center-nav-item"><a href="/BackstageModule/PayForMange/Index" class="zfgl">支付管理</a></div>
<div class="center-nav-item"><a href="/BackstageModule/BannerMange/Index" class="gggl">广告管理</a></div>
<div class="center-nav-item"><a href="/BackstageModule/ArticleMange/Index" class="hydt">资讯管理</a></div>
</div>
（4）Index.cshtml视图中的代码：
@{
ViewBag.Title = "管理后台 - 资讯";
Layout = "~/Views/Shared/_LayoutMange.cshtml";
}
<style>
html {
background-color: #f3f4f4;
}
.w_header .header-nav .nav-item li a.wzgl {
border-bottom: 2px solid #2D81E0;
background-color: #E8F4FF;
color: #2D81E0;
font-weight: bold;
}
</style>
<div class="w_center clear mAuto">
@Html.Partial("_PartialNav")
<div class="center-main R">
<h2 class="center-main-title font-yahei">
<span>资讯管理 /</span> <i>management news</i>
</h2>
<div class="center-main-box">
<div class="toolbarBox clear">
<div id="searchForm" class="L searchForm">
<span class="seachTit">文章标题：</span>
<input type="text" id="ArticleTitle" class="seachText" value="" />
<input type="text" id="ArticleType" class="seachText" value="" />
<a id="searchBtn" class="searchBtn" href="javascript:;" title="搜索"></a>
</div>
<div class="toolbar R">
<input type="button" value="添加" class="mainBtn addBtn greenBtn" onclick="showAdd()" />
<input type="button" value="发布" class="mainBtn putBtn yellowBtn" onclick="putBtn(1)" />
<input type="button" value="取消发布" class="mainBtn putBtn blueBtn sxLenth" onclick="putBtn(0)" />
<input type="button" value="删除" class="mainBtn delBtn blueBtn" onclick="delBtn()" />
</div>
</div>
<table class="dataTable" style="100%;">
<thead>
<tr>
<td style="10%;" class="remElem"><input type="checkbox" class="ckbAll " />选定</td>
<td style="40%;" class="tbTit">文章类型</td>
<td style="40%;" class="tbTit">文章标题</td>
<td style="15%;" class="remElem">推荐</td>
<td style="15%;">发布时间</td>
<td style="15%;">操作</td>
</tr>
</thead>
<tbody id="dataBody"></tbody>
</table>
<div id="listPage" class="m_pageBar com_pageBar" style="padding:0 30px;"></div>
</div>
</div>
</div>
@*分页数据模版*@
<script id="tempBody" type="text/template">
{#each data as item}
<tr>
<td style="text-align: center;"><input type="checkbox" class="ckb" data-id="!{item.ArticleID}" onclick="change(this)" /></td>
<td>!{item.ArticleType}</td>
<td><a href="/BackstageModule/ArticleMange/Form?KeyValue=!{item.ArticleID}">!{item.ArticleTitle}</a> </td>
{#if item.OptionSet == 1}
<td style="text-align:center;"><img src="/Content/Images/slice/optionIco.png" width="16" height="16" title="推荐" /></td>
{#else}
<td style="text-align:center;"></td>
{#/if}
{#if item.State==1}
<td style="text-align:center;">!{formatDate(item.PutTime, "yyyy-MM-dd")}</td>
{#else}
<td style="text-align:center;">未发布</td>
{#/if}
<td style="text-align:center;"><a href="/BackstageModule/ArticleMange/Form?KeyValue=!{item.ArticleID}" class="tbBtn tbEdit">编辑</a></td>
</tr>
{#/each}
</script>
@section scripts{
<script type="text/javascript">
var KeyValue = "";
$(function () {
juicer.register('formatDate', formatDate);
getPageData();
searchEvent();
});
//初始化分页函数
function getPageData() {
var param = {
rows: 10,
url: "/BackstageModule/ArticleMange/GetTable",
sidx: "CreateDate",
sord: "DESC",
searchForm: "#searchForm",
infoPanel: '#dataBody',
barPanel: '#listPage',
template: '#tempBody',
callback: handleSuccess
}
Pager.init(param);
}
//查询按钮绑定事件
function searchEvent() {
$("#searchBtn").on("click", function () {
getPageData();
});
}
//添加弹窗
function showAdd() {
window.location = "/BackstageModule/ArticleMange/Form";
}
//删除
function delBtn() {
var allVal = "";
$(".dataTable tbody tr").find(".ckb").each(function () {
var ckb = $(this);
var ckbVal = ckb.prop("checked");
var dataId = ckb.attr("data-id");
if (ckbVal == "checked" || ckbVal == true) {
allVal += (allVal == "" ? dataId : "," + dataId);
}
});
if (allVal == "") {
layer.alert("您没有选中任何项，请选中后再进行操作！", { icon: 0 });
return false;
}
layer.confirm("是否删除这" + allVal.split(",").length + "条数据？", { icon: 0 }, function () {
AjaxJson("/BackstageModule/ArticleMange/DeleteOther", { KeyValue: allVal }, function (data) {
layer.msg(data.Message, { icon: data.Code, time: 1000 }, function () {
Pager.reload();
});
});
});
}
//发布
function putBtn(num) {
var allVal = "";
$(".dataTable tbody tr").find(".ckb").each(function () {
var ckb = $(this);
var ckbVal = ckb.prop("checked");
var dataId = ckb.attr("data-id");
if (ckbVal == "checked" || ckbVal == true) {
allVal += (allVal == "" ? dataId : "," + dataId);
}
});
if (allVal == "") {
layer.alert("您没有选中任何项，请选中后再进行操作！", { icon: 0 });
return false;
}
AjaxJson("/BackstageModule/ArticleMange/PutArticle", { KeyValue: allVal, State: num }, function (data) {
layer.msg(data.Message, { icon: data.Code, time: 1000 }, function () {
Pager.reload();
});
});
}
//分页数据加载后绑定的函数
function handleSuccess() {
checkAll();
}
//全选（包括）
function checkAll() {
//全选按钮
$(".dataTable thead").find(".ckbAll").change(function () {
var chkAll = $(this);
var chkVal = chkAll.prop("checked");
if (chkVal == "checked" || chkVal == true) {
$(".dataTable tbody tr").each(function () {
var chk = $(this).find(":checkbox");
chk.prop("checked", "checked");
});
}
else {
$(".dataTable tbody tr").each(function () {
var chk = $(this).find(":checkbox");
chk.removeAttr("checked");
});
}
});
}
</script>
}
在上面的代码中，我们引用了前面创建好的_LayoutMange.cshtml头尾布局页，还用到了juicer轻量级的模板加载数据以及弹窗，分页操作是自己写的一个m_pager.js方法配合着juicer使用，下面我们看具体代码：
//刷新表格参数
var reloadParam = null;
//是否往前退页；默认为退，传入false时不退页
var isPrevPage = true;
var Pager = function(){
return {
init: function(param){
getList(param);
},
reload: function (IsPrevPage) {
isPrevPage = IsPrevPage;
reloadPage(reloadParam);
}
}
}();
/*初始化需要的参数
param = {
page:目标页码(默认：0或1均可),
rows:每页显示条数(默认：15),
url:请求地址,
sidx:排序字段
sord:排序类型;
onePageShow:数据只有一页时是否显示分页（默认不显示）
searchForm:查询条件所在容器
infoPanel:信息回填容器,
barPanel:分页条回填容器,
template:信息模板容器,
callback:查询到分页数据后执行的回掉函数
noDataCallBack:未查询到分页数据执行的回掉函数
}
*/
function getList(json) {//获取评论列表
var json = json || {};
var target = json.page || 1, //请求页码
aver = json.rows || 15, //每页显示数量，默认15
sidx = json.sidx, //排序字段名
sord = json.sord, //排序类型ASC DESC
url = json.url, //请求URL
onePageShow = json.onePageShow || false,//数据只有一页时是否显示分页（默认不显示）
searchForm = json.searchForm, //查询条件所在容器
infoPanel = json.infoPanel, //回填数据容器
barPanel = json.barPanel, //分页条容器
template = json.template, //模版
callback = json.callback, //加载数据成功后执行的回调函数
noDataCallback = json.noDataCallback; //加载数据为空时的回调函数
//从初始化参数中构建分页请求参数，包括所有JqGridParam参数和查询条件
var requestParam = searchForm ? GetWebControls(searchForm) : {};
requestParam.page = target;
requestParam.rows = aver;
requestParam.sidx = sidx;
requestParam.sord = sord;
var load = layer.msg('正在加载页面数据…', { icon: 16, shade: 0.05, time: 0, area:"210px" });
window.setTimeout(function () {
$.post(url, requestParam, function (d) {
if (d.success) {
if (typeof d.data == 'undefined' || d.data.length == 0) {
var width = $(infoPanel).width() <= 0 ? $(infoPanel).parent().width() : $(infoPanel).width();
$(infoPanel).html('<h4 class="noInfo" style="' + width + 'px">暂无信息</h4>');
$(barPanel).hide();
noDataCallback ? noDataCallback() : null;
} else {
$(barPanel).show();
$(infoPanel).html(juicer($(template).html(), d));
callback ? callback(d) : null;
}
getPage(json, d.pageData, d.data.length, barPanel, getList);
} else {
layer.alert(d.pageData);
}
layer.close(load);
}, "json");
}, 500);
}
/*分页S*/
/*
pageParam 分页参数json
pageParam = {
"records":int, 总数据条数 int
"rows":int, 每页显示条数 int
"page":int, 当前页索引（从0开始）
"total":int, 查询结果的记录总数
"dataLength":int 当前页所包含的记录数
}
*/
function getPage(json, pageParam, dataLength, panel, fn) {
var pageNum = Math.ceil(pageParam.records / pageParam.rows);
var barHtml = "";
var tempHtml = "";
if (pageNum <= 1) {
if (json.onePageShow) {
barHtml = '<div class="L clearfix">
<a href="javascript:;" class="first aElem"><i class="icon_first"></i>首页</a>
<a href="javascript:;" class="prev aElem"><i class="icon_pre"></i>上一页</a>'
+ tempHtml +
'<a href="javascript:;" class="next aElem"><i class="icon_next"></i>下一页</a>
<a href="javascript:;" class="last aElem"><i class="icon_last"></i>尾页</a>
</div>
<p class="page_info R">共 ' + pageNum + ' 页 ' + pageParam.records + ' 条记录 当前显示 第( <em>' + (pageParam.page) + '</em> )页</p>';
}
}
else if (pageNum <= 8) {
for (var i = 1; i <= pageNum; i++) {
if (i == pageParam.page) {
tempHtml += '<a href="javascript:;" class="pageBtn active">' + i + '</a>';
} else {
tempHtml += '<a href="javascript:;" class="pageBtn">' + i + '</a>'
}
}
barHtml = '<div class="L clearfix">
<a href="javascript:;" class="first aElem"><i class="icon_first"></i>首页</a>
<a href="javascript:;" class="prev aElem"><i class="icon_pre"></i>上一页</a>'
+ tempHtml +
'<a href="javascript:;" class="next aElem"><i class="icon_next"></i>下一页</a>
<a href="javascript:;" class="last aElem"><i class="icon_last"></i>尾页</a>
</div>
<p class="page_info R">共 ' + pageNum + ' 页 ' + pageParam.records + ' 条记录 当前显示 第( <em>' + (pageParam.page) + '</em> )页</p>';
} else {
var start = 0;
var end = 0;
if (pageNum <= 8) {
start = 1;
end = pageNum;
} else {
if (pageParam.page <= 1) {
start = 1;
end = 8;
} else if (pageParam.page + 6 <= pageNum) {
start = pageParam.page - 1;
end = pageParam.page + 6;
} else {
start = pageNum - 6;
end = pageNum;
}
}
for (var i = start; i <= end; i++) {
if (i == pageParam.page) {
tempHtml += '<a href="javascript:;" class="pageBtn active">' + i + '</a>';
} else {
tempHtml += '<a href="javascript:;" class="pageBtn">' + i + '</a>'
}
}
barHtml = '<div class="L p_clearfix">
<a href="javascript:;" class="first aElem"><i class="icon_first"></i>首页</a>
<a href="javascript:;" class="prev aElem"><i class="icon_pre"></i>上一页</a>'
+ tempHtml +
'<a href="javascript:;" class="next aElem"><i class="icon_next"></i>下一页</a>
<a href="javascript:;" class="last aElem"><i class="icon_last"></i>尾页</a>
</div>
<p class="page_info R">共 ' + pageNum + ' 页 ' + pageParam.records + ' 条记录 当前显示第(<em>' + (pageParam.page) + '</em>)页</p>';
}
if (!$(panel).hasClass('.m_pageBar')) {
$(panel).addClass('m_pageBar');
}
$(panel).html(barHtml);
//waterfall(".center-ul", ".center-ul-li");
$("a", panel).click(function () {
var now = pageParam.page;
var target = pageParam.page;
if ($(this).text() == (now).toString()) {
return false;
} else if ($(this).hasClass("first")) {
if (now == 1) {
return false;
} else {
target = 1;
}
} else if ($(this).hasClass("last")) {
if (now == pageParam.total) {
return false;
} else {
target = pageParam.total;
}
} else if ($(this).hasClass("prev")) {
if (now == 1) {
return false;
} else {
target = now - 1;
}
} else if ($(this).hasClass("next")) {
if (now == pageNum) {
return false;
} else {
target = now + 1;
}
} else {
var text = parseInt($(this).text());
target = text;
}
json.page = target;
fn(json);
return false;
});
reloadParam = json;
//当前如果是最后一页，并且只有一条记录时，重载参数会指向前一页
//console.info("zuihou" + (json.page == pageNum));
//console.info("jilu" + (dataLength == 1));
if (json.page == pageNum && dataLength == 1) {
isPrevPage ? null : reloadParam.page -= 1;
}
}
/*分页E*/
/*重载当前页*/
function reloadPage() {
getList(reloadParam);
}
/*重载当前页*/
（5）Form.cshtml视图实现，在这个视图中我们主要用到富文本编辑器，对于该编辑器的一些设置（比如代码高亮等），在前篇文章中我们已经详细讲到，同时这个用到了的js方法和验证都在我们之前的前端文件中。下面看看改视图中的代码：
@{
ViewBag.Title = "文章管理 - 添加/编辑";
Layout = "~/Views/Shared/_LayoutMange.cshtml";
}
<style>
.w_header .header-nav .nav-item li a.wzgl {
border-bottom: 2px solid #2D81E0;
background-color: #E8F4FF;
color: #2D81E0;
font-weight: bold;
}
</style>
<div class="w_center clear mAuto center-all">
<div class="center-map-nav font-yahei">
<div class="map-nav-tit L"><i><img src="~/Content/Images/slice/titIco.png" width="9" height="18" /></i><span class="map-nav-name">行业资讯</span><span>-添加/编辑</span></div>
<div class="map-nav-btn R">
<input type="button" value="保存" class="mainBtn addBtn greenBtn" onclick="AcceptClick(0)" />
@*<input type="button" value="发布" class="putBtn blueBtn" onclick="AcceptClick(1)" />*@
<input type="button" value="返回列表" class="mainBtn blueBtn " onclick="GoBack()" />
</div>
</div>
<form id="form1" class="form" action="/BackstageModule/ArticleMange/SubmitFormData" method="post" enctype="multipart/form-data" style="margin: 1px">
<input type="hidden" id="KeyValue" name="KeyValue" />
@*<input type="hidden" id="ArticleType" name="ArticleType" />*@
<input type="hidden" id="State" name="State" value="0" />
<table class="form-table font-yahei">
<tr>
<td colspan="4" class="center-tip">
<p>* 格式规范：正文使用宋体14px，1.5倍行距，小标题文字使用宋体加粗，大于等于14px</p>
<p>* 附件上传：点击编辑器工具栏 → 回形针 <img src="~/Content/Images/slice/attach.png" width="20" height="18" /> 图标</p>
</td>
</tr>
<tr>
<td class="table-title">标题</td>
<td class="table-text"><input type="text" class="txt required" name="ArticleTitle" id="ArticleTitle" datacol="yes" err="标题" checkexpession="NotNull" /></td>
<td class="table-title">类型</td>
<td class="table-text">
<select id="ArticleType" name="ArticleType" class="txt">
<option value="zw">杂文</option>
<option value="tx">图像</option>
<option value="yx">影像</option>
<option value="yy">音乐</option>
<option value="qg">情感</option>
<option value="lx">旅行</option>
</select>
</td>
</tr>
<tr class="remveAB">
<td class="table-title">题图<span style="color:#999;">(用于首页轮播)</span></td>
<td class="table-text">
<div class="PicBox">
<input class="file PicUrl" type="file" name="PicUrl" value="" onchange="SetFileVal($(this))" />
</div>
<input type="text" class="url1 img-url" readonly="readonly" style="display:none;" />
<input type="text" class="url2 img-url" name="PicUrl" id="PicUrl" readonly="readonly" />
</td>
<td class="table-title">选项</td>
<td class="table-text">
<input type="hidden" name="OptionSet" id="OptionSet" value="0" />
<input type="checkbox" class="CheckOptionSet" onchange="CheckOptionSet($(this))" /><span>推荐</span><span style="color:#999;">(用于首页轮播)</span>
</td>
</tr>
<tr>
<td class="table-title">文章来源</td>
<td class="table-text"><input type="text" class="txt" name="Source" id="Source" /></td>
<td class="table-title">发布时间</td>
<td class="table-text"><input type="text" class="txt Wdate" name="PutTime" id="PutTime" onfocus="WdatePicker()" datacol="yes" err="发布时间" /></td>
</tr>
</table>
<div>
<textarea id="ArticleContent" name="ArticleContent" maxlength=2147483647 class="txtArea" datacol="yes" err="文章内容" checkexpession="NotNull" style="99.9%;"></textarea>
</div>
</form>
</div>
@section scripts{
<script src="~/Content/Scripts/ueditor/ueditor.config.js"></script>
<script src="~/Content/Scripts/ueditor/ueditor.all.js"></script>
<script src="~/Content/Scripts/ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="~/Content/Scripts/ueditor/prettify.js"></script>
<script type="text/javascript">
prettyPrint(); //代码高亮
var KeyValue = GetQuery('KeyValue').replace("null", "");//关于我们无内容时为null
var ab = GetQuery('ab');
$(function () {
var ue = UE.getEditor('ArticleContent', { autoFloatEnabled: false, autoHeightEnabled: false });
ue.addListener('ready', function (editor) {
var height = $(window).height(),
tabHeight = $(".form-table").outerHeight();
headHeight = $(".w_header").outerHeight();
footHeight = $(".w_footer").outerHeight();
editToolHeight = $("#edui1_toolbarbox").outerHeight(),
editBottomHeight = $("#edui1_bottombar").outerHeight(),
editHeight = 300;
ue.setHeight(editHeight);
InitWebPage(ue);
});
});
//初始化数据
function InitWebPage(ue) {
if (!!KeyValue) {
$("#KeyValue").val(KeyValue);
InitControl(ue);
}
}
//文件域选择设置
function SetFileVal(elem) {
if (!!elem.val()) {
$(".url1").val(elem.val()).show();
$(".url2").hide();
}
else {
$(".url1").show();
$(".url2").hide();
}
}
//选项推荐
function CheckOptionSet(elem) {
var elemVal = elem.prop("checked");
if (elemVal == "checked" || elemVal == true) {
$("#OptionSet").val(1);
}
else {
$("#OptionSet").val(0);
}
}
//得到一个对象实体
function InitControl(ue) {
AjaxJson("/BackstageModule/ArticleMange/SetForm", { KeyValue: KeyValue }, function (data) {
data.PutTime = formatDate(data.PutTime, "yyyy-MM-dd")
SetWebControls(data, "#form1");
if (!!data.ArticleContent) {
ue.setContent(data.ArticleContent, false);
}
if (data.OptionSet == 1) {
$(".CheckOptionSet").attr("checked", "checked");
}
});
}
//保存按钮
function AcceptClick(num) {
if (!!KeyValue && num != 0) {
$("#State").val(num);
}
//if (num == 1) {
// $("#PutTime").attr("checkexpession", "NotNull");
//}
//else {
// $("#PutTime").removeAttr("checkexpession");
//}
if (!CheckDataValid('#form1', true)) {
return false;
}
//提交表单
$("#form1").ajaxSubmit({
dataType: "json",
beforeSubmit: function () {
layer.msg('正在提交信息，请稍后…', { icon: 16, shade: 0.2, time: 0 });
},
success: function (data) {
if (data.Success) {
layer.closeAll();
if (!!ab) {
window.location = "/BackstageModule/About/Index";
}
else {
window.location = "/BackstageModule/ArticleMange/Index";
}
}
else {
layer.alert(data.Message, { icon: data.Code });
}
}
});
}
//返回列表
function GoBack() {
if (!!ab) {
window.location = "/BackstageModule/About/Index";
}
else {
window.location = "/BackstageModule/ArticleMange/Index";
}
}
</script>
}
到这一步，我们一个文章管理的功能模块就完成啦，下面看看具体效果图：
FORM页面（添加修改）
index效果图：
