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>