首页 > 其他分享 >Layout布局

Layout布局

时间:2024-06-05 13:11:22浏览次数:21  
标签:Layout ActionLink 布局 bundles Html new 页面

原文链接:https://www.cnblogs.com/maoyazhi/p/5946455.html

layout方式布局就是相当于一个模板一样的,相当于定义好了框架,作为一个母版页的,使用布局或母版页的好处是,我们不需要在每个视图中都设置一份相同的内容,在它下面的页面需要修改不同代码的地方使用@RenderBody()方法。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>我的网站 - @Page.Title</title>
    </head>
    <body>
        @RenderBody()
    </body>
</html>

  子页面中:

@{
    Layout = "/LayoutPage.cshtml";
    Page.Title = "测试页面哦";
}

<p>This is a layout test</p>

前面我们在创建View的时候,我们勾选了使用布局或母版页,但是我们没有告诉vs使用哪一个,默认即是空的。在项目的Views文件中,我们可以看到一个_ViewStart.cshtml文件,里面的内容是:

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

 

MVC呈现视图的时候,默认情况下会自动查找_ViewStart.cshtml文件,以它作为母版来呈现用户请求的视图。母版的呈现是MVC内部处理的,这种以下划线(_)开头的视图文件,一般是不能直接返回给用户。

如果创建一个视图不想使用Layout,则可以在创建视图的对话框取消“使用布局和母版页”选项,创建后会生成如下代码:

@{ Layout = null; } 
<!DOCTYPE html>
<html>
<head>
    <title>About</title>
</head>
<body>
    <div>        
    </div>
</body>
</html>

  由于没有使用Layout,视图中必须包含用于呈现HTML页面每个基本元素,而且必须指定Layout=null。

Page
 page是当需要在一个页面中,输出另外一个razor文件的内容时候用到,比如头部或者尾部这些公共的内容时候需要用到。输出就使用 @RenderPage()方法

如:A页面中也要把B页面的内容输出

A页面:

<p>
@RenderPage("/b.cshtml")
</p>

B页面:

<font color="red">这是一个子页面</font>

  

Section区域
 RenderSection是定义在Layout的中使用的,可以理解成是为了定义该母版页公共部分,但是其子页面有例外,这时可以使用RenderSection来定义;

使用方法是在在要Layout的父页面中使用@RenderSection("Section名称 ",required: false),第一个参数是section的名称,第二个参数是来定义是否所有的子页面都需要定义这个section,定义显示,没有定义则不显示;

定义:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>我的网站 - @Page.Title</title>
    </head>
    <body>
        @RenderSection("sideMenu",required: false)
        @RenderBody()
    </body>
</html>

 在它的子页面中:

@section sideMenu{
    Hello This is a section implement in About View.
 }

 

css/js文件引用
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

上面几行加载 css 和 js 文件,这些文件在 App_Start  > BundleConfig.cs 中指定:

public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

// 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
// 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));

// 将 EnableOptimizations 设为 false 以进行调试。有关详细信息,
// 请访问 http://go.microsoft.com/fwlink/?LinkId=301862
BundleTable.EnableOptimizations = true;
}

 

@HTML
@Href("~/")
表示网站的根目录

@Html.Raw(Module.Content)
@Html.Raw(Module.Content)  输出HTML;如:@Html.Raw('<font color='red'>红字</font>'),就会显示出红色的”红字“;

@Html.Action(action, controller)
加载局部页面。例如在模板页中使用:@Html.Action("Contact", "Company")

在CompanyController中有如下方法:

public PartialViewResult Contact(){

   return PartialView();
}

@Html.Partial("PartialViewName")
@Html.Partial("PartialViewName"):输出一个Partial视图

我的理解是把内容分块进行分割;

@Html.ActionLink()
@Html.ActionLink("linkText", "actionName")
该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法
默认控制器为当前页面的控制器,如果当前页面的控制器为Products,则 Html.ActionLink("detail","Detail")
则会生成 <a href="/Products/Detail">all</a>
 

 @Html.ActionLink("linkText", "actionName", "controlName")
该重载比第一个重载多了一个参数,他指定了控制器的名称,

如Html.ActionLink("detail","Detail","Products")则会生成

<a href="Products/Detail">all</a>
 

@Html.ActionLik("linkText", "actionName", routeValues)

routeValue可以向action传递参数,如Html.ActionLink("detail","Detail", new { id=1})

会生成 <a href="Products/Detail/1">detail</a>,

