信息发布系统 Jquery+MVC架构开发(9)view1
2011-12-17 14:51
786 查看
我们主要需要用的插件包括：
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获取数据，如果获取成功我们提示成功。
我在本机已经测试成功，呵
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获取数据，如果获取成功我们提示成功。
我在本机已经测试成功，呵
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [置顶]信息发布系统 Jquery+MVC架构开发(9)view1
- [置顶]信息发布系统 Jquery+MVC架构开发(9)view2
- 信息发布系统 Jquery+MVC架构开发(9)view2
- 信息发布系统 Jquery+MVC架构开发(9)view2
- [置顶]信息发布系统 Jquery+MVC架构开发(6)BLL层提供WCF 服务
- 信息发布系统 Jquery+MVC架构开发(1) 需求分析和架构构思
- [置顶]信息发布系统 Jquery+MVC架构开发(4)Model 层
- [置顶]信息发布系统 Jquery+MVC架构开发(6)BLL层提供WCF 服务
- [置顶]信息发布系统 Jquery+MVC架构开发(4)Model 层
- 信息发布系统 Jquery+MVC架构开发(6)BLL层提供WCF 服务
- 信息发布系统 Jquery+MVC架构开发(4)Model 层
- [置顶]信息发布系统 Jquery+MVC架构开发(7) Controller层
- 信息发布系统 Jquery+MVC架构开发(3) 解决方案创建
- [置顶]信息发布系统 Jquery+MVC架构开发(7) Controller层
- 信息发布系统 Jquery+MVC架构开发(2) 在EA下进行数据库设计
- 信息发布系统 Jquery+MVC架构开发(7) Controller层
- 信息发布系统 Jquery+MVC架构开发(4) Model 层 .
- [置顶]信息发布系统 Jquery+MVC架构开发(2) 在EA下进行数据库设计
- 信息发布系统 Jquery+MVC架构开发(5) DAL层
- [置顶]信息发布系统 Jquery+MVC架构开发(2) 在EA下进行数据库设计