MVC學習七：Razor布局之加載分部視圖【PartialView】

Partial View 顧名思義就是Html代碼片段，應用於此HTML代碼多次被頁面加載時使用。（類似於WebForm程序中的用戶控件）

注：PartialView和正常的View頁面在訪問時沒有任何區別

一、PartialView的創建

在Views文件夾下，選中你要添加PartialView的文件右擊=>添加=>點擊View=>彈出添加View窗口（和正常添加View頁面是一樣的），在窗口中勾選【創建分部視圖】下面就OK了。

二、加載分部視圖

1、通過Ajax方式

Index頁面代碼

@section scripts{
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btnLoadPart").onclick = function () {
                var xhr = new XMLHttpRequest();
                xhr.open("get", "/Home/LoginPart", true);//訪問控制器類Home中的LoginPart方法
                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>

分部視圖控制器類(Home)中的LoginPart方法代碼

        /// <summary>
        /// 加載 分部視圖的 Action 方法
        /// </summary>
        public ActionResult LoginPart()
        {
            return PartialView();//PartialView方法不會加載布局頁面【_ViewStart.cshtml】，View()方法會加載布局頁面【_ViewStart.cshtml】
        }

 2、View直接加載分部視圖

①通過@{Html.RenderPartial("分部視圖的View頁面路徑【~/Views/Home/LoginPart.cshtml】");} //無返回值

②通過@Html.Partial("分部視圖的View頁面路徑【~/Views/Home/LoginPart.cshtml】")//返回值類型為MvcHtmlString的字符串

③通過@{Html.RenderAction("在同一個控制器類中可以直接寫方法名【LoginPart】");}//無返回值

④通過@Html.Action("在同一個控制器類中可以直接寫方法名【LoginPart】")//返回值類型為MvcHtmlString的字符串

TempData傳值：一次請求，通過Html.Action或Html.RenderAction請求頁面時，Action方法之間的傳值

如圖：