此处假设当前的控制器是Products.
 

 @Html.ActionLink("linkText", "actionName", routeValues, htmlAttributes)

htmlAttribute可以设置<a>标签的属性,

如 Html.ActionLink("detail","Detail", new{id=1}, new{ target="_blank"})

会生成 <a href="Products/Detail/1" target="_blank">detail</a>,

需要主要的是如果写成 new{ target="_blank", class="className"}则会报错,

因为class是关键字,此处应该写成 @class="className"。
 

@Html.ActionLink("linkText", "actionName", "controlName", routeValues, htmlAttributes)

该重载包含了上面提到的所有参数类型。

 

 

 

 

标签:Layout,ActionLink,布局,bundles,Html,new,页面
From: https://www.cnblogs.com/Dongmy/p/18232786

相关文章

  • Flutter 中的 LayoutBuilder 小部件:全面指南
    Flutter中的LayoutBuilder小部件:全面指南Flutter是一个功能丰富的UI框架,它允许开发者使用Dart语言来构建高性能、美观的跨平台应用。在Flutter的布局系统中,LayoutBuilder是一个强大的组件,它可以根据父容器的约束动态调整其子组件的布局。本文将为您提供一个全面......
  • PyQT5之网格布局多图片显示
    选择文件夹,显示图片importosfromPyQt5importQtWidgetsfromPyQt5importQtCore,QtGuiimportsysimportcv2classButtonPanel(QtWidgets.QWidget):def__init__(self,*args,**kwargs):super().__init__(*args,**kwargs)self.image_files......
  • Java实现简易的计算器布局
    其实计算器本身的功能,每个编程语言本身就能实现,比如说我在python中敲击“3+2”的命令,返回值就是5。那么如果需要设计计算器,则关键的部分在于整个的算法页面布局,和功能的逻辑关系,以下我使用Java实现了计算器的布局即简易的功能。定义类Calculator的类,然后在中间添加容器界面,实......
  • PyQT5之QPushButton和布局
    fromPyQt5importQtWidgetsfromPyQt5importQtCore,QtGuiimportsysimportcv2defclick_btn1():print("clickbutton1")txt_label.setText("我是按钮1点击之后")defclick_btn2():print("clickbutton2")defclick_......
  • MAUI:Compatibility.Layout<T> 不显示任何内容
    我在Xamarin->MAUI转换中苦苦挣扎,并被Compatibility.Layout<T>中的问题所困扰,它无法显示任何内容。我希望看到一个标签(相同的代码可在Xamarin表单中使用)。下面是Maui和Xamarin的代码和截图。我遗漏了什么?以下是我的MAUI代码(无法正常......
  • Python---PyQT5水平垂直布局
    fromPyQt5importQtWidgetsfromPyQt5importQtCore,QtGuiimportsysimportcv2if__name__=='__main__':app=QtWidgets.QApplication(sys.argv)main_win=QtWidgets.QMainWindow()main_win.setWindowTitle("QLabel图像显示演示"......
  • css网格布局
    CSS网格布局网格是一组相交的水平线和垂直线,它定义了网格的列和行。CSS提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位。以下是一个简单的网页布局,使用了网格布局,包含六列和三行:  »浏览器支持目前最新的一些浏览器版本......
  • P4878 [USACO05DEC] Layout G
    原题链接大概思路我们已知一组不等式的解可以通过建边然后求最短路/最长路来得出而这里要求\(D_n-D_1\)的最大值,所以我们要求最短路。补充为什么要求最短路?对于任何一组不等式,我们都可以写成\(a_i-b_i\leqc_i\)建边含义假设\(D_n-D_1\)有最大值,那么通过这组不等......
  • 布局俄罗斯电商独立站正当时/附独立站收款
    大家都知道,俄罗斯是一个幅员辽阔的国家,国土跨越两个大陆,即欧洲和亚洲,横跨11个时区,与14个国家接壤,总人口为1.46亿人(俄乌战争后,可能没这么多了),是世界上人口最多的国家之一。俄罗斯总人口中有1.31亿人使用互联网,互联网普及率高达90%,普及率非常高!2023年俄罗斯GDP总额为2.24.万亿......
  • JavaFX 常见布局组件的使用
    Laytout简介JavaFX提供了多种布局管理器(LayoutManagers),它们用于自动管理用户界面组件的位置和大小。布局管理器可以简化UI设计,因为它们会根据窗口的大小变化自动调整其中的组件。布局组件JavaFX包含以下布局组件:布局名称中文说明AnchorPane锚点布局允许开发......