MVC 5 视图之公用代码

一、公共模板

  1、@RenderBody()

  在网站公用部分通过一个占位符@RenderBody()来为网站独立部分预留一个位置。然后私有页面顶部通过@{Layout="公用模板路径"}来引入公用模板,并在自身放到公用模板的位置。同时也可以设置ViewData或ViewBag设置网站标题,关键词等信息。

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "从这里可以设置网站标题";
}
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>

<body>
    <div>下面是页面私有部分</div>
    @RenderBody()
</body>
</html>

二、section-节

  节:@section

   通过在页面中加入节可以设置多个公用模板部分,

  @RenderSection("Footer")  定义一个节,当视图不提供这个节的代码时会报错:节未定义:“xxxxxx”。

  @RenderSection("Footer",false)  重载,如果设置了第二个参数为false,则说明这个节不是必须的,当视图不提供这个节的代码时也不会报错。  

  下面演示一个页脚节,下面是公用页面模板

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>

<body>
    <div>下面是页面私有部分</div>
    @RenderBody()
    @*<footer>@RenderSection("Footer")</footer>*@  //如果第二个参数不设置,那么如果当视图没有设置节的时候,则会提示错误。
    <footer>@RenderSection("Footer",false)</footer> //如果设置了第二个参数为flase,那么视图可以设置节也可以不设置节都没问题。
</body>
</html>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "设置顶部标题";
}
你在他乡还好吗?
@section Footer{
    这是页脚节
}

  这是整个页面会包含公用模板,主体和页脚节。

   当页面多个页面都使用到了同一个布局时,每个页面都要通过Layout属性来指定它的布局,会造成冗余,_ViewStart.cshtml可以用来消除这种冗余,在Views目录下又一个_ViewStart.cshtml文件,这个文件优先于同目录下任何视图的执行,可以用它来指定一个默认布局。

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

 这样所有的视图都会将此布局作为默认布局,如果有视图不想要此布局,可以在视图中重写Layout属性。如果不想要布局,则设置Layout=""即可。

三、分部视图

  分部视图顾名思义是一个视图的一部分,它允许程序员将视图中的一部分独立出来,在某些需要的页面引用。能够减少代码重复,提高页面代码重用性。

  例如:下面这个是返回一个分部视图的Action

   public ActionResult GetName()
   {
            return PartialView();
    }

在其它任意视图中,只要写如下代码:

    @Html.Partial("GetName")
    //或者可以写成这样
    @{
      Html.RenderPartial("GetName");
     }

 就能够在页面中加载GetName视图的完整代码了。一般来说,分部视图当中不应该包括js,或css因为这样,等于在大视图中到处都是分部视图的JS与CSS了,一个好的做法是私有JS与CSS通过一个节来引入,这样比较好。都是最好也不要有<head></head>里面的内容,以及<body></body>标签。因为如果有了这些,还不如搞成布局呢。分部视图这个东西最有用的地方在于能够把页面中共同的部分提取出来,在用的时候简单引入就行,而实际上,分部视图除了不能指定布局之外,几乎跟普通视图一样,很爽的一个东西。引用视图可以通过:

    @Html.Partial("分部视图名称")    //有或者下面三行
    @{
      Html.RenderPartial("分部视图名称");
     }

另外分部视图中要注意@Html.Partial()中的重载,这些重载常常有用,如果实在欠缺,就自己写扩展方法来实现。来看看这些重载方法的方法签名。

        public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName);
        public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName, object model);
        public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);
        public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName, object model, ViewDataDictionary viewData);

   由方法签名中可以看出来,这些都是扩展方法,@Html.Partial是可以将数据实体和数据字典给分部视图的,然后分部视图那边可以通过主视图传过去的数据再生成视图。

给个例子:传递一个Model过去分部视图,然后分部视图那边根据传入的数据再解释视图。来看Controller代码

