百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

在asp.net core中Web系统 MVC视图的使用

yuyutoo 2024-12-03 19:35 1 浏览 0 评论

一.MVC视图

  在Web开发的MVC和Razor中,都有使用视图,在Razor中称为"页"。.cshtml视图是嵌入了Razor标记的HTML模板。 Razor 标记使用C#代码,用于与HTML 标记交互以生成发送给客户端的网页。在MVC目录结构中,Views / [ControllerName] 文件夹下用于创建视图,其中Views/Shared 文件夹下的视图是控制器共享的视图。

  

  1.1 视图页Razor 标记

    下面是Views/Home 文件夹中创建一个 About.cshtml 文件,呈现的视图如下:

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

    Razor 标记以 @ 符号开头。后面的大括号 { ... } 括住的是 Razor 代码块,是运行 C# 语句。 只需用 @ 符号来引用值,即可在 HTML 中显示这些值。比如上面h2和h3标签。

  1.2 控制器指定视图

    通常以 ViewResult 的形式从Action返回结果到视图,这是一种 ActionResult结果类型(Web api中有讲到)。但通常不会这样做。 因为大多数控制器均继承自Controller,因此只需使用 View 方法即可返回 ViewResult。示例如下:

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";
    
    return View();
}

    View 方法有多个重载。 可选择指定:

    //要返回的显式视图
    return View("Orders");
    //要传递给视图的模型(实体)对象
    return View(Orders);
    //视图和模型
    return View("Orders", Orders);

  1.3 视图发现

    Action返回一个视图时, 这个过程叫“视图发现”。默认的 return View(); 将返回与当前Action方法同名的视图。搜索匹配的视图文件顺序规则如下:

        Views/[ControllerName]/[ViewName].cshtml
        Views/Shared/[ViewName].cshtml

    当return View()时,首先在 Views/[ControllerName] 文件夹中搜索该视图。 如果在此处找不到匹配的视图,则会在“Shared”文件夹中搜索该视图。

    在返回视图时,可以提供视图文件路径。 如果使用绝对路径(“/”或“~/”开头),必须指定 .cshtml 扩展名:

      return View("Views/Home/About.cshtml");

    也可使用相对路径在不同目录中指定视图,而无需指定 .cshtml 扩展名:

       return View("../Manage/Index");

    可以用“./”前缀来指示当前的控制器特定目录:

       return View("./About");

  1.4 向视图传递数据

    可以使用多种方法将数据传递给视图。包括:(1)强类型数据:viewmodel。(2)弱类型数据ViewData (ViewDataAttribute)、ViewBag。ViewBag 在 Razor 页中不可用。

    (1) 强类型数据 viewmodel

      在传递数据到视图中,最可靠的是使用强类型数据,因为编译时能检查并且有智能感知。在视图页中使用@model指令来指定模型(可以是实体或集合泛型实体)。如下所示,其中前端的WebApplication1.ViewModels.Address是实体类命令空间,通过后端返回view强类型映射:

@model WebApplication1.ViewModels.Address
<h2>Contact</h2>
<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>
public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };

    //返回强类型
    return View(viewModel);
}

  (2) 弱类型数据(ViewData、ViewData 属性和 ViewBag)

    视图还可以访问弱类型(也称为松散类型)的数据集合。可以使用弱类型数据集合将少量数据传入及传出控制器和视图。ViewData 属性是弱类型对象的字典。ViewBag 属性是 ViewData 的包装器,为基础 ViewData 集合提供动态属性。ViewData派生自 ViewDataDictionary,ViewBag派生自 DynamicViewData。

    ViewData 和 ViewBag 在运行时进行动态解析。 由于它们不提供编译时类型检查,因此使用这两者通常比使用 viewmodel 更容易出错。建议尽量减少或根本不使用 ViewData 和 ViewBag。

    ViewData介绍

      下面是一个ViewData存储对象,在视图上强制转换为特定类型(Address)。

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}
@{
    // Since Address isn't a string, it requires a cast.
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

  

    ViewData 特性介绍

      可以在控制器或 Razor 页面模型上,使用 [ViewData] 修饰属性。下面是一个示例:

public class HomeController : Controller
{
    [ViewData]
    public string Title { get; set; }

    public IActionResult About()
    {
        Title = "About Us";
        ViewData["Message"] = "Your application description page.";

        return View();
    }
}
//通过字典key取出
<title>@ViewData["Title"] - WebApplication</title>

    

    ViewBag介绍

      ViewBag 不需要强制转换,因此使用起来更加方便。下面示例如下:   

public IActionResult SomeAction()
{
   // Greeting不需要先声明,Address 也一样,因为是Dynamic类型
    ViewBag.Greeting = "Hello";
    ViewBag.Address  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}
@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br>
    @ViewBag.Address.Street<br>
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

  

    更多视图功能包括:标记帮助程序、服务注入视图,视图组件等

相关推荐

史上最全的浏览器兼容性问题和解决方案

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)●●●...

平面设计基础知识_平面设计基础知识实验收获与总结
平面设计基础知识_平面设计基础知识实验收获与总结

CSS构造颜色,背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变:display:inline(是内联的...

2025-02-21 16:01 yuyutoo

写作排版简单三步就行-工具篇_作文排版模板

和我们工作中日常word排版内部交流不同,这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考,排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的,在排...

写一个2048的游戏_2048小游戏功能实现

1.创建HTML文件1.打开一个文本编辑器,例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中:html...

今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……

  最近的天气暖和得让很多小伙伴们喊“热”!!!  昨天的气温到底升得有多高呢?你家有没有榜上有名?...

CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义CSS变量,自定义主题颜色。布局...

柠檬科技肖勃飞:大数据风控助力信用社会建设

...

你的自我界限够强大吗?_你的自我界限够强大吗英文

我的结果:A、该设立新的界限...

行内元素与块级元素,以及区别_行内元素和块级元素有什么区别?

行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。块级元素:(以下列举比较常...

让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华
让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华

去年的两会期间,习近平总书记在参加人大会议四川代表团审议时,对治蜀兴川提出了明确要求,指明了前行方向,并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...

2025-02-21 16:00 yuyutoo

今年国家综合性消防救援队伍计划招录消防员15000名

记者24日从应急管理部获悉,国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名,其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...

一起盘点最新 Chrome v133 的5大主流特性 ?

1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值,类似于var()函数替换自定义属性值的方式。...

竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使

style="text-align:center;"data-mce-style="text-align:...

学物理能做什么?_学物理能做什么 卢昌海

作者:曹则贤中国科学院物理研究所原标题:《物理学:ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中,主持人问过我一个的问题:“学物理的人,如果日后不...

你不知道的关于这只眯眼兔的6个小秘密
你不知道的关于这只眯眼兔的6个小秘密

在你们忙着给熊本君做表情包的时候,要知道,最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年,它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...

2025-02-21 16:00 yuyutoo

取消回复欢迎 发表评论: