信息发布系统 Jquery+MVC架构开发(9)view1
我们主要需要用的插件包括：
1． jquery.tmpl.js
2． jquery.validate.js
关于这二个插件可以参看我的博文：
jquery.tmpl.js（http://blog.csdn.net/hliq5399/article/details/6557877）
jquery.validate.js（http://blog.csdn.net/hliq5399/article/details/6557789）
因为我们用的技术不是微软自带的mvc技术，所以，请Views下自动生成的Web.config文件一起其他文件删除，你也可以将Views删除，然后再重新创建一个Views。这个问题让我困惑很久，前几天同事提醒才注意到。
这样我们就可以用jquery 方便的处理页面了，增加一个测试页面来测试下下，在infopub根目录下创建一个index页面：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/common.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
window.location.href = "Views/InfoList.html";
})
</script>
<title>test</title>
</head>
<body>
<div>
</div>
</body>
</html>
这个页面的目的是跳Views目录下的InfoList.html页面，这样我们需要在Views目录下再创建一个InfoList.html页面。
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../Scripts/common.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
varpagedata = {};
pagedata["startNum"]= 1;
pagedata["endNum"]= 1;
pagedata["pageSize"]= 10;
pagedata["pageIndex"]= 1;
pagedata["Max"]= 0;
varquery = {};
//query["Infoname"]= "test1";
query["pageInfo"]= pagedata;
$.ajax({
type: "post",
url: "../Info/GetInfoList",
datatype: "json",
data: { searchInfo:Common.ToSerialize(query) },
success: function (re) {
if(re.isSuccess) {
Common.RenderTemplatefunction("#contain","#datatemplate", re.Data);
}
},
error: function (re) {
alert("false")
}
})
$("#btnaddinfo").click(function () {
window.location.href = "infoAdd.html";
})
})
</script>
</head>
<body>
<table style="width:100%;" id="contain">
<tr>
<td >标题</td>
<td>内容</td>
</tr>
</table>
<table id="datatemplate" style="display:none">
<tr>
<td >${Infoname}</td>
<td>${InfoContent}</td>
</tr>
</table>
<table style="width:100%;" >
<tr>
<td class="style1">
</td>
<td>
<input id="Submit1" type="submit" value="添加信息" />
</td>
</tr>
</table>
</body>
</html>
一个添加页面：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>信息添加</title>
<style type="text/css">
#type
{
width:223px;
}
.style1
{
width:89px;
}
</style>
<script src="../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../Scripts/common.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#infoForm").validate({
rules: {
infoname: "required",
infocontext: "required"
},
messages: {
infoname: "请输入信息名称：",
infocontext: "请输入信息内容"
}
});
$("#submit").click(function () {
if($("#infoForm").valid()) {
varinfo = {};
info["Infoname"] = $("#infoname").val();
info["InfoContent"] = $("#infocontext").val();
info["IsTop"] = 1;
info["TypeId"] = 1;
info["CreateId"] = 1;
info["PictureUrl"] = "";
info["AttachMentUrl"] = "";
info["CreateDate"] = newDate().formatDate("US", "");
info["ModifyDate"] = newDate().formatDate("US", "");
$.ajax({
type: "post",
url: "../Info/AddInfo",
datatype: "json",
data: { info:Common.ToSerialize(info) },
success: function (re) {
if (re.isSuccess) {
alert("true")
}
},
error: function (re) {
alert("false")
}
})
}
})
})
</script>
</head>
<body>
<form id="infoForm" method="get" action="">
<div>
<table style="width:100%;">
<tr>
<td class="style1">
信息名称</td>
<td>
<input id="infoname" name="infoname" type="text" /></td>
</tr>
<tr>
<td class="style1">
信息内容</td>
<td>
<input id="infocontext" name="infocontext" type="text" /></td>
</tr>
<tr>
<td class="style1">
是否置顶</td>
<td>
<input id="ristop" type="radio" checked="checked"/></td>
</tr>
<tr>
<td class="style1">
</td>
<td>
<input id="submit" type="submit" value="submt" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
这里主要是需要jquery.validate.js来验证必输项
在InfoList页面下我们利用jquery的ajax操作从InfoController的GetInfoList获取数据，如果获取成功我们提示成功。
我在本机已经测试成功，呵