一、前台代码和js代码：
"javascript:void(0)" id="addInfo">添加
@if (ViewData["NewsList"] != null)
{
"100%">
编号
标题
作者
时间
详细
删除
修改
@foreach (NewsInfo newInfo in (List)ViewData["NewsList"])
{
@newInfo.Id
@newInfo.Title
@newInfo.Author
@newInfo.SubDateTime
"javascript:void(0)" class="details" ids="@newInfo.Id">详细
"javascript:void(0)" class="deletes" ids="@newInfo.Id">删除
"javascript:void(0)" class="alters" ids="@newInfo.Id">修改
}
//自定义页码条
class="paginator">@YpfMVCHtmlPaging.ShowPageNavigate(this.Html, ViewBag.currentPage, ViewBag.pageSize, ViewBag.totalCount)
}
else
{
暂无数据
}
"detailDiv">
标题
"title">
作者
"author">
时间
"subDateTime">
内容
"msg">
"addTailDiv" style="overflow: hidden">
"editInfoDiv" style="overflow: hidden">
在这个页面中我们将“新闻分页展示”，“新闻添加”，“新闻修改”，“新闻删除”全部放在一个页面中，当然“添加”和“修改”我们使用iframe进行展示。
二、前台代码分析：
1、新闻分页展示
采用了前台table布局+后台viewData数据传输方式显示。并且采用了自定义的mvc分页控件。
1-1、自定义mvc分页控件代码
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace System.Web.Mvc { public static class YpfMVCHtmlPaging { ////// 分页控件---自定义YPF /// /// this.Html /// 当前页码 /// 每页容量 /// 总条数 /// public static MvcHtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount) { var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath;//获取当前页面的url地址不包括参数 pageSize = pageSize == 0 ? 3 : pageSize;//默认3页 var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数 var output = new StringBuilder(); if (totalPages > 1) { //if (currentPage != 1) {//处理首页连接 output.AppendFormat("首页 ", redirectTo, pageSize); } if (currentPage > 1) {//处理上一页的连接 output.AppendFormat("上一页 ", redirectTo, currentPage - 1, pageSize); } else { // output.Append("上一页"); } output.Append(" "); int currint = 5; for (int i = 0; i <= 10; i++) {//一共最多显示10个页码，前面5个，后面5个 if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages) { if (currint == i) {//当前页处理 //output.Append(string.Format("[{0}]", currentPage)); output.AppendFormat("{3} ", redirectTo, currentPage, pageSize, currentPage); } else {//一般页处理 output.AppendFormat("{3} ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint); } } output.Append(" "); } if (currentPage < totalPages) {//处理下一页的链接 output.AppendFormat("下一页 ", redirectTo, currentPage + 1, pageSize); } else { //output.Append("下一页"); } output.Append(" "); if (currentPage != totalPages) { output.AppendFormat("末页 ", redirectTo, totalPages, pageSize); } output.Append(" "); } output.AppendFormat("第{0}页 / 共{1}页", currentPage, totalPages);//这个统计加不加都行 return MvcHtmlString.Create(output.ToString()); } } }
分页控件样式表
body { } .paginator { font: 12px Arial, Helvetica, sans-serif; padding: 10px 20px 10px 0; margin: 0px; } .paginator a { border: solid 1px #ccc; color: #0063dc; cursor: pointer; text-decoration: none; } .paginator a:visited { padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none; } .paginator .cpb { border: 1px solid #F50; font-weight: 700; color: #F50; background-color: #ffeee5; } .paginator a:hover { border: solid 1px #F50; color: #f60; text-decoration: none; } .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover { float: left; height: 16px; line-height: 16px; min-width: 10px; _width: 10px; margin-right: 5px; text-align: center; white-space: nowrap; font-size: 12px; font-family: Arial,SimSun; padding: 0 3px; }
2、新闻详细页
这里我们将详细页套入了easyUi的对话框效果。将异步获取到的数据在对话框效果中进行展示。
注意：①由于返回的数据是json格式，那么它会将时间数据进行格式转换“/Date(1354648740000)/”，我们想要得到原来的日期格式则需要调用下这个 function ChangeDateFormat(cellval)函数即可。
②新闻内容中由于我们使用了js富文本控件，所以里面的内容会有html标签，那么我们只需要将“ $("#msg").html(data.Msg);”而不是将“ $("#msg").text(data.Msg);”
3、新闻添加页
我们将新闻添加页面采用iframe方式单独放在一个页面中。在这个页面我们继续使用了easyUI的对话框样式。
注意：我们在对话框中显示的是另外一个页面内容，也可以看成是当前页面的子页面。当我们点击“添加”按钮的时候，就是在当前页面去提交子页面的表单内容。那么这里我就用到了在当前页面调用子页面的表单提交事件。下面这段js代码就是在当前页面调用子页面的表单提交函数（subForm）！
var childWindow = $("#AddFrame")[0].contentWindow;
childWindow.subForm();
添加页面我们主要采用了第三方的富文本控件，下面是具体代码：
"viewport" content="width=device-width" />
添加新闻
"~/Content/themes/tableStyle.css" rel="stylesheet" />
"stylesheet" href="/KinderEditor/themes/default/default.css" />
"stylesheet" href="/KinderEditor/plugins/code/prettify.css" />
"~/Content/themes/icon.css" rel="stylesheet" />
"~/Content/themes/default/easyui.css" rel="stylesheet" />
@using (Ajax.BeginForm("addNewsInfo", "AdminNewsList", new AjaxOptions()
{
HttpMethod = "post",
OnSuccess = "afterAdd"
}, new { id = "addForm" }))
{
新闻名称
"text" id="Title" name="Title" />
作者
"text" id="Author" name="Author" />
上传图片
"file" name="fileUpImage" id="fileUpImage" />
"button" value="上传" id="btnFileUp">
"hidden" id="hidImage" name="ImagePath" />
"menuIconShow">
新闻内容
}
注意：
①富文本引用：引用它所需要的js和css。
"stylesheet" href="/KinderEditor/themes/default/default.css" />
"stylesheet" href="/KinderEditor/plugins/code/prettify.css" />
js中进行调用富文本，需要注意的是文本域Id。
②在这个富文本控件里面使用到了图片上传功能。那么我们的项目必须要引用该图片上传所需要的“LitJSON.dll”这个类库。
③这个表单我们采用的是mvc的异步表单提交方式。那么我们就必须要引用js代码。
在异步表单提交成功的回调函数。我们的原理是：当表单提交成功后，就调用父页面的关闭按钮函数，并且调用easyUI的消息显示功能。
子页面调用父页面函数：
window.parent.IndexAddAfter();
④我们自定义的图片上传功能。
原理：图片上传我们使用了异步的方式提交表单内容，将提交的内容进行类型、大小等判断后存入文件中，然后返回其存储的物理路径。并在标签中显示。
异步表单提交js。
//js中调用异步函数 $(function () { //图片上传 $("#btnFileUp").click(function () { fileUpLoad(); }); }); //+图片上传 function fileUpLoad() { if ($("#fileUpImage").val() == "") { $.messager.alert("提示：", "请选择上传图片！", "info"); return; } //异步的ajax表单提交--图片上传 $("#addForm").ajaxSubmit({ type: 'post', url: '/AdminNewsList/FileUpload', success: function (data) { var serverData = data.split(':'); if (serverData[0] == "ok") { $("#hidImage").attr("value", serverData[1]);//将服务端返回的图片路径赋给隐藏域 $("#menuIconShow").append(""); } else { $.messager.alert("提示", "图片上传错误!"); } } }); }
异步上传的后台代码：
#region 图片上传 ////// 图片上传 /// /// public ActionResult FileUpload() { HttpPostedFileBase hpfb = Request.Files["fileUpImage"]; //我们可以对上传的文件进行各种判断。大小、类型等等。 if (hpfb == null) { return Content("no:请选择上传文件!"); } else { string fileName = Path.GetFileName(hpfb.FileName);//获取文件名称 string fileExc = Path.GetExtension(hpfb.FileName);//获取文件扩展名 if (fileExc == ".jpg") { string dirPath = "/ImagesPath" + "/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/"; Directory.CreateDirectory(Server.MapPath(dirPath));//创建保存图片文件夹--根据虚拟路径获得文件在磁盘的物理路径 string newFileName = Guid.NewGuid().ToString();//新文件名 string newFilePath = dirPath + newFileName + fileExc;//保存文件路的路径 hpfb.SaveAs(Server.MapPath(newFilePath));//保存文件 return Content("ok:" + newFilePath); } else { return Content("no:文件格式错误！"); } } } #endregion
4、新闻删除：
新闻删除采用了easyUI的confirm弹窗提示，并且采用了ajax方式提交处理数据。当然在数据删除后我们也要将当前页面显示的已经删除的数据从表格中删掉。
5、新闻修改：
新闻修改我们采用方式和添加的页面相同，只是在新闻修改页面进行加载显示的时候，我们要将gaitiao新闻对象提前查询到后加载到该页面中进行显示。
前台代码
"viewport" content="width=device-width" />
修改闻信息
"~/Content/themes/tableStyle.css" rel="stylesheet" />
"stylesheet" href="/KinderEditor/themes/default/default.css" />
"stylesheet" href="/KinderEditor/plugins/code/prettify.css" />
@using (Ajax.BeginForm("EditNewInfo", new { }, new AjaxOptions() { OnSuccess = "afterEdit" }, new { id = "editForm" }))
{
"hidden" name="SubDateTime" value="@Model.SubDateTime" />
"hidden" name="Id" value="@Model.Id" />
新闻名称
"text" name="Title" value="@Model.Title" />
作者
"text" name="Author" value="@Model.Author" />
上传图片:
"file" name="fileUpImage" id="fileUpImage" />"button" id="btnUpload" value="异步上传" />
"hidden" id="hidImage" name="ImagePath" value="@Model.ImagePath" />
"menuIconShow">
"@Model.ImagePath" id="imgPath" width="40px" height="40px"/>
新闻内容
}
后台代码
#region 展示修改 ////// 展示修改 /// /// /// public ActionResult ShowEdit() { if (Request["id"] == null) { return Content("数据异常！"); } int id = int.Parse(Request["id"]); NewsInfo newInfo = newsBLL.GetModel(id); ViewData.Model = newInfo; return View(); } #endregion #region 修改数据 /// /// 修改数据 /// /// /// [ValidateInput(false)] public ActionResult EditNewInfo(NewsInfo news) { if (newsBLL.Alter(news)) { return Content("ok"); } else { return Content("no"); } } #endregion
注意：在进行修改数据展示的后台代码中，我们使用了ASP.NET MVC提供了一种利用强类型的方法来将数据或对象传递到视图模板中。这种强类型的方法为你的编码过程提供了很丰富的编辑时的智能输入提示信息与非常好的编译时的检查。ViewData.Model = newInfo;
通过在视图模板文件的头部使用@model语句，视图模板可以识别传入的参数中的对象类型是否该视图模板所需要的对象类型。”@model“语句后面坚决不能跟”；“，如果有这个分号会报错。也会导致运行错误！！