评论模块Demo(XML读写,定时器。)
这个Demo主要是自己做练习熟悉jquery,ajax,与xml文件的读写,以下是实现页面效果:

后台控制器:
public ActionResult AddMsg()
{
XmlDocument xmlD = new XmlDocument();
xmlD.Load(Server.MapPath("/App_Data/info.xml"));
XmlNodeList nodeList=xmlD.SelectSingleNode("root").ChildNodes;
if (nodeList!=null)
{
List<Info> infoList = new List<Info>();
foreach (XmlElement node in nodeList)
{
infoList.Add(new Info(
node.SelectSingleNode("userName").InnerText,
node.SelectSingleNode("remark").InnerText,
node.SelectSingleNode("time").InnerText
));
}
ViewBag.infoList = infoList;
}
return View();
}
[HttpPost]
public ActionResult AddMesg()
{
string userName = HttpContext.Request["userName"].Trim();
string remark = HttpContext.Request["remark"].Trim();
if (!string.IsNullOrEmpty(userName) && !string.IsNullOrEmpty(remark))
{
string time = DateTime.Now.ToString("yyyy-MM-dd HH:mm");
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load(Server.MapPath("/App_Data/info.xml"));
XmlNode rootNode= xmlDoc.SelectSingleNode("root");
XmlNode infoNode = (XmlNode)xmlDoc.CreateElement("info");
XmlNode userNameNode = (XmlNode)xmlDoc.CreateElement("userName");
userNameNode.InnerText = userName;
XmlNode remarkNode = (XmlNode)xmlDoc.CreateElement("remark");
remarkNode.InnerText = remark;
XmlNode timeNode = (XmlNode)xmlDoc.CreateElement("time");
timeNode.InnerText = time;
infoNode.AppendChild(userNameNode);
infoNode.AppendChild(remarkNode);
infoNode.AppendChild(timeNode);
rootNode.AppendChild(infoNode);
xmlDoc.Save(Server.MapPath("/App_Data/info.xml"));
return Content("ok");
}
else
{
return Content("no");
}
}
view
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AddMsg</title>
<script src="~/Content/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Content/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script>
function isEmpty(title, object) {
var flag = true;
if (object == undefined || object.val() == '') {
alert(title+"不能为空");
flag = false;
}
return flag;
}
//js格式化日期方法
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
} $(function () {
$("input[type=button]").click(function () {
if (isEmpty("用户名", $("input[type=text]"))) {
if (isEmpty("评论", $("textarea"))) {
$("#divmsg").html("正在发送请求...").show();
$.post("@Url.Action("AddMesg", "Ajax")", { "userName": $("input[type=text]").val(), "remark": $("textarea").val() }, function (result) {
if ('ok' == result) {
$("#divmsg").html("评论成功...")
window.setTimeout(function () {
$("#divmsg").hide();
var strHTML = "";
strHTML = '<div class="col-lg-12 userInfo"><span style="color:#ff6a00">腾讯网友:</span><span style="margin-left:5px">' + $("input[type=text]").val() + '</span><br /><span class="col-lg-offset-1" style="font-size:14px">' + $("textarea").val() + '</span><br /><span class="pull-right">' +new Date().Format("yyyy-MM-dd HH:mm")+ '</span><br /><hr /></div>';
$("#infoList").append(strHTML);
$("input[type=text]").val('');
$("textarea").val('');
}, 2000);
}
})
}
}
})
})
</script>
<style type="text/css">
.userInfo {
margin:10px
}
span {
margin:10px
}
</style>
</head>
<body class="container">
<div class="col-lg-12" style="border:2px solid #000000;margin-top:50px;margin-bottom:400px">
<div class="col-lg-12">
<div class="col-lg-12">
<span class="bg-info">最新评论</span>
</div>
</div>
<div class="col-lg-12" id="infoList" style="margin:10px 5px;border:1px solid #000000;min-height:300px">
@{
var infoList = ViewBag.infoList;
if (infoList!=null && infoList.Count>0)
{
foreach (var info in infoList)
{
<div class="col-lg-12 userInfo">
<span style="color:#ff6a00">腾讯网友:</span><span style="margin-left:5px">@info.userName</span><br />
<span class="col-lg-offset-1" style="font-size:14px">@info.remark</span><br />
<span class="pull-right">@info.time</span><br />
<hr />
</div>
}
}
}
<div id="divmsg" class="col-lg-12" style="text-align:center;background-color:#00ffff;"></div>
</div>
<div class="col-lg-12" style="margin-top:20px;margin-bottom:10px">
<span>发表评论</span>
</div>
<div class="col-lg-12">
<textarea style="width:100%" rows="10"></textarea>
</div>
<div class="col-lg-12" style="margin:10px">
<span>用户名:</span>
<input type="text" class="text-primary" />
<input type="button" class="btn btn-primary pull-right" value="发表" />
</div>
</div>
</body>
</html>
每天进步一点点。
评论模块Demo(XML读写,定时器。)的更多相关文章
- Python模块 shelve xml configparser hashlib
常用模块1. shelve 一个字典对象模块 自动序列化2.xml 是一个文件格式 写配置文件或数据交换 <a name="hades">123</a>3. ...
- Python(文件、文件夹压缩处理模块,shelve持久化模块,xml处理模块、ConfigParser文档配置模块、hashlib加密模块,subprocess系统交互模块 log模块)
OS模块 提供对操作系统进行调用的接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目 ...
- 【Python】Python XML 读写
class ACTIVE_FILE_PROTECT_RULE_VIEW(APIView): renderer_classes = (JSONRenderer, BrowsableAPIRenderer ...
- python学习之路-7 模块configparser/xml/shutil/subprocess以及面向对象初级入门
本篇记录内容 模块 configparser xml shutil subprocess 面向对象 面向对象基础 面向对象编程和函数式编程对比 面向对象中对象和类的关系 面向对象之构造方法 面向对象之 ...
- python的内置模块xml模块方法 xml解析 详解以及使用
一.XML介绍 xml是实现不同语言或程序直接进行数据交换的协议,跟json差不多,单json使用起来更简单,不过现在还有很多传统公司的接口主要还是xml xml跟html都属于是标签语言 我们主要学 ...
- lua模块demo(redis,http,mysql,cjson,本地缓存)
1. lua模块demo(redis,http,mysql,cjson,本地缓存) 1.1. 配置 在nginx.conf中设置lua_shared_dict my_cache 128m; 开启ngi ...
- python 之模块之 xml.dom.minidom解析xml
# -*- coding: cp936 -*- #python 27 #xiaodeng #python 之模块之 xml.dom.minidom解析xml #http://www.cnblogs.c ...
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十九:SDRAM模块② — 多字读写
实验十九:SDRAM模块② — 多字读写 表示19.1 Mode Register的内容. Mode Register A12 A11 A10 A9 A8 A7 A6 A5 A4 A3 A2 A1 A ...
- 09: xmltodict 模块将xml格式转成json格式
1.1 : xmltodict 模块将xml格式转成json格式 <?xml version="1.0"?> <!--#版本号--> <data> ...
随机推荐
- sas简单使用
1 数据存取: 逻辑库: libname 自己起的名字 ‘文件所在的路径’,若无这步数据则存在默认的work中. 另一个方法在sas里自己建立一个逻辑库,但是关闭后就消失了. 新建数据:data ...
- 【BZOJ4753】最佳团体(分数规划,动态规划)
[BZOJ4753]最佳团体(分数规划,动态规划) 题面 BZOJ Description JSOI信息学代表队一共有N名候选人,这些候选人从1到N编号.方便起见,JYY的编号是0号.每个候选人都由一 ...
- 成都优步uber司机第五组奖励政策
7月14日,成都优步uber团队发布了第五组用户分组.在传言要推出第四组的时候,心想事不过三吧,意外,现在第五组都出来了.一起看看成都优步司机第五组的详细内容!滴滴快车单单2.5倍,注册地址:http ...
- 青岛Uber司机奖励政策(8月31号~9月6号)
本周的奖励规则如下,请各位司机朋友按照自己的情况查询. 人民优步(People’s Uber) 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版 ...
- 一个只有十行的精简MVVM框架
本文来自网易云社区. 前言 MVVM模式相信做前端的人都不陌生,去网上搜MVVM,会出现一大堆关于MVVM模式的博文,但是这些博文大多都只是用图片和文字来进行抽象的概念讲解,对于刚接触MVVM模式的新 ...
- sql中的几种连接类型
一.连接类型简介 在sql中单表查询的几率相对来说比较少,随着数据库的日益复杂,多表关联的情况越来越多,在多表关联的情况下存在多种关联的类型, 1.自关联(join或inner join) 2.左外关 ...
- ES2015学习笔记
ECMA6学习笔记 参考资料 ECMAScript6入门:http://es6.ruanyifeng.com/ 官方文档:https://babeljs.io/learn-es2015/ 开发软件:W ...
- Qt listwigwt item 加入自定义元素
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- List和Turple
List 格式:classmates = ['Michael', 'Bob', 'Tracy'] 读取list长度用:len(classmetes) 索引:索引正向从0开始,逆向从-1开始 在末尾增加 ...
- redis集群搭建(伪集群)
1.准备工作 去官网下载好你想要安装的redis版本,下载链接 2.搭建步骤 输入命令yum install gcc-c++安装好gcc环境,将下载好的redis安装包上传到 /usr/local 解 ...