重邮项目的发布公告分为三个部分，第一部分是显示页面，第二部分是新增修改页面，第三部分是详情页面。发布公告属于重邮项目中比较复杂的一个部分了。
<div class="container-fluid">
<!--查询条件-->
<div class="row">
<div class="col-sm-8">
<form action="/" method="post">
<div class="form-row">
<label class="col-sm-1 col-form-label text-center">标题</label>
<div class="col-sm-3 px-0">
<input id="SNoticeName" class="form-control" type="text" name="title" value="" />
</div>
<label class="col-sm-1 col-form-label text-center">发布时间</label>
<div class="col-sm-3 px-0">
<input id="SReleaseTime" class="form-control" type="date" name="name" value="" />
</div>
<label class="col-sm-1 col-form-label text-center">公告类型</label>
<div class="col-sm-3 px-0">
<select class="form-control" id="sltNoticeType">
<option value="0">----请选择----</option>
</select>
</div>
</div>
</form>
</div>
<div class="col-sm-4">
<button class="btn btn-outline-secondary" onclick="tabNoticeSearch()">组合查询</button>
<button class="btn btn-outline-secondary" id="Insert">发布公告</button>
<button class="btn btn-outline-secondary" id="baseInfor">基础数据维护</button>
</div>
</div>
<!--table 表格-->
<table id="tabNotice" lay-filter="tabNotice"></table>
<div class="h4">附件信息</div>
<table id="tabFiles" lay-filter="tabFiles"></table>
</div>这是基础的HTML布局，发布公告需要使用到bootstrap框架，layui框架，jquery插件，最好自定义一个下拉框查询的方法，因为后期基本每个小项目都需要使用到下拉框查询，和一个jQuery根据json对象填充from表单的方法，还有身份证验证方法。
//为下来框添加选项
function appendOption(id, url) {
$.getJSON(url, function (data) {
$("#" + id).empty();
$("#" + id).append("<option value=" + 0 + ">" + "----请选择----" + "</option>");
//console.log(data);
$.each(data, function (i) {
$("#" + id).append("<option value=" + data[i].id + ">" + data[i].text + "</option>");
});
});
}
/**
* jquery 验证身份证合法性的js
*分别对15和18位的身份证号进行验证，非常严格。
* @param value 身份证号
*/
function idCardNo(value) {
//验证身份证号方法
var area = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "xinjiang", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" }
var idcard, Y, JYM;
var idcard = value;
var S, M;
var idcard_array = new Array();
idcard_array = idcard.split("");
if (area[parseInt(idcard.substr(0, 2))] == null) return false;
switch (idcard.length) {
case 15:
if ((parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0 || ((parseInt(idcard.substr(6, 2)) + 1900) % 100 == 0 && (parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0)) {
ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/; //测试出生日期的合法性
}
else {
ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/; //测试出生日期的合法性
}
if (ereg.test(idcard))
//return Errors[0];
var res = true;
else
//return Errors[2];
var res = false;
return res;
break;
case 18:
if (parseInt(idcard.substr(6, 4)) % 4 == 0 || (parseInt(idcard.substr(6, 4)) % 100 == 0 && parseInt(idcard.substr(6, 4)) % 4 == 0)) {
ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/; //闰年出生日期的合法性正则表达式
} else {
ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/; //平年出生日期的合法性正则表达式
}
if (ereg.test(idcard)) { //测试出生日期的合法性
//计算校验位
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y, 1);//判断校验位
if (M == idcard_array[17])//检测ID的校验位
//return Errors[0];
var res = true;
else
//return Errors[3];
var res = false;
}
else
//return Errors[2];
res = false;
return res;
break;
default:
res = false;
return res;
break;
};
}
/**
* jquery 根据json对象填充form表单
* @author en
* @param fromId form表单id
* @param jsonDate json对象
*/
function loadDatatoForm(fromId, jsonDate) {
var obj = jsonDate;
var key, value, tagName, type, arr;
for (x in obj) {//循环json对象
key = x;
value = obj[x];
//$("[name='"+key+"'],[name='"+key+"[]']").each(function(){
//更加form表单id 和 json对象中的key查找 表单控件
$("#" + fromId + " [name='" + key + "'],#" + fromId + " [name='" + key + "[]']").each(function () {
tagName = this.tagName;
type = $(this).attr('type');
if (tagName == 'INPUT') {
if (type == 'radio') {
$(this).attr('checked', $(this).val() == value);
} else if (type == 'checkbox') {
try {
//数组 "篮球,排球,羽毛球"
arr = value.split(',');
for (var i = 0; i < arr.length; i++) {
if ($(this).val() == arr[i]) {
$(this).attr('checked', true);
break;
}
}
} catch (e) {
//单个
$(this).attr('checked', value);
}
} else {
$(this).val(value);
}
} else if (tagName == 'TEXTAREA') {
$(this).val(value);
} else if (tagName == 'SELECT') {
//console.log($(this).hasClass("select2"));
$(this).val(value);
}
});
}
}
视图页面除了HTML布局还需要jQuery代码，对from表格进行渲染，赋予按钮点击跳转事件，自定义表格刷新，删除数据。
<script>
//全局变量声明
var tabNotice;//公告 table
var tabFiles;//公告文件 table
var layer, layuiTable;//保存layui模块以便全局使用
$(function () {
//公告管理 公告类型下拉框
appendOption("sltNoticeType", "SelectNoticeType");
//加载和初始化layui模块
layer = layui.layer, layuiTable = layui.table;
//公告table
tabNotice = layuiTable.render({
elem: "#tabNotice",//html table id
data: [],
cols: [[ //表头
{ type: 'numbers', title: '序号', align: 'center' },//序号列，title设定标题名称
{ field: 'NoticeName', title: '公告名称', align: 'center' },
{ field: 'NoticeTypeName', title: '公告类别', align: 'center' },
{ field: 'NoticeTypeDetailName', title: '公告类别明细', align: 'center' },
{ field: 'Editor', title: '编辑者', align: 'center' },
{ field: 'BrowsingTimes', title: '浏览次数', sort: true, align: 'center' },
{ field: 'ReleaseTimeStr', title: '发布时间', sort: true, align: 'center' },// sort: true 从而对列开启排序功能
{ title: '操作', templet: setOperate, width: 260, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式
]],
page: {
limit: 5,//指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
}, //开启分页
})
//公告文件 table
tabFiles = layuiTable.render({
elem: "#tabFiles",//html table id
data: [],
//url: "/SystemManagement/IssuanceNotice/SelectFileByNoticeId",//数据接口
cols: [[ //表头
{ type: 'numbers', title: '序号' },//序号列，title设定标题名称
{ field: 'FileID', title: '文件ID', hide: true },//hide:true 隐藏列
{ field: 'NoticeName', title: '公告名称' },
{ field: 'FileTypeName', title: '文件类型' },
{ field: 'Files', title: '文件' }
]],
page: {
limit: 5,//指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
}, //开启分页
});
tabNoticeSearch();
//公告 table 监听
//监听行单击事件（单击事件为：rowDouble）
layuiTable.on('row(tabNotice)', function (obj) {
//console.log(obj)
var data = obj.data;//获取点击行数据
//标注选中样式
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
var noticeId = data.NoticeID;//公告id
//公告查询附件
tabFiles = layuiTable.reload('tabFiles', {
url: '/SystemManagement/IssuanceNotice/SelectFileByNoticeId',
page: {
curr: 1,
},
where: { //设定异步数据接口的额外参数，比如设置多条件查询的参数
noticeId: noticeId
}
});
})
})
//1.2自定义操作列
function setOperate(data) {
//用户类型id
var noticeId = data.NoticeID;
var btns = '<button type="button" class="layui-btn layui-btn-xs" onclick="openViewNotice(' + noticeId + ')">详情</button>';
btns += '<button type="button" class="layui-btn layui-btn-xs" onclick=updateNotice(' + noticeId + ')>修改</button>';
btns += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick=deleteNotice(' + noticeId + ')>删除</button>';
return btns;
}
//1.3 组合查询
function tabNoticeSearch() {
//获取页面筛选内容
var noticeName = $("#SNoticeName").val();
var releaseTime = $("#SReleaseTime").val();
var noticeTypeId = $("#sltNoticeType").val();
if (noticeTypeId == undefined || noticeTypeId == "") {
noticeTypeId = 0;
}
tabNotice = layuiTable.reload('tabNotice', {
url: '/SystemManagement/IssuanceNotice/SelectNoticeAll',
page: {
curr: 1,//重置到第一页
},
where: { //设定异步数据接口的额外参数，比如设置多条件查询的参数
noticeName: noticeName,
releaseTime: releaseTime,
noticeTypeId: noticeTypeId
}
});
清空附件列表
tabFiles = layuiTable.reload('tabFiles', {
url: '',
data: []
});
}
//1.4 跳转到基础信息维护
$("#baseInfor").click(function () {
window.location.href = "/SystemManagement/IssuanceNotice/BaseInfor";//基础数据维护页面
});
//1.5 发布公告
$("#Insert").click(function () {//新增点击事件
window.location.href = "/SystemManagement/IssuanceNotice/InsertNotice";//新增公告页面
});
//1.6 跳转到修改页面
function updateNotice(noticeId) {
window.location.href = "/SystemManagement/IssuanceNotice/UpdateNotice?noticeId=" + noticeId;//修改公告页面
}
//1.7 跳转到详情页面
function openViewNotice(noticeId) {
window.open("/SystemManagement/IssuanceNotice/NoticeDetailed?noticeId=" + noticeId);
}
//1.8 删除公告信息
function deleteNotice(noticeId) {
layer.confirm("您确定要删除该公告?", { title: '删除信息的提示', icon: 3, offset: '100px' }, function (index) {
layer.close(index);
$.post("DeleteNotice", { noticeId: noticeId}, function (msg) {
if (msg.State) {
tabNoticeSearch(); //公告表格查询:刷新表
tabFiles.clearGridBodyData(); //清空附件列表
tabFiles = layuiTable.reload('tabFiles', {
data: []
});
}
layer.alert(msg.Text);
})
});
}
</script>你以为这就结束了吗？不，这才刚刚开始。上面说到有三个部分，也就是需要三个页面才能完成。除了基本的显示页面，还有两个隐藏的页面，一个是新增修改共用的模态框页面，一个是详情的显示页面。
接下来就是新增修改共用的HTML代码。两个方法使用同一个模态窗体
<div class="container card">
<div class="row">
<div class="col">
<form id="fromNotice" action="" method="post" enctype="multipart/form-data">
<div class="form-row">
<label class="col-sm-2 col-form-label">公告类别：</label>
<div class="col-sm-4">
<select class="form-control" id="sltNoticeType">
<option value="0">----请选择----</option>
</select>
</div>
<label class="col-sm-2 col-form-label pl-4">类型明细：</label>
<div class="col-sm-4">
<select class="form-control" id="sltNoticeTypeDetail">
<option value="0">----请选择----</option>
</select>
</div>
</div>
<div class="form-row">
<label class="col-sm-2 col-form-label">“New”显示天数：</label>
<div class="col-sm-4">
<select class="form-control" id="selectNew">
<!--ASP.NET Razor - 标记
Razor 是一种允许您向网页中
嵌入基于服务器的代码（Visual Basic 和 C#）的标记语法。
-->
<option value="0">----请选择----</option>
@for (int i = 1; i < 10; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
<div class="col-sm-6 pl-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="Overhead" name="Overhead">
<label class="custom-control-label" for="Overhead">是否把该公告置于主界面公告列表的顶部</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-sm-6">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cNoticeCarousel" name="noticeCarousel">
<label class="custom-control-label" for="cNoticeCarousel">是否把该公告添加到主界面的轮播中</label>
</div>
</div>
<div class="col-sm-6 pl-4">
<div class="collapse" id="collapseOverhead" style="">
<div class="well">
<img id="NoticeCarousePicture" style="max-width: 274px; max-height: 153px;" ondblclick="showImageFile()">
<input type="file" id="NoticeCarouseImage" name="noticeCarouseImage" class="hidden" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" onchange="loadImgToEimg()">
</div>
</div>
</div>
</div>
<div class="form-row">
<label class="col-sm-2 col-form-label">通知标题：</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="NoticeName" value="" />
</div>
</div>
<div class="form-row">
<label class="col-sm-12 col-form-label">通知正文：</label>
<div class="col-sm-12">
<div class="noticeContent">
<textarea id="NoticeContent" name="NoticeContent" class="form-control"></textarea>
</div>
</div>
</div>
<div class="form-row justify-content-between">
<label class="col-sm-2 col-form-label">附件：</label>
<div class="col-sm-2">
<button class="btn btn-primary btn-sm" type="button" onclick="openUpAttachmentFile()">添加附件</button>
</div>
</div>
<div class="form-row">
<div class="col-sm-12">
<table id="tabFiles" lay-filter="tabFiles"></table>
</div>
</div>
<div class="form-row justify-content-center">
<button class="btn btn-primary mr-3" type="button" id="saveForm">发布</button>
<button class="btn btn-secondary" type="button" id="quit">返回</button>
</div>
</form>
</div>
</div>
</div>
@*文件上传表单*@
<div style="display: none" >
<form id="frmUploadAttachment" action="/SystemManagement/IssuanceNotice/UploadAttachment" method="post" enctype="multipart/form-data">
<input type="file" name="attachmentFile" id="getAttachmentFile" class="form-control" onchange="upAttachmentFile()" />
</form>
</div>以及JavaScript代码，这次的新增修改与往期不同的是，这次多了一个富文本框和附件的添加，所以代码量会比往期多。这也是为什么需要使用三个视图的原因，使用三个视图可以让代码更为简洁。
<script>
var editorNotice;//富文本编辑器
var tabFiles;//附件表格
var layer, layuiTable;//保存layui模块以便全局使用
var layerIndex;
$(document).ready(function () {
//1.0 初始化 ckeditor富文本编辑器
editorNotice = CKEDITOR.replace('NoticeContent');
//1.1 新增公告->公告类型
appendOption("sltNoticeType", "SelectNoticeType");
//1.4 初始化 附件表格
layui.use(['table', 'layer'], function () {
layer = layui.layer, layuiTable = layui.table;
tabFiles = layuiTable.render({
elem: "#tabFiles",//html table id
data: [],
cols: [[ //表头
{ type: 'numbers', title: '序号' },//序号列，title设定标题名称
{ title: '文件类型', field: 'FileTypeName' },
{ title: '文件', field: 'Files' },
{ title: '文件名称', field: 'FileName' },
{ title: '操作', templet: setRemoveButton, width: 160, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式
]],
page: {
limit: 10,//指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
} //开启分页
});
});
})
//1.2 公告类型值改变事件
$("#sltNoticeType").change(function () {
var NoticeTypeID = $(this).val();
appendOption("sltNoticeTypeDetail", "SelectNoticeDetailByID?NoticeTypeID=" + NoticeTypeID);
});
//1.3 轮播图片控制
//初始化轮播图片选择collapse
$("#collapseOverhead").collapse({ toggle: false });
//当用户选择显示在轮播时显示 collapse
$("#cNoticeCarousel").change(function () {
//判断选中
if (document.getElementById("cNoticeCarousel").checked) {
//显示DIV
$("#collapseOverhead").collapse('show');
} else {
//隐藏DIV
$("#collapseOverhead").collapse('hide');
}
});
//1.4 移除附件 自定义按钮
function setRemoveButton(data) {
//console.log(data)
var fileGuid = data.FileGuid;
return '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick=removeAttachmentFile("' + fileGuid + '")>移除</button>';
//return '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="removeAttachmentFile("' + fileGuid+'")" >移除</button>';
}
//1.5 主页面轮播图片 将选择的图片文件显示到轮播图片上
//文件读取
//图片文件 正则表达式过滤image/jpeg,image/png,image/jpg,image/gif,image/bmp
//?:匹配冒号后的内容但是不获取匹配结果；不进行储存供以后使用,可以提高匹配速度
//http://c.biancheng.net/view/5632.html 博文 js正则
var imgReader = new FileReader();
regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;
function loadImgToEimg() {
//选取选择图片
var imgfFile = $("#NoticeCarouseImage").get(0).files[0];
//console.log(imgfFile)
//加载image标签中
if (!regexImageFilter.test(imgfFile.type)) {
alert("选择的不是一个有效的图片文件");
}
imgReader.readAsDataURL(imgfFile)
}
//文件读取 onload事件
imgReader.onload = function (e) {
$("#NoticeCarousePicture").attr("src", e.target.result)
//console.log(e.target.result)
}
//1.6 添加附件按钮点击事件
function openUpAttachmentFile() {
$("#getAttachmentFile").click();
}
//1.7 附件上传
function upAttachmentFile() {
var fileValue = $('#getAttachmentFile').val();
//避免上传成 功后去掉value 时再次触发上传
if (fileValue == "" || fileValue == undefined) {
return;
}
//获取选择的文件
var files = $('#getAttachmentFile').prop("files");
//判断
if (files.length > 0) {
if (files[0].size <= 20 * 1024 * 1024) {
$("#frmUploadAttachment").ajaxSubmit(function (msg) {
if (msg.State) {
tabFilesRefresh();//刷新附件信息
}
layer.alert(msg.Text, { icon: 3, offset: '150px;' });
$('#getAttachmentFile').val("");
})
} else {
layer.alert("文件大小不能超过20M", { icon: 0 });
}
} else {
layer.alert("请选择要上的文件", { icon: 0 });
}
}
//1.8 session中查询附件信息
function tabFilesRefresh() {
tabFiles = layuiTable.reload("tabFiles", {
page: { curr: 1 },
url: "/SystemManagement/IssuanceNotice/SelectSessionFiles",
});
}
//1.9 删除附件信息
function removeAttachmentFile(fileGuid) {
//alert(fileGuid);
layer.confirm(" 您确定要移除该文件?", { icon: 3, titile: "提示" }, function (index) {
layer.close(index);
$.post("RemoveAttachmentFile?fileGuid=" + fileGuid, function (message) {
if (message.State) {
//刷新附件列表
tabFilesRefresh();
}
layer.alert(message.Text);
});
});
}
//1.10 保存公告
$("#saveForm").click(function () {
var layerIndex;
var NoticeTypeDetailID = $("#sltNoticeTypeDetail").val();
var NoticeName = $('#fromNotice input[name="NoticeName"]').val();
var NoticeContent = editorNotice.getData();
var Overhead = $('#Overhead').prop('checked');
var New = $('#selectNew').val();
var noticeCarousel = $('#cNoticeCarousel').prop('checked');
if (NoticeTypeDetailID != "" && NoticeName != "" && NoticeContent != "") {
if (noticeCarousel == true && $('#fromNotice input[name="noticeCarouseImage"]').prop('files').length == 0) {
layer.alert("如要添加到轮播显示，请上传图片", { icon: 0 });
return;
}
console.log(NoticeContent)
var fd = new FormData();
fd.append("NoticeTypeDetailID", NoticeTypeDetailID);//公告类型ID
fd.append("NoticeName", NoticeName);//公告名称
fd.append("NoticeContent", NoticeContent);//公告内容
fd.append("Overhead", Overhead);//置顶显示
fd.append("New", New);//New显示天数
fd.append("noticeCarousel", noticeCarousel);//是否轮播
fd.append("noticeCarouseImage", $('#fromNotice input[name="noticeCarouseImage"]').prop('files')[0]);//文件添加到FormData
var xhr = new XMLHttpRequest();
xhr.open("POST", "InsertNoticeInfor");
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//xhr.responseText string
var txt = JSON.parse(xhr.responseText);
//console.log(txt);
if (txt.State) {
window.location.href = "/SystemManagement/IssuanceNotice/Index";
}
layer.alert(txt.Text, { icon: 2 });
}
}
} else {
layer.alert("请填写完整", { icon: 0 });
}
})
</script>完成新增修改的代码后还有详情页面的代码，详情页面没有JS代码，主要由HTML代码组成，以及一小部分CSS代码尽心修饰。
<div class="container">
<div class="row mt-3">
<div class="col-auto">
<img src="~/Content/images/Logo2.png" />
</div>
</div>
<div class="row">
<div class="col-12">
@{
NoticeVo notice = ViewBag.notice;
}
<div class="heading">
<span id="title">@notice.NoticeName</span>
</div>
<div>
<span id="time">发布时间：@notice.ReleaseTimeStr</span>
<span id="noticeType" class="float-right">公告类型：@notice.NoticeTypeName</span>
</div>
<hr class="m-1" />
<div id="content">
<!--Html.Raw() 方法输出带有html标签的字符串-->
@Html.Raw(notice.NoticeContent)
</div>
<hr class="m-1" />
<div class="row next">
<h4>附件：</h4>
@foreach (FilesVo file in ViewBag.files)
{
<div class="col-md-12">
<!--Html.Raw() 方法输出带有html标签的字符串-->
@Html.Raw(file.Files)
</div>
}
</div>
</div>
</div>
<footer class="footer text-center mt-4">
2021年广信IT学院
</footer>
</div>下面是（发布公告）详情页面的CSS代码，主要用于修饰网页。
.heading {
font-size: 24px;
text-align: center;
color: #337ab7;
}
hr {
border-bottom: 3px solid red;
}
.next {
padding: 30px 15px 0 15px;
font-size: 16px;
}下期我们在聊控制器中的代码。
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
