博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
asp.net mvc 的 视图(view )的模块化开发
阅读量:6915 次
发布时间:2019-06-27

本文共 1849 字,大约阅读时间需要 6 分钟。

目前所在项目有一个视图,几个模块都涉及到,对应不同的开发人员,虽然有SVN在管理,但代码冲突时有发生。并且大家的代码挤于其中,逻辑比较容易混乱。

将不同部件独立出去,实有必要。

分离方式,我知道的有 3 种:

1、利用JS动态加载子视图

将分离内容放置在一个视图里面,视图还可以对应有控制器。主视图加载过程中,或者运行过程中,再用JS去请求、加载这个子视图:

var div = ...var url = "@Url.Content("~/controller/GetDataByView?id=")" + id;getViewRequest(url, {}, function(data){        div.empty().html(data);    });function getViewRequest(url, params, onsuccess, onerror) {    $.ajax(    {        type: 'get',        url: url,        data: params,        contentType: "text/html; charset=utf-8",        success: function (data) {            if (onsuccess != undefined && onsuccess != null) {                onsuccess(data);            }        },        error: function (data) {            if (onerror != undefined && onerror != null) {                onerror(data);            }        }    });}

2、Html.RenderAction

这个与1的区别主要是加载方式不同。1是主视图出来后,在前端用JS动态加载,会比较迟才出来;2是与主视图一同输出到前端。

2与3的区别在于,2的数据来源于控制器,3的数据来源于主视图。3没有控制器。

有关Html.RenderAction,可见拙作:

3、Html.RenderPartial

相当于shtml里面的inclue,<!--#include virtual="/template/css.htm"-->。只是接入一个视图,该视图并没有控制器。数据可由主视图传送给它。

下面是具体的例子:

主视图控制器:

[csharp] 
  1. public ActionResult Index()  
  2. {  
  3.     ……  
  4.     //ViewTag是自定义类  
  5.     ViewBag.TagArray = new IList<ViewTag>[2]{list,mylist};  
  6.   
  7.     return View();  
  8. }  

主视图:

[html] 
  1. <div class="bottomTabs" style="bottom: 36px; left: 240px;">  
  2.     @{Html.RenderPartial("BottomTags", (Object)ViewBag.TagArray);}    
  3. </div>  

其中,BottomTags是子视图名称(BottomTags.cshtml),ViewBag.TagArray是传给它的Model。一定要强制转换,不能直接用ViewBag。


子视图BottomTags

[csharp] 
  1. @using System.Text;  
  2.   
  3. @{  
  4.     //接收Model。在视图里面,Model也是一个类似Html一样的东西,无须定义就可以使用。实际上,Model是ViewData的属性。  
  5.     IList<ViewTag>[] array = (IList<ViewTag>[])Model;  
  6.     IList<ViewTag> list = array[0];  
  7.     IList<ViewTag> mylist = array[1];  
  8. }  
  9. <ul class="navList clx" id="J_GisSiteNav">……</ul>  
  10. <script type="text/javascript">……</script>  

如此,子视图可无缝接合于主视图矣。

转载于:https://www.cnblogs.com/leftfist/p/4257795.html

你可能感兴趣的文章
自己动手在win2003系统中添加虚拟网卡
查看>>
Hive删除数据库
查看>>
PROFILE - 库存:物料状态支持 控制【物料状态定义】禁止的事务处理
查看>>
Docker compose学习笔记
查看>>
[AR]Vumark(下一代条形码)
查看>>
096实战 在windows下新建maven项目
查看>>
阿里云产品介绍(一):云服务器ECS
查看>>
linux设置系统时间
查看>>
班级里将来有成就的学生往往都是那些成绩中等的学生
查看>>
php iframe 上传文件
查看>>
ES6的Generator函数
查看>>
dockerfile 介绍
查看>>
通过nginx搭建hls流媒体服务器
查看>>
java--------抽象类与接口的区别
查看>>
vue 目录结构与文件配置说明
查看>>
单点登录CAS-Demo
查看>>
物联网数据卡系统源码——物联网技术架构图
查看>>
Linux内存使用情况以及内存泄露分析之工具与方法
查看>>
安装 Ruby, Rails 运行环境
查看>>
Office EXCEL 如何保留一位小数,并且单击这个单元格的时候没有一大串小数
查看>>