Aap.net母版页跳转无刷新 解决方案

原本做开发的项目使用的是ifame框架的母版页，不过扩展性不是很好，想改成cs可编辑版的，网上找了很多资料大体分为两种，一是用master不过需要在后台进行处理，有点麻烦，二就是iframe。研究了半天，终于想到一个实现方法！

首先，创建一个.aspx web页，框架代码网上到处都是，大家可以去找找。以下是我的源码

  <style>h2{font-weight:normal;}        html, body {            min-width:1200px;        }        .clear{clear:both}        .side {                       height:500px;            min-height:585px; max-height:585px;                    position: relative;            width: 187px;            float: left;            margin-right: 0 !important;            margin-right: -3px;            overflow: auto;            background:#f0f9fd;        }         .main {            min-height:585px; max-height:585px;             position: relative;            overflow:hidden;            min-height:585px;            max-height:585px;        }   </style>

   <link href="../css/style.css" rel="stylesheet" type="text/css" />

这里我的左侧菜单是根据顶部菜单利用Ajax自动生成的, 结构复杂一点.页面比较简单的朋友可以直接引用红色部分便能实现效果了.

<li onclick="javascript:window.frames['aa'].location.href='Index.aspx'></li>   头部

<iframe id="rightFrame"  src="Index.aspx" name="aa" style="min-height:585px; width:100%;"> </iframe> 内容页

     <form  runat="server">    <div>              <!--Top Begin 头部菜单-->        <div style="height:88px;background:url(images/topbg.gif) repeat-x; ">             <div class="topleft" style="font-family: 微软雅黑; font-size: 65px; color: #FFFF00; position: relative;">  LGP</div>                     <ul class="nav">                <li <strong><span style="color:#cc0000;" <span style="background-color: rgb(204, 204, 204);"><span style="color:#ff0000;" onclick="javascript:window.frames['aa'].location.href='Index.aspx'"</span>"</span></span></strong>><a class="selected"><img src="images/icon01.png" title="首頁" /><h2> 首頁</h2></a></li>                <li onclick="loadLeft('类型1')"><a><img src="images/icon05.png" title="文件管理" /><h2>top菜单1</h2></a></li>                <li onclick="loadLeft('类型2')"><a ><img src="images/icon05.png" title="模具管理" /><h2>top菜单1</h2></a></li>                <li onclick="loadLeft('类型3')"><a><img src="images/icon05.png" title="模块设计" /><h2>top菜单1</h2></a></li>                <li onclick="loadLeft('4')"><a ><img src="images/icon05.png" title="常用工具" /><h2>top菜单1</h2></a></li>                <li onclick="loadLeft('5')"><a ><img src="images/icon05.png" title="文件管理" /><h2>top菜单1</h2></a></li>                <li onclick="loadLeft('6')"><a ><img src="images/icon05.png" title="文件管理" /><h2>top菜单1</h2></a></li>                    </ul>                         <div class="topright">                    <ul>                <li><span><img src="images/help.png" title="帮助"  class="helpimg"/></span><a href="#">帮助</a></li>                <li><a href="#">关于</a></li>                <li><a href="Account/Login.aspx" target="_parent">退出</a></li>                </ul>                     <div class="user">                <asp:Label runat="server" ID="lblUserName"></asp:Label>                <i>消息</i>                <b>0</b>                </div>                        </div>        </div>        <!--Top End 左侧菜单-->           <!--Left Begin-->        <div class="side">            <div class="lefttop"><span></span><label id="lblManageType"></label></div>                              <label id="lblLeftHTML"></label>                    </div>        <!--Left End-->

         <!--Right Begin 主页面-->            <div class="main" ><strong><span style="color:#cc0000;">             <iframe id="rightFrame"  src="Index.aspx" name="aa" style="min-height:585px; width:100%;">                                </iframe></span></strong>             </div>                      <!--Right End-->              </div>   </form>  

<pre class="javascript" name="code">      <script type="text/javascript" >               function getPara(cookieVal) {              if (cookieVal != "") {                  document.cookie = 'type=' + cookieVal;                           }                      }          window.onload = function () {              // var arr, reg = new RegExp("(^| )modal=([^;]*)(;|$)");              //if (document.cookie.match(reg)) {                //    arr = document.cookie.match(reg);              //    loadLeft(arr[2]);              //    setCookie("model", arr[2], -1);                          //}else {                  loadLeft('类型1');

          //}                                }          function setCookie(cname, cvalue, exdays) {              var d = new Date();              d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));              var expires = "expires=" + d.toUTCString();              document.cookie = cname + "=" + cvalue + "; " + expires;          }        function loadLeft(val) {            document.cookie = "modal=" + val;            document.getElementById("lblManageType").innerText = val;            var xmlHttp;            if (window.XMLHttpRequest) {                xmlHttp = new XMLHttpRequest();            } else {                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            }            xmlHttp.onreadystatechange = function () {                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {                    if (xmlHttp.responseText != "") {

                        document.getElementById("lblLeftHTML").innerHTML = xmlHttp.responseText;                        onloadli();                    }                                 }            }            xmlHttp.open("get", "Ajax/LeftPage.ashx?action=" + encodeURI(val), true);            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//application/x-www-form-urlencoded text/html; charset=BIG-5            xmlHttp.send();        }            var onloadli = function () {            //顶部导航切换            $(".nav li a").click(function () {                $(".nav li a.selected").removeClass("selected")                $(this).addClass("selected");            })            //导航切换            $(".menuson li").click(function () {                $(".menuson li.active").removeClass("active")                $(this).addClass("active");            });            $('.title').click(function () {                var $ul = $(this).next('ul');                $('dd').find('ul').slideUp();                if ($ul.is(':visible')) {                    $(this).next('ul').slideUp();                } else {                    $(this).next('ul').slideDown();                }            });                  }    </script>   

