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

前台：

@{
    ViewBag.Title = "爱湛师－个人信息";
    Layout = "~/Views/Shared/DefaultMaster.cshtml";
}
<link href="../../Content/JQueryUI/css/blitzer/jquery-ui-1.10.2.custom.min.css" rel="stylesheet"
    type="text/css" />
<script src="../../Content/JQueryUI/js/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
<link href="../../Content/themes/userinfo.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/UI/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#content-list").load("/UserInfo/PostManage-0");
        $(".classInfo a").click(function () {
            clearAction();
            $(this).addClass('current');
            var url = $(this).attr("url");
            $.blockUI({ message: $('#loading') });
            $.get(url, function (data) {
                $("#content-list").html(data);
                $.unblockUI();
            });
        });
    });
    function clearAction() {
        $('.aside-body a').each(function () {
            $(this).removeClass('current');
        });
    }
    //刷新当前List
    function refreshData() {
        var url = $('[class=current]').attr("url");
        $.get(url, function (data) {
            $("#content-list").html(data);
        });
    }
</script>
<div id="localtion">
    <strong>会员管理中心</strong>&nbsp;&gt;&nbsp;全部列表</div>
<div id="userlist">
    <div class="aside-left">
        <div class="aside-title">
            <h3>
                我的爱湛师
            </h3>
        </div>
        <h4 class="aside-heading">
            信息管理
        </h4>
        <ul class="aside-body classInfo">
            <li><a class="current" url="/UserInfo/PostManage-0" href="#">全部信息</a> </li>
            <li><a url="/UserInfo/PostManage-1" href="#">显示中的信息</a></li>
            <li><a url="/UserInfo/PostManage-2" href="#">审核中的信息</a> </li>
            <li><a url="/UserInfo/PostManage-3" href="#">已删除的信息</a> </li>
            <li><a url="/UserInfo/PostManage-4" href="#">过期信息</a> </li>
        </ul>
        <h4 class="aside-heading">
            湛师贴吧
        </h4>
        <ul class="aside-body classInfo">
            <li><a url="/Gossip/GossipManage" href="#">所有贴子</a> </li>
        </ul>
        <h4 class="aside-heading">
            账户管理
        </h4>
        <ul class="aside-body classInfo">
            <li><a url="/UserInfo/SetUserInfo" href="#">个人资料</a> </li>
            <li><a url="/UserInfo/UpdatePassword" href="#">修改密码</a> </li>
        </ul>
    </div>
    <div class="content">
        <!--显示数据-->
        <div id="content-list">
        </div>
        <!--加载数据-->
        <div id="loading" style="display: none; cursor: default; height: 40px; padding-top: 15px;">
            <h2>
                <img src="../../Content/Images/busy.gif" />
                正在加载数据，请稍候..</h2>
        </div>
    </div>
</div>

要被加载的另一个页面：

@model Jyson.ZhanShiQuan.Model.UserModel
@{
    Layout = null;
}
<script type="text/javascript">
    function OnUpdatePassword() {
        //alert("修改密码成功，下次登陆生效");
    }
</script>
<div class="content-title">
    <h3>
        修改密码</h3>
</div>
<div class="maincontent" id="pagelist">
    <div class="updatePassword">
        @using (Ajax.BeginForm("UpdatePassword", "UserInfo", new AjaxOptions { OnSuccess = "OnUpdatePassword", UpdateTargetId = "pagelist" }))
        {  
            @Html.ValidationSummary(true)
            <p>
                @Html.LabelFor(model => model.Password, "输入新密码:")
                @Html.EditorFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)
            </p>    
            <p>
                @Html.LabelFor(model => model.ConfirmPassword, "确认密码:")
                @Html.EditorFor(model => model.ConfirmPassword)
                @Html.ValidationMessageFor(model => model.ConfirmPassword)
            </p>           
            <div class="btnBox">
                <input type="submit" value="确定" />
            </div>
        }
    </div>
</div>

最终效果：