信息发布系统 Jquery+MVC架构开发(9)view1

晨曦之光 发布于 2012/03/09 12:15
阅读 83
收藏 0

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

 

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获取数据,如果获取成功我们提示成功。
我在本机已经测试成功,呵


原文链接:http://blog.csdn.net/hliq5399/article/details/7079961
加载中
返回顶部
顶部