namespace MvcStart.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            Man_Model man = new Man_Model();
            man.Id = 1;
            man.Name = "张飞";
            man.Age = 23;
            return View(man);
        }

        public ActionResult getName(object o)
        {
            Man_Model man = o as Man_Model;
            return PartialView(man);
        }
    }

    public class Man_Model
    {
        public int Id { get;  set; }
        public string Name { get; set; }
     public int Age { get; set; }
    }
}

视图代码:Index.cshtml

@model MvcStart.Controllers.Man_Model
@Model.Id
@Model.Age

@Html.Partial("getId",Model);

getName.cshtml

@model MvcStart.Controllers.Man_Model
<div style=" line-height: 1.5 !important;">>@Model.Name</div>

生成的HTML代码为:

<html>
<head>
    <title>Index</title>
</head>

<body>
 1 23
<div style="background-color:red">张飞</div>
</body>
</html>

 例子写的有点牵强,看不出有什么作用,但是真的是通过主视图传递一个man_Model到分部视图,再由分部视图解析返回的Html代码,这个东西能够实现什么呢?举个简单的例子,如果分部视图里面的代码是由SEO人员操作的话,例如网页标题,关键词,描述,这个东西值提供了一个框在后台让SEO人员设置,而设置的结果就是保存到分部视图的代码里面的话?那么只需要给传入一个Model到分部视图,分部视图的标签如Model.Name就能够自动解析出真正的"张飞"数据。

  2013-5-5,可能之前的理解有些错误,是可以传递Model到分部视图这点不假,但是如果一个视图加载了一个分部视图,那么这个分部视图所得到的数据会和原来页面中的数据一模一样。

  举个例子说明

  Controller代码:

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            Person p = new Person();
            p.Id = 1;
            p.Name = "张三";
            ViewData["abc"] = "测试ViewData";
            return View(p);
        }

        public ActionResult IndexPartial()
        {
            return View();
        }
    }

    public class Person
    {
        public int Id { get; set; }
     public string Name { get; set; }
    }
}

  主视图代码:

@model MvcApplication1.Controllers.Person

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Model.Id
@Model.Name
@ViewData["abc"] = "123"
@Html.Partial("IndexPartial");

  分部视图代码:

@model MvcApplication1.Controllers.Person

