使用ASP.NET MVC局部视图避免JS拼接HTML，编写易于维护的HTML页面

以前使用ASP.NET WebForm开发时，喜欢使用Repeater控件嵌套的方式开发前台页面，这样就不用JS拼接HTML或者后台拼接HTML了，写出的HTML页面美观、简捷、易于维护，由于不用JS拼接HTML，所以JS写的也很少。

最近使用ASP.NET MVC开发，前台页面的功能比较复杂，每次刷新整个页面的话体验会很差，所以通过JS控制页面元素，实现局部刷新。刚开始使用的方法是通过JS在前台拼接HTML，结果JS写的很长，要命的事，每增加一个新功能，都要拼接很长的HTML，结果页面的JS越写越多。考虑到后期可能难以维护，所以花了半天的时间，对页面进行了大改，把这一个页面拆分成了四个页面，通过jQuery的load方法实现局部更新，修改之后页面清爽多了。

本来想使用ASP.NET MVC的PartialView实现，结果路由的问题遇到点麻烦。最后发现直接使用View也可以，就用View实现了，效果是一样的，不必太钻牛角尖。

模板页面代码(用了两层Layout嵌套)：

Layout.cshtml页面代码：

@{
    ViewBag.Title = "货机管理";
}

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <style type="text/css">
        body
        {
            font-size: 12px;
            padding: 0;
            margin: 0;
            background-color: #666;
        }

        .ul-menu
        {
            float: left;
            margin: 0;
            padding: 0;
            margin-left: 3px;
        }

            .ul-menu li
            {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
                width: 45px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                margin-right: 20px;
                border: solid 1px #999;
                cursor: pointer;
            }
    </style>
    <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        function gotourl(url) {
            window.location = url;
        }
    </script>
</head>

<body>
    <div style="width: 960px; margin: auto; background-color: #fff; padding: 7px;">
        <div style="height: 110px; border: solid 1px #999;">
            <div style="float: left; width: 105px; height: 65px; margin: 3px; text-align: center; border: solid 1px #999;">
                <div style="font-size: 16px; margin-top: 12px;">
                    IMU
                    <br />
                    120×90
                </div>
            </div>
            <div style="float: right; padding: 5px; margin-top: 5px;">
                <div style="float: left;">
                    欢迎您，<span>XXX</span> 【退出】
                </div>
                <div style="float: left; margin-left: 50px;">
                    @{
                        string[] weekDays = { "星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
                    }
                    当前时间 @DateTime.Now.ToString("yyyy-MM-dd（" + weekDays[(int)DateTime.Now.DayOfWeek] + "）HH:mm")
                </div>
                <div style="float: left; margin-left: 50px; margin-right: 5px;">
                    帮助中心
                </div>
            </div>
            <div style="margin-top: 76px;">
                <ul class="ul-menu">
                    <li onclick="gotourl('@Url.Content("~/Backstage/MachineMng/MachineInfo/Index")')">货机</li>
                    <li onclick="gotourl('@Url.Content("~/Backstage/MachineMng/StartCargo/Index")')">运营</li>
                    <li>交易</li>
                    <li>系统</li>
                </ul>
            </div>

        </div>
        @RenderBody()
    </div>
</body>
</html>

View Code