.ashx

public void ProcessRequest(HttpContext context)        {            try            {                context.Response.ContentType = "text/plain";                XmlDocument xml = new XmlDocument();                xml.Load("PageItems.xml");                StringBuilder builder = new StringBuilder();<p>                if (context.Request.QueryString["action"] != null && context.Request.QueryString["action"].ToString() != "")                {                    string val = HttpUtility.UrlDecode(context.Request.QueryString["action"].ToString());                    string tempValue = string.Empty;                    string tempLink = string.Empty;                                       int i = 1;                    builder.Append("<dl class='leftmenu'>");                    foreach (XmlNode modelNode in xml.ChildNodes[1])                    {                        if (modelNode.Attributes["value"].Value == val)//model                        {                            if (modelNode.HasChildNodes)                            {                                XmlNodeList listNode = modelNode.ChildNodes;//listnode                                foreach (XmlNode listN in listNode)                                {                                                                        builder.Append("<dd>");                                    builder.Append("<div class='title'>");                                    builder.Append("<span><img src = '../../images/leftico0" + i + ".png' /></span> " + listN.Attributes["value"].Value);                                    builder.Append("</div>");                                    builder.Append("<ul class='menuson'>");                                    if (listN.HasChildNodes)                                    {                                                                               writePageLink(context, builder, ref tempValue, ref tempLink, listN);                                    }                                                                   builder.Append("</ul>");                                    builder.Append("</dd> ");                                    i++;                                }                            }                        }                    }                    builder.Append("</dl>");                       context.Response.Write(builder);                }            }            catch (Exception exception) {                context.Response.Write(Res.info_error + exception.Message);            }        }

<pre class="csharp" name="code">       private static void writePageLink(HttpContext context, StringBuilder builder, ref string tempValue, ref string tempLink, XmlNode listN)        {            foreach (XmlNode pageNode in listN)            {                tempValue =pageNode.Attributes["value"].Value;                tempLink =pageNode.InnerText;                string para ="";                string onlickStr = string.Concat("href=\"", tempLink, "\"" );                if (pageNode.Attributes["para"] != null)//有页面参数则存入cookie                {                    para = pageNode.Attributes["para"].Value;                    onlickStr += string.Concat("  onclick=\"getPara('", para, "')\"");                }                              builder.Append("<li><cite></cite><a target='aa' "+onlickStr+" >" + tempValue + "</a><i></i></li>");                           }        }

.xml 格式

<?xml version="1.0" encoding="utf-8" ?><node>  <model value="首頁" title="首頁"></model>  <model value="类型1" title="" >    <listnode value="">      <pagenode value="" para="yugu">ContentPage/kufang/pies.aspx</pagenode>      <pagenode value="">ContentPage/kufang/tonggoumingxi.aspx</pagenode>      <pagenode value="">ContentPage/kufang/rukumingxi.aspx</pagenode>      <pagenode value="" para="shiji">ContentPage/kufang/pies.aspx</pagenode>      <pagenode value="">ContentPage/kufang/chukumingxi.aspx</pagenode>      <pagenode value="">ContentPage/kufang/zoushi.aspx</pagenode>    </listnode>    <listnode value="">      <pagenode value="">ContentPage/kufang/qinggoupies.aspx</pagenode>      <pagenode value="">ContentPage/kufang/qinggou.aspx</pagenode>    </listnode>    <listnode value="">          <pagenode value="">ContentPage/kufang/wuliaoxinxi.aspx</pagenode>    </listnode>    <listnode value="">      <pagenode value="" para="url参数值">ContentPage/kufang/yuezoushi.aspx</pagenode>      <pagenode value="" para="url参数值">ContentPage/kufang/yuezoushi.aspx</pagenode>    </listnode>     </model>  <model value="" title="">    <listnode value="">      <pagenode value="">ContentPage/muju/mojuzong.aspx</pagenode>       </listnode>    <listnode value="">      <pagenode value="">ContentPage/muju/shimulvli1.aspx</pagenode>      <pagenode value="">ContentPage/muju/shizuopaoguangList.aspx</pagenode>    </listnode>    <listnode value="">     </listnode>    <listnode value=""></listnode>    </model>  <model value="" title="">    <listnode value="">      <pagenode value="">ContentPage/renzi/yuangong.aspx</pagenode>    </listnode>    <listnode value="">      <pagenode value="">ContentPage/renzi/jintie.aspx</pagenode>          </listnode>    <listnode value="">      <pagenode value=""></pagenode>    </listnode>    <listnode value="">      <pagenode value=""></pagenode>    </listnode>  </model>  <model value="系统设置" title="系统设置"></model></node></p>