@{
    ViewBag.Title = "IndexPartial";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<br/>
分部视图的内容
@Model.Name
@Model.Id
@ViewData["abc"]
分部视图的内容
<br/>

  留意到以上主视图并未传递任何数据给分部视图,但是执行结果如下,你可以看到分部视图的确可以获得主视图中的数据:

  

  再来记录一个技巧,例如一个网站在调试的时候用的是一个测试路径,上传之后用的是真正的域名,这个时候我们可以将域名写在配置文件或XML文件里,运行是读取,这时候我们可以定义一个静态属性,该属性返回真正的域名。在所有的视图中都可以@命名空间.类.静态变量 获得真正的域名。也就是说,在视图中一些小的可变化片段都可以这样来获取。

  另外,特别需要注意Html.RenderAction()之类的方法还支持传入参数,具体方式如下:

@Html.RenderAction("Left_Nav", "Nav", new{ ParentId = 3 });

  跨区域调用的方式:

@{ Html.RenderAction("Datagrid", "DataList", new { area = "Common" });    }

  在Action里面直接加个参数ActionResult(int ParentId)就能够取得参数值。area会被MVC所截取,分析为跨区域调用。

  区别:

  Partial 分部视图

  另外还有Html.RenderPartial和Html.RenderAction,都是用于在模板页中显示一个功能相对独立的块。

  Partial与RenderPartial的相同点

    两者都用于获取一个分部视图。

  Partial与RenderPartial的区别

  1. Partial有返回值(MvcHtmlString);RenderPartial没有返回值(Void)。

    有返回值可以@Html.Partial()

    而没有返回值就直接@{ Html.Partial(); }

    Partial返回字符串,因此你可以用一个变量来接收返回的Html字符串。但是RenderPartial是将结果写入到Response中,因此没有办法用变量来接收。

    以上两种写法等价。

  Action与RenderAction的区别

  都用于引入一个Action的代码,其区别与上面Partial和RenderPartial的区别相同

  两者的相同点

  RenderPartial和RenderAction通常都被用来显示一个功能相对独立的“块”,比如说显示菜单或者导航条。 两者输出的结果都被作为调用的View的一部分显示。

  两者的不同点

  1. RenderPatial的数据来自于调用的View,而RenderAction来自自己。
  2. RenderAction会发起一个新的Request,而RenderPatial不会。
  3. RenderPartial方法是return PartialView();而RenderAction是return View()。
时间: 2024-08-01 22:46:30

MVC 5 视图之公用代码的相关文章

Asp.net MVC 视图之公用代码

一.公共模板 1.@RenderBody() 在网站公用部分通过一个占位符@RenderBody()来为网站独立部分预留一个位置.然后私有页面顶部通过@{Layout="公用模板路径"}来引入公用模板,并在自身放到公用模板的位置.同时也可以设置ViewData或ViewBag设置网站标题,关键词等信息. @{ Layout = "~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "从这里可以设置网站标题&quo

MVC添加动态视图的参考代码。重点是添加部分视图的使用方法,非常有用的代码!!!!!!!!!!!!!!

这是在model里的两个查询方法 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Mvcyemian.Models { public class NewsBF { private mydboDataContext _Context = new mydboDataContext(); //通过type查询新闻分类 public List<News> Sel

ASP.NET MVC 5 - 视图

原文:ASP.NET MVC 5 - 视图 在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所引入的Razor视图引擎(Razor view engine).Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优雅的方式来使用C#语言创建所要输出的HTML.用Razor编写一个视图模板文件时,将所需的字符和键盘敲击数量降到了最低,并实现

Asp.Net Mvc Razor视图语法

    Asp.Net Mvc Razor视图语法 [email protected]符号输出变量值 2.使用C#语法嵌套Html标签循环输出NameList的值:使用@{C#语法代码}: 3.输出@符号使用两个@@ 4.服务器注释使用@*注释内容*@ [email protected]:输出文本,或者使用<text></text> 6.在@()括号进行简单的操作或运算 [email protected]()或@{}可以输出带有html标签的字符串 8.Razor可以智能识别邮箱写

ASP.NET MVC 对于视图引擎的优化

我经常使用asp.net MVC框架来做网站.总的来说,MVC框架是一个非常优秀的框架.相对于曾经的web form模式,我个人感觉分工更加合理思路也更加清晰,但是交给开发人员的工作也相对变多了. 当使用标准配置的时候在新建了控制器,还没有建视图的时候,运行网站,访问这个我们可以看到 因此我们可以判断,默认的视图引擎首先加载的顺序如上图所示 ~/Views/Home/Index.aspx~/Views/Home/Index.ascx~/Views/Shared/Index.aspx~/Views

Mvc 翻页查询,代码很有用

Model里的代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Mvc翻页查询.Models { public class CarBF { private masterDataContext _Context = new masterDataContext(); public List<Car> Select(int pageSize,int pag

ASP.NET MVC 部分视图

转自http://blog.csdn.net/skyandcode/article/details/22594355 [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 User Control.我们的页面往往会有许多重用的地方,可以进行封装重用.使用 部分视图 :  1. 可以简写代码.2. 页面代码更加清晰.更好维护. [如何使用] 在视图里有多种方法可以 加载部分视图,包括: Partial()  Action()  RenderPartial()  Ren

ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门

原文:ASP.NET Core 入门教程 7.ASP.NET Core MVC 分部视图入门 一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Razor)强类型分部视图教程 2.本教程环境信息 软件/环境 说明 操作系统 Windows 10 SDK 2.1.401 ASP.NET Core 2.1.3 IDE Visual Studio Code 1

mvc的视图中显示DataTable的方法

mvc的视图中显示DataTable的方法: 不断的循环画出table @{ ViewBag.Title = "ShowDataTable"; } @using System.Data; @model Models.ConModel @{ var table = Model.ExcelTable as DataTable; } <script src="~/Scripts/My97DatePicker/WdatePicker.js"></scrip