MVC左邊導航，左邊內容變，通過AJAX方法實現

jiangys發表於2013-08-25
MVC

前臺：

 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

最終效果：

 

 

 

相關文章