信息发布系统 Jquery+MVC架构开发(9)view1-优快云博客

我们主要需要用的插件包括：

1． jquery.tmpl.js

2． jquery.validate.js

关于这二个插件可以参看我的博文：

jquery.tmpl.js（http://blog.youkuaiyun.com/hliq5399/article/details/6557877）

jquery.validate.js（http://blog.youkuaiyun.com/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">

<head>

$(function() {

window.location.href = "Views/InfoList.html";

})

</script>

</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">

<head>

$(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>

<tr>

</tr>

</table>

<tr>

<td >${Infoname}</td>

<td>${InfoContent}</td>

</tr>

</table>

<tr>

</td>

<td>

</td>

</tr>

</table>

</body>

</html>

一个添加页面：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#type

{

width:223px;

}

.style1

{

width:89px;

}

</style>

$(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>

<div>

<tr>

信息名称</td>

<td>

</tr>

<tr>

信息内容</td>

<td>

</tr>

<tr>

是否置顶</td>

<td>

</tr>

<tr>

</td>

<td>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

这里主要是需要jquery.validate.js来验证必输项

在InfoList页面下我们利用jquery的ajax操作从InfoController的GetInfoList获取数据，如果获取成功我们提示成功。
我在本机已经测试成功，呵