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", );//清除缓存
xhr.onreadystatechange = function () {
if (xhr.readyState == && xhr.status == )
{
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方法之间的传值

如图:

MVC学习七:Razor布局之加载分部视图【PartialView】的更多相关文章

  1. MVC学习系列6--使用Ajax加载分部视图和Json格式的数据

    Ajax的应用在平时的工作中,很是常见,这篇文章,完全是为了,巩固复习. 我们先看看不使用json格式返回分部视图: 先说需求吧: 我有两个实体,一个是出版商[Publisher],一个是书[Book ...

  2. MVC5中,加载分部视图,常见的方式

    首先,新建一个MVC类型的Web项目: 然后在Model文件夹下定义一个Student实体: public class Student { public int ID { get; set; } pu ...

  3. 基于layer封装的异步加载分部视图弹出层

    背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的.所以下面的方法就解决了. ...

  4. MVC Ajax Helper或jQuery异步方式加载部分视图

    Model: namespace MvcApplication1.Models { public class Team { public string Preletter { get; set; } ...

  5. MVC中实现部分内容异步加载

    MVC中实现部分内容异步加载 action中定义一个得到结果集的方法 public ActionResult GetItemTree(string title, int itemid, int? pa ...

  6. [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading

    上次在<iOS学习笔记46——图片异步加载之SDWebImage>中介绍过一个开源的图片异步加载库,今天来介绍另外一个功能类似的EGOImageLoading,看名字知道,之前的一篇学习笔 ...

  7. Springboot学习04-默认错误页面加载机制源码分析

    Springboot学习04-默认错误页面加载机制源码分析 前沿 希望通过本文的学习,对错误页面的加载机制有这更神的理解 正文 1-Springboot错误页面展示 2-Springboot默认错误处 ...

  8. MVC加载部分视图Partial

    加载部分视图的方法:Partial() .RenderPartial() . Action() .RenderAction() . RenderPage() partial 与 RenderParti ...

  9. Flutter学习笔记(19)--加载本地图片

    如需转载,请注明出处:Flutter学习笔记(19)--加载本地图片 上一篇博客正好用到了本地的图片,记录一下用法: 首先新建一个文件夹,这个文件夹要跟目录下 然后在pubspec.yaml里面声明出 ...

随机推荐

  1. TOJ 1258 Very Simple Counting

    Description Let f(n) be the number of factors of integer n. Your task is to count the number of i(1 ...

  2. Android NDK 安装与配置

    本文主内容: 1.  Android NDK 安装 2.  安装Cygwin与使用NDK编译 3.  在Eclipse中集成C/C++开发环境CDT 4.  安装Sequoyah插件 5.  JNI编 ...

  3. 移动平台的meta标签(转)

    1.Meta 之 viewport 说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢? viewport即可视区域,对于桌面浏览器而言,viewport指的就 ...

  4. [转]Asp.Net MVC EF各版本区别

    本文转自:http://www.cnblogs.com/liangxiaofeng/p/5840754.html 2009年發行ASP.NET MVC 1.0版 2010年發行ASP.NET MVC ...

  5. 6、Modal

    1.首先Modal是一个内容窗格.通常用来做一个选择或编辑. 先来看一下 tabs.html 做了什么. /* --- tabs.html ----*/ <ion-navbar *navbar ...

  6. 在windows上用netsh动态配置端口转发

    使用多个虚拟机,将开发环境和工作沟通环境分开(即时通,办公系统都只能在windows下使用…),将开发环境的服务提供给外部访问时,需要在主机上通过代理配置数据转发. VirtualBox提供了端口转发 ...

  7. 码农的好助手:版本管理工具git的使用

    一.什么是github? GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub. GitHub 于 2008 年 4 月 10 日 ...

  8. 选择排序——Java实现

    一.排序思想 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理是: 从待排序列中选出最小(或最大)的一个元素,记录其下标(数组)的位置: 将记录的下标值与待排序列的第一个 ...

  9. overflow:hidden的用法

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <%@ Page Language="C#& ...

  10. 003Angular2中使用ng-bootstrap

    1.检查@angular/cli版本 命令行ng -v ,版本号必须大于1.0.0-beta.24 2.新建工程 工程所在目录,命令行ng new my-app --style=scss 带style ...