首页 > 代码库 > 评论模块Demo(XML读写,定时器。)

评论模块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读写,定时器。)