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来定义,分布视图就会获取到。


总结:


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











郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。