欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

ASP.NET Core MVC 和 Visual Studio入门（三） 添加视图 有大用

星期三, 2021-09-22 23:32 — adminshiping1

本节将修改HelloWorldController类，从而使用Razor视图模板来干净利索地封装产生一个HTML回应给客户端的过程。

我们将使用Razor创建一个视图模板,基于Razor的视图模板有一个.cshtml文件扩展名，并能使用C#提供优美简练的方式创建HTML输出。

当前，控制器类中的Index方法返回一个硬编辑的消息字符串，在HelloWorldController类，用以下代码代替Index方法。

 public IActionResult Index()

{

    return View();

}

如上的Index方法返回一个View对象，它使用视图模板生成HTML回应给浏览器，控制器方法（或如所知的行为方法），诸如上面的Index方法，通常返回一个IActionResult（或一个继承于IActionResult的类）对象，而非单纯的像字符串的文字。

右击Views文件夹，然后是Add > New Folder，命名这个文件夹为HelloWorld。

右击 Views/HelloWorld 文件夹,然后是 Add > New Item。

在 Add New Item - MvcMovie 对话框内

在右上角的搜索框内，输入view

点击 MVC View Page

在 Name 框内，如有必要，改变其命名为Index.cshtml.

点击 Add

image.png

将Razor视图文件Views/HelloWorld/Index.cshtml的内容替换为以下代码：

@{

    ViewData["Title"] ="Index";

}

<h2>Index</h2>

<p>Hello from our View Template!</p>

导航到http://localhost:xxxx/HelloWorld，HelloWorldController中的Index方法没有做太多的工作，它只是简单的运行了return  View()语句，该语句说明了该方法应使用一个视图模板给浏览器渲染一个回应。由于没有显示地指定要使用的视图模板的名称，MVC缺省地使用/Views/HelloWorld 文件夹内的Index.cshtml视图文件，下图显示了在视图中被硬编码的字符串“Hello from our View Template!”。

image.png

 


如果你的浏览器窗口较小（比如在移动设备上），你可能需要切换（点击）右上方的Bootstrap导航钮来才能看到Home, About, 和Contact 链接。

 

image.png

1      改变视图和布局页

点击菜单链接（MvcMovie, Home,About），每个页面都显示同样的菜单布局，该菜单布局是在Views/Shared/_Layout.cshtml文件中实现的，打开Views/Shared
/_Layout.cshtml文件。

布局模板允许在一个地方指定网站的HTML容器布局并可跨多网页在网站中应用它。在Views/Shared/_Layout.cshtml文件中找到@RenderBody()行，RenderBody是一个占位符，所有你创建的且包含在布局页面之内的具体视图都显示在该占位符所在的位置，比如，如果你选择About链接，则 Views/Home/About.cshtml视图的内容被被渲染在RenderBody方法内。

2     在布局文件中改变标题和菜单链接。

改变标题元素的内容，在Views/Shared/_Layout.cshtml文件中,改变第七行,将锚文本修改为“Movie App”，再改变第三十一行,将控制器由Home改为Movies,存盘,修改后的代码如下所示：


  1. @inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>@ViewData["Title"] - Movie App</title>
  8. <environment names="Development">
  9. <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
  10. <link rel="stylesheet" href="~/css/site.css" />
  11. </environment>
  12. <environment names="Staging,Production">
  13. <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
  14. asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
  15. asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
  16. <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
  17. </environment>
  18. @Html.Raw(JavaScriptSnippet.FullScript)
  19. </head>
  20. <body>
  21. <nav class="navbar navbar-inverse navbar-fixed-top">
  22. <div class="container">
  23. <div class="navbar-header">
  24. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  25. <span class="sr-only">Toggle navigation</span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. <span class="icon-bar"></span>
  29. </button>
  30. <a asp-area="" asp-controller="Movies" asp-action="Index" class="navbar-brand">MvcMovie</a>
  31. </div>
  32. <div class="navbar-collapse collapse">
  33. <ul class="nav navbar-nav">
  34. <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
  35. <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  36. <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
  37. </ul>
  38. </div>
  39. </div>
  40. </nav>
  41. <div class="container body-content">
  42. @RenderBody()
  43. <hr />
  44. <footer>
  45. <p>&copy; 2017 - MvcMovie</p>
  46. </footer>
  47. </div>
  48. <environment names="Development">
  49. <script src="~/lib/jquery/dist/jquery.js"></script>
  50. <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
  51. <script src="~/js/site.js" asp-append-version="true"></script>
  52. </environment>
  53. <environment names="Staging,Production">
  54. <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
  55. asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
  56. asp-fallback-test="window.jQuery"
  57. crossorigin="anonymous"
  58. integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
  59. </script>
  60. <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
  61. asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
  62. asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
  63. crossorigin="anonymous"
  64. integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
  65. </script>
  66. <script src="~/js/site.min.js" asp-append-version="true"></script>
  67. </environment>
  68. @RenderSection("Scripts", required: false)
  69. </body>
  70. </html>

注意

我们还没有实现Movies控制器，所以如果单击该链接，将会得到一个404（未发现)错误。

