这个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="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>
每天进步一点点。