代码改变世界

MVC左边导航，左边内容变，通过AJAX方法实现

2013-08-25 00:28  jiangys  阅读(2196)  评论(0)  编辑  收藏  举报

前台：

 1 @{
 2     ViewBag.Title = "爱湛师－个人信息";
 3     Layout = "~/Views/Shared/DefaultMaster.cshtml";
 4 }
 5 <link href="../../Content/JQueryUI/css/blitzer/jquery-ui-1.10.2.custom.min.css" rel="stylesheet"
 6     type="text/css" />
 7 <script src="../../Content/JQueryUI/js/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
 8 <link href="../../Content/themes/userinfo.css" rel="stylesheet" type="text/css" />
 9 <script src="../../Scripts/UI/jquery.blockUI.js" type="text/javascript"></script>
10 <script type="text/javascript">
11     $(function () {
12         $("#content-list").load("/UserInfo/PostManage-0");
13         $(".classInfo a").click(function () {
14             clearAction();
15             $(this).addClass('current');
16             var url = $(this).attr("url");
17             $.blockUI({ message: $('#loading') });
18             $.get(url, function (data) {
19                 $("#content-list").html(data);
20                 $.unblockUI();
21             });
22         });
23     });
24     function clearAction() {
25         $('.aside-body a').each(function () {
26             $(this).removeClass('current');
27         });
28     }
29     //刷新当前List
30     function refreshData() {
31         var url = $('[class=current]').attr("url");
32         $.get(url, function (data) {
33             $("#content-list").html(data);
34         });
35     }
36 </script>
37 <div id="localtion">
38     <strong>会员管理中心</strong>&nbsp;&gt;&nbsp;全部列表</div>
39 <div id="userlist">
40     <div class="aside-left">
41         <div class="aside-title">
42             <h3>
43                 我的爱湛师
44             </h3>
45         </div>
46         <h4 class="aside-heading">
47             信息管理
48         </h4>
49         <ul class="aside-body classInfo">
50             <li><a class="current" url="/UserInfo/PostManage-0" href="#">全部信息</a> </li>
51             <li><a url="/UserInfo/PostManage-1" href="#">显示中的信息</a></li>
52             <li><a url="/UserInfo/PostManage-2" href="#">审核中的信息</a> </li>
53             <li><a url="/UserInfo/PostManage-3" href="#">已删除的信息</a> </li>
54             <li><a url="/UserInfo/PostManage-4" href="#">过期信息</a> </li>
55         </ul>
56         <h4 class="aside-heading">
57             湛师贴吧
58         </h4>
59         <ul class="aside-body classInfo">
60             <li><a url="/Gossip/GossipManage" href="#">所有贴子</a> </li>
61         </ul>
62         <h4 class="aside-heading">
63             账户管理
64         </h4>
65         <ul class="aside-body classInfo">
66             <li><a url="/UserInfo/SetUserInfo" href="#">个人资料</a> </li>
67             <li><a url="/UserInfo/UpdatePassword" href="#">修改密码</a> </li>
68         </ul>
69     </div>
70     <div class="content">
71         <!--显示数据-->
72         <div id="content-list">
73         </div>
74         <!--加载数据-->
75         <div id="loading" style="display: none; cursor: default; height: 40px; padding-top: 15px;">
76             <h2>
77                 <img src="../../Content/Images/busy.gif" />
78                 正在加载数据，请稍候..</h2>
79         </div>
80     </div>
81 </div>
View Code

要被加载的另一个页面：

 1 @model Jyson.ZhanShiQuan.Model.UserModel
 2 @{
 3     Layout = null;
 4 }
 5 <script type="text/javascript">
 6     function OnUpdatePassword() {
 7         //alert("修改密码成功，下次登陆生效");
 8     }
 9 </script>
10 <div class="content-title">
11     <h3>
12         修改密码</h3>
13 </div>
14 <div class="maincontent" id="pagelist">
15     <div class="updatePassword">
16         @using (Ajax.BeginForm("UpdatePassword", "UserInfo", new AjaxOptions { OnSuccess = "OnUpdatePassword", UpdateTargetId = "pagelist" }))
17         {  
18             @Html.ValidationSummary(true)
19             <p>
20                 @Html.LabelFor(model => model.Password, "输入新密码:")
21                 @Html.EditorFor(model => model.Password)
22                 @Html.ValidationMessageFor(model => model.Password)
23             </p>    
24             <p>
25                 @Html.LabelFor(model => model.ConfirmPassword, "确认密码:")
26                 @Html.EditorFor(model => model.ConfirmPassword)
27                 @Html.ValidationMessageFor(model => model.ConfirmPassword)
28             </p>           
29             <div class="btnBox">
30                 <input type="submit" value="确定" />
31             </div>
32         }
33     </div>
34 </div>
View Code

最终效果：