技不如人

ASP.NET MVC项目中，某个视图上，我用JS动态加载一个WebApi方法，这个方法负责显现一些表格。我将表格连同数据在这个方法里一股脑返回，也就是html标记、样式和数据都混杂在一起。

”这样逻辑不清晰，有点乱“，项目组的技术牛人说。后来他忍不住加了个子view，将表格写在里面，在controller里请求数据，再填充到这个表格里。呈现和数据分离。我认为他这样做很有道理。尽管我之前没有这样做，也有可能是项目赶，并且之前的操作先决条件已与现在不同，但不得不承认，人家就是比我强。起码我从一开始就没有这样的意识。

有关用JS动态加载子视图，方法如下：

<div id="divContainer"></div><!-- 加载子view的容器 -->

<script type="text/javascript">
    $(function(){
        var url = "@Url.Content("~/Controller/MyView/888")";
        
        loadViewFromRequest("divContainer",url, {}, function(data){
            alert("Hello World!");
        });
    });

    //  异步获取部分页面
    //  id 需要进行渲染的容器id
    //  url 异步请求页面的url链接
    //  params 链接附加的参数,建议json格式,会自动转换为url参数格式
    //  onsuccess 执行成功触发事件
    //  onerror 错误时触发事件
    loadViewFromRequest: function (id, url, params, onsuccess, onerror) {
        $.ajax(
        {   
            type: 'get',
            url: url,
            data: params,
            contentType: "text/html; charset=utf-8",
            success: function (data) {
                if ($(id).length == 0) {//没有该容器，就TM创建一个
                    $('body').append("<div id='" + id.replace(/#/, "") + "'></div>");
                }
                $(id).html(data);
                if (onsuccess != undefined && onsuccess != null) {
                    onsuccess(data);
                }
            },
            error: function (data) {
                if (onerror != undefined && onerror != null) {
                    onerror(data);
                }
            }
        });
    }
</script>

版权声明：本文为博主原屙文章，喜欢你就担走。