MVC-Razor分布视图

什么是分布视图？

Mvc时代的分部视图，web form时代的对应物ascx分部控件。当然MVC对分布视图具有更强的控制能力。

分布视图的优点？

1、分布视图可以使系统插件化（各个功能模块都是独立的，减少开发，增加重用）。

2、分工合作（适应群体开发）。

3、实现简单。

分布视图的实现？

原理：我们都知道MVC是通过Action方法对应到view中的，Action方法可以通过ParticalView方法以PartialViewResult方式返回分布视图。

一般用在Ajax请求部分代码。

具体Dome：

首先，在MVC4中建立一个控制器为：HomeController：

1、在主视图中加载分布视图

我们在控制器中修改代码为：

HomeController：

<span style="font-family:KaiTi_GB2312;font-size:18px;">      public ActionResult Index()
{
return View();
}

/// <summary>
/// 加载分布视图的action方法
/// </summary>
/// <returns></returns>
public ActionResult LoginPart()
{
return View();
//不运行分布视图中的加载分布视图的模板页
}
</span>

添加视图：Index和LoginPart，其中LoginPart选择为分布视图。

Index视图修改代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">Index:
@{
ViewBag.Title = "Index";
}

@section scripts{
<script type="text/javascript">
var a = "123456";
window.onload = function () {
document.getElementById("btnLoadPart").onclick = function () {
var xhr = new XMLHttpRequest();
xhr.open("get", "/Home/LoginPart", true);
xhr.setRequestHeader("If-Modified-Since", 0);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var htmlNew = xhr.responseText;
document.getElementById("divCon").innerHTML = htmlNew;
}
};
xhr.send(null);

};
};
</script>
}

<input type="button" value="请求分布视图" id="btnLoadPart" />
<div id="divCon"></div>
<h2>Index</h2>
<table>
<tr>

</tr>
</table>
</span>

2、无论是分布视图还是普通视图都要首先加载_ViewStart视图

注意：其实所有的视图（不管是不是分布视图）如果没有特殊说明，加载的时候，都会首先加载_ViewStart视图，该视图布局采用Shared文件夹_Layout视图。因此，如果我们在Shared文件夹_Layout视图中编辑，所有的视图都将会跟着改变。

我们编辑_ViewStart视图：

<span style="font-family:KaiTi_GB2312;font-size:18px;">@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
我哈哈哈~~~~
</span>

运行时，单击“请求分布视图”出现该该界面：



我们可以看到图中有两个“我哈哈哈~~~”，因为不但是index视图会加载_ViewStart视图，而且分布视图LoginPart，也会加载_ViewStart视图，因此就会被加载两遍。

我们知道分布视图可以作为视图的一部分被加载到主视图上，那么代码该怎么写？

在Index.cshtml代码中添加代码：

 

<span style="font-family:KaiTi_GB2312;font-size:18px;"><divid="divCon2">

@{Html.RenderPartial("~/Views/Home/LoginPart.cshtml");}

@*在加载index视图的时候，就加载了上面AJax的代码*@

</div></span>

效果：



ok了，这段代码就可以实现在加载主视图的时候就加载了分布视图。

3、如果给分布视图传递参数？

在HomeController中修改LoginPart 函数：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> public ActionResult LoginPart()
{
// ViewData["boyFriend"] = "小勇~~~~~" + ViewData["a"];
ViewData["boyFriend"] = "小勇~~~~~";
return PartialView();
//return View();
//不运行分布视图中的加载分布视图的模板页
}
</span>

我们给视图传递了一个值ViewData[“boyFriend”],我们从Index中发出请求，效果是这样的：

4、一张图反应视图中的调用关系：

如我们所愿，值被传过来了，我们画出来这个调用关系图：



一张图就很清楚了把，同时要注意的是，如果从index中加载分布视图的时候，如果在控制器中Index函数中定义的ViewData，分布视图是无法获取到这个值的，但是用TempData来定义，分布视图就会获取到。

总结：

做项目中我们大多是很多在一起做，所以免不了是要用到分布视图的，分布视图体现了：化整为零、团队合作的思想。