保存改变并点击About链接，注意浏览器标签上的显示的标题如何由About - Mvc Movie变为About - Movie App，点击Contact链接，可发现标题仍显示为Movie App。我们一旦在布局模板中作了改变，这个网站的所有页都映射新的链接文本和新的标题。

检查Views/_ViewStart.cshtml 文件:

@{

    Layout = "_Layout";

}

Views/_ViewStart.cshtml 文件将Views/Shared/_Layout.cshtml 文件的内容引入到每个视图中。你可使用该布局属性来设置一个不同的布局视图，或将它设为空值而不使用布局文件。

3     改变Index视图的标题

打开Views/HelloWorld/Index.cshtml文件，对两个地方进行修改：

出现在浏览器的标题的文本

二级标头（<h2>元素）

对它们作一些少量的修改，这样你能理解改变的是应用的哪个部分哪些代码。

@{

    ViewData["Title"] = "Movie List";

}

<h2>MyMovie List</h2>

<p>Hello from our View Template!</p>

上面代码中的ViewData["Title"]= "Movie List"; 将ViewData字典的标题属性设置为"Movie List"。该标题属性在布局页中用于<title> HTML元素:

<title>@ViewData["Title"] - Movie App</title>
 

存盘并导航到http://localhost:xxxx/HelloWorld.注意浏览器标题、一级标头、二级标头已经变了。（如果在浏览器中没有看到改变，可能你看到的是缓存中的内容，在你的浏览器中按Ctrl+F5以强制来自服务器的回应被载入。）浏览器标题的由我们在Index.cshtml视图模板中设置的ViewData["Title"]和在布局文件中增加的附加内容"-Movie App"组合而成。

同时注意Index.cshtml 视图模板中的内容如何与Views/Shared/_Layout.cshtml 视图模板合并，单一的HTML 回应如何发送给浏览器。布局模板使在应用中所有页面上施加改变变得非常简单。更多见Layout.

image.png

我们仅有的一点“数据”（本例中的“Hello from our View Template!”消息）是硬编码的，尽管这个MVC应用有了一个“V”（视图）和一个“C”（控制），但仍然还没有“M”（模型）。

4     从控制器传递数据到视图

在回应输入的URL请求中，控制器行为被调用，控制器类是编写处理进来的浏览器请求的代码的地方，控制器从数据源取回数据并决定向浏览器发回什么类型的回应，视图模板可被从控制器使用以生成和格式化HTML回应给浏览器。

控制器负责为视图模板渲染回应提供需要的数据。最好的做法是，视图模板不去执行业务逻辑，并且不直接读写数据库，相反，视图模板应该只与被控制器提供给它的数据一起工作，保持这种“关系分离”可使代码更干净且易于测试、易于维护。

现在，HelloWorldController 类中的Welcome 方法获取了name和ID参数并直接输出其值给浏览器。与其让控制器以字符串渲染回应，不如改变控制器，用一个视图模板代替字符串，视图模板将产生动态的回应，这意味着为了产生回应，需要从控制器传递适当的数据比特给视图，这可以通过让控制将视图模板需要的动态数据（参数）放在视图模板可以访问的ViewData字典中来实现。

回到HelloWorldController.cs文件，改变Welcome方法，给ViewData字典增加Message和NumTimes值，ViewData字典是一个动态的对象，你可以将任何你想放入的东西放入其中。在ViewData对象中放东西之前，ViewData对象中没有任何定义好的属性，MVC模型绑定系统自动将被命名的参数从地址栏中的查询字符串映射到方法    中，完成的HelloWorldController.cs看起来像这样：

 using Microsoft.AspNetCore.Mvc;

using System.Text.Encodings.Web;

namespace MvcMovie.Controllers

{

    public class HelloWorldController :Controller

    {

        public IActionResult Index()

                       {

            return View();

        }

        public IActionResult Welcome(string name, int numTimes = 1)

                        {

            ViewData["Message"] = "Hello " + name;

            ViewData["NumTimes"] = numTimes;

            return View();

        }

    }

}

 ViewData字典对象包含了可被传递给视图的数据。

创建一个命名为Views/HelloWorld/Welcome.cshtml. 的视图模板。

你将在Welcome.cshtml中创建一个显示“Hello” NumTimes的循环，用下面的内容替换Views/HelloWorld/Welcome.cshtml文件的内容：

@{

    ViewData["Title"] ="Welcome";

}

 

<h2>Welcome</h2>

 

<ul>

    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)

    {

        <li>@ViewData["Message"]</li>

    }

</ul>

保存改变并浏览下面的URL：

http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4

MVC模型绑定系统从URL中取得数据并传递给控制器，控制器将数据打包到ViewData字典中并其传递给视图，视图接着以HTML方式渲染数据到浏览器。

 image.png

在上面的这个范例中，我们使用了 ViewData 从控制器传递数据给视图，后面的教程中，我们将使用视图模型从控制器中传递数据到视图中，使用视图模型的方法的传递数据通常比使用ViewData字典的方法更值得优先选择。

原文链接


来自  https://blog.csdn.net/jhycjhyc/article/details/72805731


普通分类: 
asp及asp.net
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2